Components
Tabs
A tabs component
Preview
Loading...
import { Button } from "@/registry/axon/ui/button";import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/registry/axon/ui/card";import { Input } from "@/registry/axon/ui/input";import { Label } from "@/registry/axon/ui/label";import { Tabs, TabsContent, TabsList, TabsTrigger,} from "@/registry/axon/ui/tabs";export default function TabsDemo() { return ( <div className="flex w-full max-w-sm flex-col gap-6"> <Tabs defaultValue="account"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account"> <Card> <CardHeader> <CardTitle>Account</CardTitle> <CardDescription> Make changes to your account here. Click save when you're done. </CardDescription> </CardHeader> <CardContent className="grid gap-6"> <div className="grid gap-3"> <Label htmlFor="tabs-demo-name">Name</Label> <Input defaultValue="Pedro Duarte" id="tabs-demo-name" /> </div> <div className="grid gap-3"> <Label htmlFor="tabs-demo-username">Username</Label> <Input defaultValue="@peduarte" id="tabs-demo-username" /> </div> </CardContent> <CardFooter> <Button>Save changes</Button> </CardFooter> </Card> </TabsContent> <TabsContent value="password"> <Card> <CardHeader> <CardTitle>Password</CardTitle> <CardDescription> Change your password here. After saving, you'll be logged out. </CardDescription> </CardHeader> <CardContent className="grid gap-6"> <div className="grid gap-3"> <Label htmlFor="tabs-demo-current">Current password</Label> <Input id="tabs-demo-current" type="password" /> </div> <div className="grid gap-3"> <Label htmlFor="tabs-demo-new">New password</Label> <Input id="tabs-demo-new" type="password" /> </div> </CardContent> <CardFooter> <Button>Save password</Button> </CardFooter> </Card> </TabsContent> </Tabs> </div> );}Installation
CLI
npx shadcn@latest add @emberui/tabsyarn shadcn@latest add @emberui/tabspnpm dlx shadcn@latest add @emberui/tabsbunx --bun shadcn@latest add @emberui/tabsReference
This component is based on the shadcn/ui Tabs component.