Icon BarNew

A horizontal toolbar of icon buttons with bloom-open label reveal on hover/selection, accent dot indicator, and roving tabindex.

Dependencies

motion

Interaction Type

Click an icon to select it. Hover or focus to bloom open the label. Click selected again to deselect.

Props

Options you can pass to customize this component.

Prop

Type

Description

value

string | null

Controlled selected value.

defaultValue

string | null

Initial selected value.

onValueChange

(value: string | null) => void

Called when selection changes. null = deselected.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/icon-bar.json

How to use

<IconBar value={tool} onValueChange={setTool} aria-label="Drawing tools">
  <IconBarItem value="pen" label="Pen" icon={<PenIcon />} />
  <IconBarItem value="eraser" label="Eraser" icon={<EraserIcon />} />
  <IconBarItem value="fill" label="Fill" icon={<FillIcon />} disabled />
</IconBar>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/icon-bar.json