---
title: "Toolbar"
description: "A row of buttons, toggle groups, links, and an input that arrow keys move through as one tab stop. Built on Base UI's Toolbar."
plan: Free
docs: https://ui.edbn.me/docs/components/toolbar
---

# Toolbar

A row of buttons, toggle groups, links, and an input that arrow keys move through as one tab stop. Built on Base UI's Toolbar.

## Installation

```bash
npx shadcn@4.19.0 add https://ui.edbn.me/r/toolbar.json
```

## Dependencies
- npm: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1
- edbn: edbn-base, button, input, text-link

## Usage

```tsx examples/toolbar-basic.tsx
"use client";
import { Bold, Copy, Italic, Trash2, Underline } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarBasicPreview() {
  return (
    <Toolbar aria-label="Formatting">
      <ToggleGroup multiple spacing={0.5} aria-label="Text style">
        <ToggleGroupItem value="bold" aria-label="Bold">
          <Bold />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Italic">
          <Italic />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Underline">
          <Underline />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton aria-label="Copy">
        <Copy />
      </ToolbarButton>
      <ToolbarButton variant="ghost-destructive" aria-label="Delete">
        <Trash2 />
      </ToolbarButton>
      <ToolbarSeparator />
      <ToolbarLink href="#">Edited 5m ago</ToolbarLink>
    </Toolbar>
  );
}
```

## Files
- components/ui/toolbar.tsx (135 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt