Neumorphism UI

Toolbar

Use Toolbar to gather frequent commands for an editor, document, or workspace into a compact row.

Preview

Document commands

Group undo and disabled redo beside a save action, with local action feedback below.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/toolbar

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Name the toolbar, group related ToolbarButton controls, and separate groups with ToolbarSeparator. Connect each action to your application and expose unavailable commands as disabled.

"use client";

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

export default function Example() {
  return (
    <Toolbar aria-label="Document tools">
      <ToolbarGroup><ToolbarLink href="/documents">Documents</ToolbarLink></ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarLink href="/settings">Settings</ToolbarLink>
    </Toolbar>
  );
}

API Reference

An arrow-key-navigable set of document actions. Name the Toolbar. Disabled items remain arrow-key focusable but cannot activate. Set focusableWhenDisabled={false} to exclude them from navigation.

ComponentPropTypeDefaultDescription
Toolbarorientation"horizontal" | "vertical"—Set layout and keyboard-navigation orientation.
ToolbarloopFocusboolean—Loop keyboard focus at the ends.
ToolbarButtondisabledboolean—Disable user interaction.

Accessibility

  • 01

    Name the Toolbar. Disabled items remain arrow-key focusable but cannot activate. Set focusableWhenDisabled={false} to exclude them from navigation.

  • 02

    Preserve labels and visible focus when customizing render or className.