Toolbar

Installation

bunx @prototyperco/cli add toolbar

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/toolbar.json

npx shadcn@latest add https://prototyper-ui.com/r/toolbar.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/toolbar.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/toolbar.json

This will add the following files to your project:

• components/ui/toolbar.tsx

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

<Toolbar>
  <ToolbarButton>Bold</ToolbarButton>
  <ToolbarButton>Italic</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton>Link</ToolbarButton>
</Toolbar>;

Anatomy

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton />
    <ToolbarButton />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarLink />
  </ToolbarGroup>
  <ToolbarInput />
</Toolbar>

Examples

Vertical

Styling

Data Slots

Use data-slot attributes to target specific parts of the toolbar:

Customization Examples

/* Add a border around the toolbar */
[data-slot="toolbar"] {
  @apply rounded-lg border bg-background p-1;
}

/* Style toolbar buttons with more padding */
[data-slot="toolbar-button"] {
  @apply px-4;
}

{
  /* Override styles via className */
}
<Toolbar className="rounded-lg border bg-background p-1">
  <ToolbarButton className="px-4">Bold</ToolbarButton>
</Toolbar>;

API Reference

Toolbar

Root container that provides keyboard navigation between toolbar items.

All Base UI Toolbar.Root props are forwarded via ...props.

ToolbarButton

A button within the toolbar that participates in keyboard navigation.

All Base UI Toolbar.Button props are forwarded via ...props.

ToolbarLink

A link within the toolbar that participates in keyboard navigation.

All Base UI Toolbar.Link props are forwarded via ...props.

ToolbarGroup

Groups related toolbar items together visually and semantically.

All Base UI Toolbar.Group props are forwarded via ...props.

ToolbarSeparator

A visual separator between toolbar items or groups.

All Base UI Toolbar.Separator props are forwarded via ...props.

ToolbarInput

A text input within the toolbar that participates in keyboard navigation.

All Base UI Toolbar.Input props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• Toolbar renders with role="toolbar" by default via Base UI.
• aria-orientation is set to match the orientation prop.
• aria-disabled is set on the toolbar when disabled is true.
• Toolbar items are part of a single tab stop; arrow keys navigate between items within the toolbar.
• Focus management follows the roving tabindex pattern so only one item is tabbable at a time.

Related