DocsPricingMy accountBuy Now
UI COMPONENTS / Tabs

Tabs. switch the panel.

Tabbed interfaces with full keyboard support and optional responsive disclosure behavior.

Root + 4 atoms / Accessible / Composable

Tabs · runtimeATOMIC

Looping preview · keyboard + ARIA included

Why it's good

Behavior, handled.

Tabs owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.

  • Automatic or manual activation
  • Arrow-key trigger navigation
  • ARIA-selected and tabpanel roles
  • Responsive layout-friendly structure
Compositions

Tabs becomes patterns.

Different structures made from the same atoms.

Feature cardsATOMIC
  • Feature Section
    • Tabsroot
      • Tabs Listatom
        • Tabs Triggerbtn
          • Tabs Triggerbtn
          • Tabs Contentslot
            • Tabs Contentslot

          Feature cards

          Feature Section 20 styles Tabs Trigger as cards, but the family remains Tabs List plus paired Tabs Content panels.

          Feature Section 20
          Journey timelineATOMIC
          • Timeline
            • Tabsroot
              • Tabs Listatom
                • Tabs Triggerbtn
                  • Tabs Triggerbtn
                  • Tabs Contentslot
                    • Tabs Contentslot

                  Journey timeline

                  Testimonial 8 uses the same Tabs Trigger and Tabs Content atoms for a vertical step-by-step story.

                  Testimonial 8
                  Responsive tabsATOMIC
                  • Responsive UI
                    • Tabsroot
                      • Tabs Listatom
                        • Tabs Triggerbtn
                          • Tabs Triggerbtn
                          • Tabs Contentslot
                            • Tabs Contentslot

                          Responsive tabs

                          The responsive fallback belongs to Tabs root behavior; the authored atoms stay Tabs List, Tabs Trigger, and Tabs Content.

                          Component model
                          Ready?

                          Stop rebuilding Tabs.