Core ElementsFree

Toolbar

A container for grouping a set of buttons and controls.

Usage

bash

npx wunderui-cli add toolbar

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

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

Toolbar with grouped buttons and separators — the editor pattern.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Bold, italic, underline and alignment above a release note; each button changes the text below.

Prop	Type	Default
orientation	"horizontal" \| "vertical"	"horizontal"