# Tabs page

> A tabbed settings page with account, notifications, and security panels.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/tabs-page).

- Page, with a live preview: https://shadcn.exchange/r/quill/tabs-page
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/tabs-page-light-1b98624b9e98c4b8.png
- Registry item: https://www.quilldesignsystem.com/r/tabs-page.json
- Categories: navigation, settings
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/tabs-page.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `tabs`, `card`, `input`, `label`, `switch`

## Notes from the registry

A tabbed settings page with account, notifications, and security panels. Do: Keep each TabsTrigger's `value` identical to its TabsContent's `value` when you rename a section (here, `account`/`notifications`), so the tab a user lands on always has a panel to show. Don't: Rename a TabsTrigger's `value` (e.g. Notifications → Alerts) without updating its TabsContent to match — the renamed tab still highlights as active since its own value is valid, but the panel underneath renders empty because no content shares that value anymore. Use settings when everything fits on one page without needing to split into separate tabbed sections. Use wizard when the sections are sequential setup steps completed once, not independent settings a user revisits and edits freely.

## Files

### `registry/blocks/tabs-page.tsx`

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'

/** A tabbed settings page with account, notifications, and security panels. */
export function TabsPage() {
  return (
    <div className="w-[560px]">
      <Tabs defaultValue="account">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <Card>
            <CardHeader>
              <CardTitle>Account</CardTitle>
              <CardDescription>Update your account details.</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-4">
              <div className="flex flex-col gap-1.5">
                <Label htmlFor="t-name">Display name</Label>
                <Input id="t-name" defaultValue="Ada Lovelace" />
              </div>
              <div className="flex flex-col gap-1.5">
                <Label htmlFor="t-email">Email</Label>
                <Input id="t-email" type="email" defaultValue="ada@example.com" />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="notifications">
          <Card>
            <CardHeader>
              <CardTitle>Notifications</CardTitle>
              <CardDescription>Choose what you hear about.</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="t-email-n">Email digests</Label>
                <Switch id="t-email-n" defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="t-push">Push notifications</Label>
                <Switch id="t-push" />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle>Security</CardTitle>
              <CardDescription>Keep your account safe.</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-1.5">
              <Label htmlFor="t-pass">New password</Label>
              <Input id="t-pass" type="password" placeholder="••••••••" />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
```