Tabs

npx shadcn@latest add https://ui.saasflare.io/r/tabs.json

pnpm add @saasflare/ui

"use client"import { Tabs, TabsContent, TabsList, TabsTrigger } from "@saasflare/ui"/** Tabbed sections for a project settings page. */export function Demo() {    return (        <Tabs defaultValue="overview" className="w-96">            <TabsList>                <TabsTrigger value="overview">Overview</TabsTrigger>                <TabsTrigger value="members">Members</TabsTrigger>                <TabsTrigger value="billing">Billing</TabsTrigger>            </TabsList>            <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">                Usage is up 24% this month across all environments.            </TabsContent>            <TabsContent value="members" className="pt-3 text-sm text-muted-foreground">                8 active members. 2 invitations pending acceptance.            </TabsContent>            <TabsContent value="billing" className="pt-3 text-sm text-muted-foreground">                Pro plan — $49/month. Next invoice on June 1.            </TabsContent>        </Tabs>    )}

"use client"import { Tabs, TabsContent, TabsList, TabsTrigger } from "@saasflare/ui"/** The underline `line` variant for a lighter, content-focused tab bar. */export function Demo() {    return (        <Tabs defaultValue="activity" className="w-96">            <TabsList variant="line">                <TabsTrigger value="activity">Activity</TabsTrigger>                <TabsTrigger value="webhooks">Webhooks</TabsTrigger>                <TabsTrigger value="logs">Logs</TabsTrigger>            </TabsList>            <TabsContent value="activity" className="pt-3 text-sm text-muted-foreground">                Latest deploy succeeded 4 minutes ago.            </TabsContent>            <TabsContent value="webhooks" className="pt-3 text-sm text-muted-foreground">                3 endpoints configured. All delivering normally.            </TabsContent>            <TabsContent value="logs" className="pt-3 text-sm text-muted-foreground">                No errors in the last 24 hours.            </TabsContent>        </Tabs>    )}

"use client"import { Tabs, TabsContent, TabsList, TabsTrigger } from "@saasflare/ui"/** A vertical tab layout for a settings sidebar. */export function Demo() {    return (        <Tabs defaultValue="profile" orientation="vertical" className="w-[28rem]">            <TabsList>                <TabsTrigger value="profile">Profile</TabsTrigger>                <TabsTrigger value="notifications">Notifications</TabsTrigger>                <TabsTrigger value="security">Security</TabsTrigger>            </TabsList>            <TabsContent value="profile" className="text-sm text-muted-foreground">                Update your name, avatar, and public handle.            </TabsContent>            <TabsContent value="notifications" className="text-sm text-muted-foreground">                Choose which product emails you receive.            </TabsContent>            <TabsContent value="security" className="text-sm text-muted-foreground">                Two-factor authentication is enabled.            </TabsContent>        </Tabs>    )}