ascii.cnlibs.com
GithubX

Tabs

Layered sections shown one at a time.

3 deployments today.

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/tabs.json

## usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
<Tabs defaultValue="overview" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">3 deployments today.</TabsContent>
  <TabsContent value="settings">
    Environment variables and build settings live here.
  </TabsContent>
  <TabsContent value="billing">You're on the free plan.</TabsContent>
</Tabs>

## boxed

Framed tabs sitting on a framed panel — the look of the docs' install tabs.

pnpm dlx shadcn@latest add tabs

## disabled tab

Disabled tabs are skipped by keyboard focus.