Components
Loading preview...
A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation. There is no built-in HTML toolbar element. Toolbar helps achieve accessible toolbars with arrow key navigation that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/toolbar"use client"
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
import { Group } from "react-aria-components"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Toggle } from "@/components/ui/toggle"
import { Toolbar } from "@/components/ui/toolbar"
export function ToolbarDemo() {
return (
<Toolbar aria-label="Text formatting">
<Group aria-label="Style" className="space-x-2">
<Toggle className="w-10" variant="outline" aria-label="Bold">
<BoldIcon className="size-4" />
</Toggle>
<Toggle className="w-10" variant="outline" aria-label="Italic">
<ItalicIcon className="size-4" />
</Toggle>
<Toggle className="w-10" variant="outline" aria-label="Underline">
<UnderlineIcon className="size-4" />
</Toggle>
</Group>
<Separator orientation="vertical" />
<Group aria-label="Clipboard" className={"space-x-2"}>
<Button variant="outline">Copy</Button>
<Button variant="outline">Paste</Button>
<Button variant="outline">Cut</Button>
</Group>
</Toolbar>
)
}