Vertical Tabs Layout · Sapphire UI

Organize related workspace panels beside a vertical tab list. Use it for settings or detail screens with several peer sections.

Examples

Settings

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom radix-ui

"use client";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@kongmy-dev/sapphire-ui/tabs";

function VerticalTabsSettings() {
  return (
    <Tabs
      className="sp-vertical-tabs-layout"
      orientation="vertical"
      defaultValue="profile"
    >
      <TabsList aria-label="Settings sections" variant="pills">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
      </TabsList>
      <TabsContent value="profile">
        <h2>Profile settings</h2>
        <a href="#profile-details">Edit profile</a>
      </TabsContent>
      <TabsContent value="security">
        <h2>Security settings</h2>
        <a href="#security-details">Review security</a>
      </TabsContent>
    </Tabs>
  );
}

export default VerticalTabsSettings;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-main {
  max-width: none;
}

.docs-vertical-tabs-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: calc(var(--space-1) * 7);
  color: var(--foreground-strong);
}

.docs-vertical-tabs-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: calc(var(--space-1) * 5);
  color: var(--muted-foreground);
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

HTML API

CSS-only entry: use native HTML with these shared classes. There is no React component or React props API.

HTML parts
Class	Contract
`sp-vertical-tabs-layout`	Shared styled HTML part
`sp-tabs-list`	Shared styled HTML part
`sp-tabs-content`	Shared styled HTML part

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";

Mixing package and vendored components? Follow application setup.