║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Toolbar description: A container for grouping a set of buttons and controls with keyboard navigation support. links: doc: "https://base-ui.com/react/components/toolbar" api: "https://base-ui.com/react/components/toolbar#api-reference"

<ComponentPreview name="toolbar-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/toolbar

npx shadcn@latest add @roiui/toolbar-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/toolbar

pnpm dlx shadcn@latest add @roiui/toolbar-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="toolbar" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<Toolbar> <ToggleGroup> <ToggleGroupItem value="item1">Item 1</ToggleGroupItem> <ToggleGroupItem value="item2">Item 2</ToggleGroupItem> </ToggleGroup> <ToolbarSeparator /> <Toggle>Toggle</Toggle> <ToolbarInput placeholder="Search..." /> <ToolbarLink href="#">Link</ToolbarLink> </Toolbar> } />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║