How do I install Expandable Tabs?

Expandable Tabs is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/expandable-tabs. It copies expandable-tabs.tsx into components/ui and installs motion, clsx, tailwind-merge.

Is Expandable Tabs free for commercial use?

Expandable Tabs needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.

Does Expandable Tabs work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Expandable Tabs?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Expandable Tabs's props and get_install_command returns the exact command.

Expandable Tabs

Icon tabs where the active one expands to reveal its label, keeping toolbars compact.

Category: Navigation
Licence: Charcoal UI Pro
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Expandable Tabs

API reference

Prop	Type	Default	Description
`items`	`{ value: string; label: string; icon: ReactNode }[]`	—
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`onValueChange`	`(value: string) => void`	—

About Expandable Tabs

Expandable Tabs keeps toolbars compact: every tab is an icon until it is active, then it expands on a spring to show its label. People get the clarity of text without the width cost.

Expandable Tabs is a navigation component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Expandable Tabs

Mobile and narrow toolbars.
Editor mode switchers.
Bottom bars in web apps.
Filter groups with icon shortcuts.

How it works

The active tab animates its width with Motion layout while the label fades in. Inactive tabs keep accessible names, and arrow keys move between them like any tablist.

Links and buttons keep their roles, arrow keys move where a group is expected, the current item is marked with aria-current, and focus is always visible. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Expandable Tabs

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.

items.
value (string): Controlled value.
defaultValue (string): Initial value when uncontrolled.

Goes well with Expandable Tabs

These navigation pieces share its tokens and motion language, so they sit together on one page without clashing.

Dock: A macOS-style React dock whose icons swell with pointer distance and show labels
Floating Nav: A floating React pill nav that hides on scroll down and returns on scroll up
Context Menu: A React right-click context menu that opens at the pointer and stays on screen
Bottom Nav: An animated React mobile tab bar with a sliding pill, hopping icons and badges
Scroll Progress: A glowing React scroll progress bar for the page or any scroll container

Install Expandable Tabs

npx shadcn@latest add @charcoal/expandable-tabs

Expandable Tabs is part of Charcoal UI Pro. One seat unlocks all 300 Pro components, 107 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies expandable-tabs.tsx into components/ui and installs clsx, tailwind-merge.

You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.

See Charcoal UI Pro pricing · Pro setup

Frequently asked questions

How do I install Expandable Tabs?: Expandable Tabs is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/expandable-tabs. It copies expandable-tabs.tsx into components/ui and installs motion, clsx, tailwind-merge.
Is Expandable Tabs free for commercial use?: Expandable Tabs needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
Does Expandable Tabs work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Expandable Tabs?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Expandable Tabs's props and get_install_command returns the exact command.

Expandable Tabs as Markdown · llms.txt