Tabs with icons and line variant
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A side list of Projects, Tasks, Team and Reports, each led by an icon, 2 ending in a right aligned count badge
When to use
- Account, password and settings forms split into panels so only one shows at a time
- Side navigation inside a page, with sections stacked in a column beside the open panel
- Views of one surface, such as dashboard sections, mail folders or visitor stats by period
When not to use
- A plain side list of text labels with no icons or counts: use the Tabs Vertical Line example
- Counts on a horizontal row of folders with no icons: use the Tabs Badge Counts example
- A finished account settings page with workspace, team and billing sections built in: use the Profile blocks
- A metric card whose period switch redraws a plotted trend: use the Line Chart blocks
- A project header with a breadcrumb on top and a row of sections with avatars below: use the Navbar blocks
Agent notes
plansand itstablerIconfields are declared but never rendered; delete the constant when adapting- The 8 and 24 counts appear in both a
Badgeand the panel copy, so update them together from one source - Only the active
TabsContentrenders in either twin, so other panels ship no server HTML and lose typed values on a switch - Arrow keys only move focus across
TabsTriggeritems on the base twin, where Enter or Space selects; radix selects on focus
https://reui.io/components/tabs/c-tabs-8.mdget_example("c-tabs-8")npx shadcn@latest add @reui/c-tabs-8About Shadcn Tabs Side List Icons
Tabs with icons and line variant. Built by composing Badge, Card, Tabs. A free, open source shadcn tabs example you can install with npx shadcn@latest add @reui/c-tabs-8 and edit as your own code.
What You Can Build With Shadcn Tabs Side List Icons
- Composes Badge, Card, Tabs, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-tabs-8
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Tabs Examples
- Basic Basic tabs.
- Line Variant Tabs with line variant.
- Vertical Tabs with vertical orientation.
- Vertical Line Tabs with vertical orientation and line variant.
- Icons Tabs with icons.
- Full Width Icons Tabs with icons
- Badge Counts Tabs with badge counts
- Segmented Control Segmented control tabs
Related Shadcn Component Categories
Open-source shadcn textarea components for comments, long-form input, and support tickets.
Open-source shadcn time picker components for booking forms, opening hours, and shift scheduling.
Open-source shadcn timeline components for activity feeds, roadmaps, and event history.
Open-source shadcn toggle components for formatting controls, compact actions, and binary UI states.
Open-source shadcn toggle group components for view switches, toolbar options, and mutually exclusive actions.
Open-source shadcn tooltip components for inline hints, contextual guidance, and helper text.
Frequently Asked Questions
When should I use Shadcn Tabs Side List Icons?
Use it for a side list of Projects, Tasks, Team and Reports, each led by an icon, 2 ending in a right aligned count badge.
Shadcn Tabs as a whole fits:
- Account, password and settings forms split into panels so only one shows at a time
- Side navigation inside a page, with sections stacked in a column beside the open panel
- Views of one surface, such as dashboard sections, mail folders or visitor stats by period
For a plain side list of text labels with no icons or counts, use the Tabs Vertical Line example. For counts on a horizontal row of folders with no icons, use the Tabs Badge Counts example. For a finished account settings page with workspace, team and billing sections built in, use the Profile blocks. For a metric card whose period switch redraws a plotted trend, use the Line Chart blocks. For a project header with a breadcrumb on top and a row of sections with avatars below, use the Navbar blocks.
How do I install Shadcn Tabs Side List Icons?
Is Shadcn Tabs Side List Icons free to use?
Which components does Shadcn Tabs Side List Icons use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.