design-infraReport a problem or share feedback← Catalog
Expandable Tabs
freebeui/expandable-tabs
Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
$
npx shadcn@latest add @beui/expandable-tabsnpm deps: clsx, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- block
- Categories
- tabs
- Use as
- drop-in — replaces your component
- Applies to
- tabs
- Motion
- on state, hover, cursor · subtle · motion · medium cost
- Tags
- react, tailwind-v4, motion, blocks
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Halo Tabscult-ui/halo-tabsBase UI tabs with an animated glowing 'halo' indicator. Surfaces use tokens, but the halo glow is a hard-coded cyan/purple/pink palette. Needs @base-ui/react.
- Morphing Tabsbeui/morphing-tabsReorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.
- Direction Aware Tabscult-ui/direction-aware-tabsTabs whose content slides in the direction of travel. Hard-codes neutral-600/700 + white text — swap to bg-muted/text-foreground.