Navigation & disclosure@neumorphism-ui/toolbar

Toolbar

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.

@neumorphism-ui/toolbar

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/toolbar

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

import * as React from "react";
import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator } from "@/components/ui/toolbar";

Example

export default function Example() {
  const [message, setMessage] = React.useState("");
  return (<div className="grid gap-3"><Toolbar aria-label={"Document tools"}><ToolbarGroup><ToolbarButton onClick={() => setMessage("Undo")}>{"Undo"}</ToolbarButton><ToolbarButton disabled>{"Redo"}</ToolbarButton></ToolbarGroup><ToolbarSeparator /><ToolbarButton onClick={() => setMessage("Local example saved.")}>{"Save changes"}</ToolbarButton></Toolbar><p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p></div>);
}

API Reference

Component	Prop	Type	Default	Description
`Toolbar`	`orientation`	`"horizontal" \| "vertical"`	`—`	Set layout and keyboard-navigation orientation.
`Toolbar`	`loopFocus`	`boolean`	`—`	Loop keyboard focus at the ends.
`ToolbarButton`	`disabled`	`boolean`	`—`	Disable user interaction.