Docs
Tabs
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
import { Button } from "@repo/tailwindcss/default/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/tailwindcss/default/card";
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@repo/tailwindcss/default/tabs";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TabsDemo = () => {
return (
<Tabs defaultValue="account" class="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsIndicator />
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Name</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Username</TextFieldLabel>
<TextField />
</TextFieldRoot>
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Current password</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>New password</TextFieldLabel>
<TextField />
</TextFieldRoot>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
);
};
export default TabsDemo;import { Button } from "@repo/tailwindcss/solid/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/tailwindcss/solid/card";
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@repo/tailwindcss/solid/tabs";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TabsDemo = () => {
return (
<Tabs defaultValue="account" class="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsIndicator />
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Name</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Username</TextFieldLabel>
<TextField />
</TextFieldRoot>
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Current password</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>New password</TextFieldLabel>
<TextField />
</TextFieldRoot>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
);
};
export default TabsDemo;Installation
npx shadcn-solid@latest add tabsInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";<Tabs defaultValue="account" class="w-400px">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Make changes to your account here.</TabsContent>
<TabsContent value="password">Change your password here.</TabsContent>
</Tabs>Example
Orientation
import { Button } from "@repo/tailwindcss/default/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/tailwindcss/default/card";
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@repo/tailwindcss/default/tabs";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TabsOrientationDemo = () => {
return (
<Tabs defaultValue="account" class="w-[500px]" orientation="vertical">
<TabsList class="max-w-[200px]">
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsIndicator />
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Name</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Username</TextFieldLabel>
<TextField />
</TextFieldRoot>
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Current password</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>New password</TextFieldLabel>
<TextField />
</TextFieldRoot>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
);
};
export default TabsOrientationDemo;import { Button } from "@repo/tailwindcss/solid/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/tailwindcss/solid/card";
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@repo/tailwindcss/solid/tabs";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TabsOrientationDemo = () => {
return (
<Tabs defaultValue="account" class="w-[500px]" orientation="vertical">
<TabsList class="max-w-[200px]">
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsIndicator />
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Name</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Username</TextFieldLabel>
<TextField />
</TextFieldRoot>
</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 class="space-y-2">
<TextFieldRoot class="space-y-1">
<TextFieldLabel>Current password</TextFieldLabel>
<TextField />
</TextFieldRoot>
<TextFieldRoot class="space-y-1">
<TextFieldLabel>New password</TextFieldLabel>
<TextField />
</TextFieldRoot>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
);
};
export default TabsOrientationDemo;