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

On this page