Docs
タブ

タブ

タブパネルと呼ばれるコンテンツの階層化されたセクションのセット。一度に1つずつ表示されます。

Docs

Account

Make changes to your account here. Click save when you're done.

インストール

npx shadcn-ui@latest add tabs

使用方法

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">アカウント</TabsTrigger>
    <TabsTrigger value="password">パスワード</TabsTrigger>
  </TabsList>
  <TabsContent value="account">ここでアカウントの変更を加えます。</TabsContent>
  <TabsContent value="password">ここでパスワードを変更します。</TabsContent>
</Tabs>