Data Display
Forms
Navigation
Group
A component for visually grouping a series of controls.
import {
ArchiveIcon,
EditIcon,
EllipsisIcon,
FilesIcon,
FilmIcon,
ShareIcon,
TrashIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Group, GroupSeparator } from "@/components/ui/group";
import {
Menu,
MenuItem,
MenuPopup,
MenuTrigger,
} from "@/components/ui/menu";
export default function Particle() {
return (
<Group aria-label="File actions">
<Button variant="outline">
<FilesIcon />
Files
</Button>
<GroupSeparator />
<Button variant="outline">
<FilmIcon />
Media
</Button>
<GroupSeparator />
<Menu>
<MenuTrigger
render={<Button aria-label="Menu" size="icon" variant="outline" />}
>
<EllipsisIcon className="size-4" />
</MenuTrigger>
<MenuPopup align="end">
<MenuItem>
<EditIcon />
Edit
</MenuItem>
<MenuItem>
<ArchiveIcon />
Archive
</MenuItem>
<MenuItem>
<ShareIcon />
Share
</MenuItem>
<MenuItem variant="destructive">
<TrashIcon />
Delete
</MenuItem>
</MenuPopup>
</Menu>
</Group>
);
}
Installation
pnpm dlx cnippet@latest add group
Usage
import { Button } from "@/components/ui/button"
import { Group, GroupSeparator } from "@/components/ui/group"<Group>
<Button>Button</Button>
<GroupSeparator />
<Button>Button</Button>
</Group>Accessibility
- The
Groupcomponent has theroleattribute set togroup. - Use
Tabto navigate between the controls in the group. - Use
aria-labeloraria-labelledbyto label the group.
<Group aria-label="Media controls">
<Button variant="outline">Play</Button>
<GroupSeparator />
<Button variant="outline">Pause</Button>
</Group>Group vs ToggleGroup
- Use the
Groupcomponent when you want to group controls that perform an action. - Use the
ToggleGroupcomponent when you want to group controls that toggle a state.
API Reference
Group
The Group component is a container that visually groups a series of related controls together with consistent styling.
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
<Group>
<Button>Button 1</Button>
<GroupSeparator />
<Button>Button 2</Button>
</Group>Nest multiple groups to create complex layouts with spacing. See the nested groups example for more details.
<Group>
<Group>
<Button>1</Button>
<GroupSeparator />
<Button>2</Button>
</Group>
<Group>
<Button>Previous</Button>
<GroupSeparator />
<Button>Next</Button>
</Group>
</Group>GroupSeparator
The GroupSeparator component visually divides controls within a group.
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" |
<Group>
<Button>Button 1</Button>
<GroupSeparator />
<Button>Button 2</Button>
</Group>Note: Unlike shadcn's ButtonGroup, GroupSeparator is required between all controls, including outline buttons. This ensures consistent visual hierarchy and focus states.
GroupText
Use this component to display text within a group, such as labels or prefixes.
| Prop | Type | Default |
|---|---|---|
render | React.ReactNode | null | null |
<Group>
<GroupText>https://</GroupText>
<GroupSeparator />
<Input placeholder="example.com" />
</Group>Use the render prop to render a custom component as the text, for example a label.
<Group>
<GroupText render={<Label htmlFor="domain" aria-label="Domain" />}>
https://
</GroupText>
<GroupSeparator />
<Input id="domain" placeholder="example.com" />
</Group>