🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Tabs

A set of layered content panels that display one panel at a time.

Tabs organize related content into separate views, allowing users to switch between different sections without leaving the current page. They're ideal for grouping information into logical categories while conserving screen space. Each tab consists of a trigger (the clickable label) and associated content that appears when selected.

Built on top of Radix UI's Tabs primitive with full keyboard navigation (Arrow keys to move between tabs, Home/End for first/last tab), focus management, and accessibility support including proper ARIA attributes and roles.

Example

Make changes to your account here.

"use client"

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@strongtie/design-system/tabs"

export function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="text-sm">Make changes to your account here.</p>
      </TabsContent>
      <TabsContent value="password">
        <p className="text-sm">Change your password here.</p>
      </TabsContent>
    </Tabs>
  )
}

Installation


npm install @strongtie/design-system

import { Tabs } from "@strongtie/design-system/tabs"

Components

This module exports the following components:

Tabs
TabsList
TabsTrigger
TabsContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

Make changes to your account here.

"use client"

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@strongtie/design-system/tabs"

export function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="text-sm">Make changes to your account here.</p>
      </TabsContent>
      <TabsContent value="password">
        <p className="text-sm">Change your password here.</p>
      </TabsContent>
    </Tabs>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

tabs-content
tabs-list
tabs-trigger

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI tabs Documentation

Table Textarea

On This Page

Example Installation Components Props Example Styling Additional Classes Accessibility Resources

Contribute

Tabs

A set of layered content panels that display one panel at a time.

Example

Make changes to your account here.

"use client"

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@strongtie/design-system/tabs"

export function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="text-sm">Make changes to your account here.</p>
      </TabsContent>
      <TabsContent value="password">
        <p className="text-sm">Change your password here.</p>
      </TabsContent>
    </Tabs>
  )
}

Installation


npm install @strongtie/design-system

import { Tabs } from "@strongtie/design-system/tabs"

Components

This module exports the following components:

Tabs
TabsList
TabsTrigger
TabsContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

Make changes to your account here.

"use client"

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@strongtie/design-system/tabs"

export function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="text-sm">Make changes to your account here.</p>
      </TabsContent>
      <TabsContent value="password">
        <p className="text-sm">Change your password here.</p>
      </TabsContent>
    </Tabs>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

tabs-content
tabs-list
tabs-trigger

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI tabs Documentation

Table Textarea

On This Page

Example Installation Components Props Example Styling Additional Classes Accessibility Resources

Contribute