Components
Toolbar from HeroUI v3 — a container for grouping interactive controls (buttons, button groups, toggle buttons) into a single accessible bar with roving arrow-key navigation. Supports horizontal and vertical orientation, an attached variant with a surface background and full rounding, and Separator dividers between groups. Built on React Aria for full keyboard and screen-reader support; ships the real @heroui/react package with @heroui/styles BEM CSS.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-toolbarLoading preview...
import {
Toolbar,
Button,
ButtonGroup,
Separator,
ToggleButton,
ToggleButtonGroup,
} from "@/components/ui/heroui-toolbar"
import {
Undo2,
Redo2,
Bold,
Italic,
Underline,
AlignLeft,
AlignCenter,
AlignRight,
} from "lucide-react"
export default function WithButtonGroup() {
return (
<Toolbar aria-label="Editor toolbar">
<ButtonGroup>
<Button variant="secondary">
<Undo2 className="size-4" />
Undo
</Button>
<ButtonGroup.Separator />
<Button variant="secondary">
<Redo2 className="size-4" />
Redo
</Button>
</ButtonGroup>
<Separator />
<ToggleButtonGroup aria-label="Text style" selectionMode="multiple">
<ToggleButton isIconOnly aria-label="Bold" id="bold">
<Bold className="size-4" />
</ToggleButton>
<ToggleButton isIconOnly aria-label="Italic" id="italic">
<ToggleButtonGroup.Separator />
<Italic className="size-4" />
</ToggleButton>
<ToggleButton isIconOnly aria-label="Underline" id="underline">
<ToggleButtonGroup.Separator />
<Underline className="size-4" />
</ToggleButton>
</ToggleButtonGroup>
<Separator />
<ButtonGroup>
<Button isIconOnly aria-label="Align left" variant="secondary">
<AlignLeft className="size-4" />
</Button>
<ButtonGroup.Separator />
<Button isIconOnly aria-label="Align center" variant="secondary">
<AlignCenter className="size-4" />
</Button>
<ButtonGroup.Separator />
<Button isIconOnly aria-label="Align right" variant="secondary">
<AlignRight className="size-4" />
</Button>
</ButtonGroup>
</Toolbar>
)
}
Loading preview...
Loading preview...
Loading preview...