Expandable Tabs

An accessible Base UI tab selector that expands the active icon into a labeled pill with input-aware layout motion.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@base-ui/react, motion, react-icons

Install

npx shadcn@latest add @sona-ui/expandable-tabs

Files

• src/registry/sonaui/expandable-tabs/expandable-tabs.tsx
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/registry/sonaui/sona-motion/sona-motion.ts
• src/lib/sona-motion.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Navigation Components
• React Navigation Components
• Tailwind CSS Navigation Components
• Animated Navigation Components
• Tab Bar Components
• Tailwind CSS Tab Bar Components
• Animated Tab Bar Components
• Tabs Components
• React Tabs Components
• Tailwind CSS Tabs Components
• Animated Tabs Components

More from Sona UI

• Animated Tabs
• Fluid Tabs
• Accordion
• Activity Graph
• Animated Checkbox
• Animated Dialog
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton