Strongtie Design System
Getting StartedComponents

Search documentation

Search for a command to run or a page to navigate to.

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Styles Only (CSS)
  • Code Quality Setup
  • Resources
Guides
  • Framework Recommendations
  • Design Standards
  • Design Standards Examples
AI-Assisted Development
  • AI Agent Guide
  • AI Agent Skills
  • AGENTS.md Template
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tab Nav
  • Tree
Foundations
  • States
  • Variables
Migrations
  • Migration Guide
  • CDN Migration Guide
  • Telerik Migration
Governance
  • Governance Model
  • Contribution Model
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input Otp
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Tab Nav
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Tabs

Tabs

PreviousNext

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.

TableTextarea

On This Page

ExampleInstallationComponentsPropsExampleStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page