ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Tabs

UI Library:

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Open in
Loading

Installation

pnpm dlx shadcn@latest add @toui/tabs

Examples

Icon

Open in
Loading

Badge

Open in
Loading

Button

Open in
Loading

Pill

Open in
Loading

Line

Open in
Loading

Vertical

Open in
Loading

Size - Large

Open in
Loading

Size - Medium

Open in
Loading

Size - Small

Open in
Loading

Size - Xsmall

Open in
Loading

Disabled

Open in
Loading

API Reference

This component is built using Radix UI Tabs primitives. For detailed information, please visit the full API reference.

Tabs

This component is based on the Tabs.Root primitive. For full details, visit the official documentation.

TabsList

This component is based on the Tabs.List primitive and includes the following custom props:

PropTypeDefault
variant enum "default"
size enum "md"
className stringundefined

TabsTrigger

This component is based on the Tabs.Trigger primitive and inherits the following props from context:

PropTypeDefault
variant enum "default"
size enum "md"
className stringundefined

TabsContent

This component is based on the Tabs.Content primitive and includes the following custom props:

PropTypeDefault
variant enum "default"
className stringundefined

Credits

  • Built with Radix UI Tabs.
PreviouseTableNextTooltip

On This Page

  • Installation
    • Install Token UI
    • Install dependencies
  • Examples
    • Icon
    • Badge
    • Button
    • Pill
    • Line
    • Vertical
    • Size - Large
    • Size - Medium
    • Size - Small
    • Size - Xsmall
    • Disabled
  • API Reference
    • Tabs
    • TabsList
    • TabsTrigger
    • TabsContent
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy