Primitive · CLI

Toolbar

Dense soft-rect toolbar chrome with Motion press feedback.

Preview

npx shadcn@latest add @atroui/toolbar

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/toolbar

Source lands in your repo. Installation · Registry

Usage

Dense chrome for editing surfaces. Buttons press ≤100ms; soft-rect, not capsules.

tsx

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

<Toolbar aria-label="Editor">
  <ToolbarGroup>
    <ToolbarButton aria-label="Bold">B</ToolbarButton>
    <ToolbarButton aria-label="Italic">I</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton aria-label="Link">Link</ToolbarButton>
</Toolbar>

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

<Toolbar aria-label="Editor">
  <ToolbarGroup>
    <ToolbarButton aria-label="Bold">B</ToolbarButton>
    <ToolbarButton aria-label="Italic">I</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton aria-label="Link">Link</ToolbarButton>
</Toolbar>