Tabs
Overview
Tabs enable you to display contents in same place but with different way to show it.
Usually, clickable element are shown above (the tabs), and each one switch to some content related to it.
Tabs can be display vertically by default or horizontally. See examples below.
Default Tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Profile
Update your profile.
Copied !
---
import Tabs from "$components/tabs/Tabs.astro";
import TabHeader from "$components/tabs/TabHeader.astro";
import TabHeaderItem from "$components/tabs/TabHeaderItem.astro";
import TabBody from "$components/tabs/TabBody.astro";
import TabBodyItem from "$components/tabs/TabBodyItem.astro";
---
<Tabs class="bg-slate-100">
<TabHeader>
<TabHeaderItem title="Account" />
<TabHeaderItem title="Password" />
<TabHeaderItem title="Profile" />
</TabHeader>
<TabBody>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Account
</h3>
<p class="text-sm text-neutral-500">
Make changes to your account here. Click save when you're done.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name"
>
Name
</label>
<input
type="text"
placeholder="Name"
id="name"
value="Adam Wathan"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
type="text"
placeholder="Username"
id="username"
value="@adamwathan"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Password
</h3>
<p class="text-sm text-neutral-500">
Change your password here. After saving, you'll be logged out.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>
Current Password
</label>
<input
type="password"
placeholder="Current Password"
id="password"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password_new"
>
New Password
</label>
<input
type="password"
placeholder="New Password"
id="password_new"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save password
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Profile
</h3>
<p class="text-sm text-neutral-500">Update your profile.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
placeholder="Your username"
id="username"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="fullname"
>
Full Name
</label>
<input
placeholder="Firstname & Lastname"
id="fullname"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
</TabBody>
</Tabs>
Horizontal Tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Profile
Update your profile.
Copied !
---
import Tabs from "$components/tabs/Tabs.astro";
import TabHeader from "$components/tabs/TabHeader.astro";
import TabHeaderItem from "$components/tabs/TabHeaderItem.astro";
import TabBody from "$components/tabs/TabBody.astro";
import TabBodyItem from "$components/tabs/TabBodyItem.astro";
---
<Tabs class="bg-slate-100" direction="horizontal">
<TabHeader>
<TabHeaderItem title="Account" />
<TabHeaderItem title="Password" />
<TabHeaderItem title="Profile" />
</TabHeader>
<TabBody>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Account
</h3>
<p class="text-sm text-neutral-500">
Make changes to your account here. Click save when you're done.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name"
>
Name
</label>
<input
type="text"
placeholder="Name"
id="name"
value="Adam Wathan"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
type="text"
placeholder="Username"
id="username"
value="@adamwathan"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Password
</h3>
<p class="text-sm text-neutral-500">
Change your password here. After saving, you'll be logged out.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>
Current Password
</label>
<input
type="password"
placeholder="Current Password"
id="password"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password_new"
>
New Password
</label>
<input
type="password"
placeholder="New Password"
id="password_new"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save password
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Profile
</h3>
<p class="text-sm text-neutral-500">Update your profile.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
placeholder="Your username"
id="username"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="fullname"
>
Full Name
</label>
<input
placeholder="Firstname & Lastname"
id="fullname"
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
</TabBody>
</Tabs>