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

Tabs

A navigation component that organizes content into separate views.

Tabs allow users to switch between different sections of related content within the same context, reducing the need for page navigation and keeping users focused on a specific task or topic. They organize information into logical groups that users can access through clickable labels, with only one tab's content visible 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 accept standard HTML attributes and React 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.

Classes

CSS classes used by this component:

tabs
tabs-content
tabs-list
tabs-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Table Textarea

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute

Tabs

A navigation component that organizes content into separate views.

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 accept standard HTML attributes and React 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.

Classes

CSS classes used by this component:

tabs
tabs-content
tabs-list
tabs-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Table Textarea

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute