Tabs

since 1.0

A navigation component that organizes content into separate views.

Example

Variant

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Tabs
TabsList
TabsTrigger
TabsContent

Props

`<TabsList>`

Prop	Type	Default	Description
`variant`	`"line" \| "default" \| null`	-

Variants

variant

linedefault

Table Textarea

On This Page

Example Install Components Props <TabsList>Variants