A compact UI container that groups multiple actions, controls, or tools for quick access, improved workflow efficiency, and streamlined user interactions.

Toolbar

Basic

This basic example highlights the most common use cases for a toolbar.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/toolbar

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

toggle separator

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components tailwind-merge

Anatomy

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

<Toolbar>
  <ToolbarGroup>
    <ToolbarItem />
    <ToolbarItem />
    <ToolbarItem />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarItem />
  </ToolbarGroup>
</Toolbar>

Orientation

By default, the toolbar is displayed horizontally. You can change it to vertical using the orientation prop.

Disabled

You can disable a toolbar either as a group or individually by using the isDisabled prop.

Unlock the full power of
Design Intent UI

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Switch

Calendar