Group - Dreamy UI

Group

Group is helpful for grouping elements, like buttons together.

#

Installation

npx dreamy add group

pnpm dlx dreamy add group

yarn dlx dreamy add group

bunx dreamy add group

#

Usage

Group is a wrapper component that provides a way to group elements together.

<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

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>