Tab
Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container.
Default Tab Example
js
import Card from "@/components/ui/Card";
import Icon from "@/components/ui/Icon";
import { Tab, Disclosure, Transition } from "@headlessui/react";
const buttons = [
{
title: "Home",
icon: "heroicons-outline:home",
},
{
title: "Profile",
icon: "heroicons-outline:user",
},
{
title: "Messages",
icon: "heroicons-outline:chat-alt-2",
},
{
title: "Settings",
icon: "heroicons-outline:cog",
},
];
<Card title="Default Tabs">
<Tab.Group>
<Tab.List className="lg:space-x-8 md:space-x-4 space-x-0 rtl:space-x-reverse">
{buttons.map((item, i) => (
<Tab as={Fragment} key={i}>
{({ selected }) => (
<button
className={` text-sm font-medium mb-7 capitalize bg-white
dark:bg-slate-800 ring-0 foucs:ring-0 focus:outline-none px-2
transition duration-150 before:transition-all before:duration-150 relative
before:absolute before:left-1/2 before:bottom-[-6px] before:h-[1.5px] before:bg-primary-500
before:-translate-x-1/2
${
selected
? "text-primary-500 before:w-full"
: "text-slate-500 before:w-0 dark:text-slate-300"
}
`}
>
{item.title}
</button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<div className="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate
aute id deserunt nisi.
</div>
</Tab.Panel>
<Tab.Panel>
<div className="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
</div>
</Tab.Panel>
<Tab.Panel>
<div className="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
</div>
</Tab.Panel>
<Tab.Panel>
<div className="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate
aute id deserunt nisi.
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</Card>;
Accordion
Accordions are useful when you need to organize lots of information in a vertically limited space. The headers let the user scan through main subjects of the content, and choose which of the subjects they would like to examine in depth by clicking on it. It's very useful for FAQs and complex contact forms.
Accordion Example
js
import Accordion from "@/components/Accordion";
const items = [
{
title: "How does Dashcode work?",
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
{
title: "Where i can learn more about using Dashcode?",
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
{
title: "Why Dashcode is so important?",
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
];
const Example = () => {
return (
<Card title="Accordions">
<Accordion items={items} />
</Card>
);
};