Icon Bar

Icon chips that spring open on hover to reveal labels.

Installation

npx shadcn@latest add @iconiq/icon-bar

File Structure

Usage

"use client";

import { Building2, Cloud, GraduationCap, Sun } from "lucide-react";
import { IconBar, IconBarItem } from "@/components/ui/icon-bar";

export function IconBarPreview() {
  return (
    <IconBar>
      <IconBarItem icon={Building2} label="Office" />
      <IconBarItem icon={GraduationCap} label="School" />
      <IconBarItem icon={Sun} label="Sunny" />
      <IconBarItem icon={Cloud} label="Cloudy" />
    </IconBar>
  );
}

Props

Props
Description

IconBar

value

Controlled selected item value. Pair with onValueChange for fully controlled selection.

Type string | null

defaultValue

Optional initial selected item when uncontrolled. Omit to start with every chip collapsed until the user clicks one.

Type string | null

onValueChange

Called when selection changes. Receives null when the active chip is clicked again to deselect.

Type (value: string | null) => void

className

Optional class names applied to the outer flex container.

Type string

children

One or more IconBarItem elements rendered in a single row with consistent spacing.

Type React.ReactNode

IconBarItem

icon

Lucide icon component rendered inside the fixed 36px icon well.

Type LucideIcon

label

Short text revealed when the chip expands. Keep labels concise so the width animation stays smooth.

Type string

value

Selection identity for this chip. Defaults to label when omitted.

Type string

onClick

Optional click handler fired after selection updates.

Type (event: React.MouseEvent<HTMLButtonElement>) => void

disabled

Disables interaction, hover preview, and selection.

Type boolean·Default false

className

Optional class names merged onto the chip button.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/toggle, @base-ui/react/toggle-group, motion, lucide-react.

This page documents the Base UI install only. Icon Bar uses Base UI Toggle Group and Toggle for selection.

The generated registry file is /r/icon-bar.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.