Group - Dreamy UI

Group

Group is helpful for grouping elements, like buttons together.

#

Import

Group - The Group component.

import { Group } from "@dreamy-ui/react/rsc";

#

Usage

Basic usage of the Group component.

<Group>
	<Button variant="outline">Button 1</Button>
	<Button variant="outline">Button 2</Button>
	<Button variant="outline">Button 3</Button>
</Group>

#

Attached

The attached prop is used to attach the contents of the group to themselfs.

<Group attached>
	<Button variant="outline">Button 1</Button>
	<Button variant="outline">Button 2</Button>
	<Button variant="outline">Button 3</Button>
</Group>

#

Orientation

The orientation prop is used to change the orientation of the group.

<Group orientation="vertical">
	<Button variant="outline">Button 1</Button>
	<Button variant="outline">Button 2</Button>
	<Button variant="outline">Button 3</Button>
</Group>

#

Grow

The grow prop is used to make the group grow to fill the container.

Tip: `full` is an alias for `w="full"`.

<Group grow full>
	<Button variant="outline">Button 1</Button>
	<Button variant="outline">Button 2</Button>
	<Button variant="outline">Button 3</Button>
</Group>

Grid

Heading