Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Account
Make changes to your account here. Click save when you're done.
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger,} from "@notion-kit/shadcn";export default function Demo() { return ( <Tabs defaultValue="account" className="w-[400px]"> <TabsList className="grid w-full grid-cols-2"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account"> <Card> <CardHeader className="py-0"> <CardTitle>Account</CardTitle> <CardDescription> Make changes to your account here. Click save when you're done. </CardDescription> </CardHeader> <CardContent className="space-y-2 px-6"> <div className="space-y-1"> <Label htmlFor="name">Name</Label> <Input id="name" defaultValue="Pedro Duarte" /> </div> <div className="space-y-1"> <Label htmlFor="username">Username</Label> <Input id="username" defaultValue="@peduarte" /> </div> </CardContent> <CardFooter className="pt-4"> <Button size="md">Save changes</Button> </CardFooter> </Card> </TabsContent> <TabsContent value="password"> <Card> <CardHeader className="py-0"> <CardTitle>Password</CardTitle> <CardDescription> Change your password here. After saving, you'll be logged out. </CardDescription> </CardHeader> <CardContent className="space-y-2 px-6"> <div className="space-y-1"> <Label htmlFor="current">Current password</Label> <Input id="current" type="password" /> </div> <div className="space-y-1"> <Label htmlFor="new">New password</Label> <Input id="new" type="password" /> </div> </CardContent> <CardFooter className="pt-4"> <Button size="md">Save password</Button> </CardFooter> </Card> </TabsContent> </Tabs> );}Installation
pnpm add @notion-kit/shadcn