Toolbar

Groups frequently used controls in a keyboard-friendly row.

Installation

Install Toolbar from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/toolbar

Usage

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

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Toolbar	The root component that owns the primary structure and state.
ToolbarGroup	Groups related items into one logical set.
ToolbarButton	A composable part of the component anatomy.
ToolbarLink	A composable part of the component anatomy.
ToolbarInput	Captures or exposes the current value.
ToolbarSeparator	Visually and semantically separates related groups.
ToolbarPrimitive	A composable part of the component anatomy.

API Reference

Toolbar exports 7 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Toolbar Component
ToolbarGroup Component
ToolbarButton Component
ToolbarLink Component
ToolbarInput Component
ToolbarSeparator Component
ToolbarPrimitive Component

Accessibility

Preserve the native and Base UI keyboard model when composing Toolbar; do not replace semantic links or controls with click-only elements.
Use concise accessible names, expose the current item when applicable, and verify focus order at both mobile and desktop widths.

Source

Toolbar is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Toggle Group Tooltip