Toolbar

A row of controls that is one Tab stop, with arrow-key movement.

When to use

Use when: A set of controls that act on the same thing, such as an editor.
Avoid when: The controls are unrelated; keep them separate.

Installation

bunx shelf add toolbar

The source lands in src/components/ui/toolbar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Toolbar from "@/components/ui/toolbar";
import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Button render={<Toggle aria-label="Bold" />}>B</Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button render={<Button variant="ghost" />}>Share</Toolbar.Button>
</Toolbar.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.