amezquita design systemGet started

Patterns

Tabs

Segmented view switcher with full keyboard navigation; built on Radix Tabs

Markdown version for agents

Import
import { Tabs } from '@amezquita/design-system/components/patterns/Tabs'

Live render

npm install @amezquita/design-system

    Props

    PropTypeDescription
    variant?'line' | 'pill'
    size?'sm' | 'md'

    Also accepts all props of: React.ComponentPropsWithoutRef<typeof RadixTabs.Root>

    Tokens

    TokenTypeValue
    --tabs-content-padding-topdimension16px
    --tabs-indicator-heightdimension2px

    Usage example

    tsx
    <Tabs defaultValue="overview" style={{ maxWidth: '480px' }}>
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="history">History</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <p style={{ margin: 0, color: 'var(--color-text-secondary)', fontSize: '14px' }}>
      An overview of the selected item appears here. This is the default active tab.
    </p>
  </TabsContent>
  <TabsContent value="details">
    <p style={{ margin: 0, color: 'var(--color-text-secondary)', fontSize: '14px' }}>
      Detailed information about the item, including all metadata and configuration.
    </p>
  </TabsContent>
  <TabsContent value="history">
    <p style={{ margin: 0, color: 'var(--color-text-secondary)', fontSize: '14px' }}>
      A log of all changes made to this item over time.
    </p>
  </TabsContent>
</Tabs>

    Sub-components

    Imported from the same path as Tabs.