CleenUI · Navigation · Tabs

Tabs

Horizontal tab control with controlled or uncontrolled state, keyboard navigation, and per-tab badges.

storybook.cleenui.com · navigation-tabs--padded
Open in new window

About Tabs

Tabs organizes content into multiple panels with a single visible at a time. The tab strip handles overflow with optional horizontal scroll or compaction into a more-menu.

Per-tab badges (counts, status indicators) display alongside the label. Each tab can optionally lazy-render its panel content to defer expensive renders until the tab is active.

When to use it

  • Multi-aspect detail views (Overview / Activity / Settings).
  • Settings page section switchers.
  • Dashboard tab-style filters.
  • Documentation panel switchers within an article.

Common props

Prop
Type
Description
tabs
Tab[]
Tab definitions {key, label, badge, render}.
activeKey
string
Currently active tab (controlled).
onTabChange
(key) => void
Fires on tab change.
lazy
boolean
Defer tab content rendering until activated.
overflow
"scroll" | "menu"
Overflow handling.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with