A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab.
Features
Example Use Cases
import { Bell, Home, HelpCircle, Settings, Shield, Mail, User, FileText, Lock } from "lucide-react";
import { ExpandableTabs } from "@/components/ui/expandable-tabs";
function DefaultDemo() {
const tabs = [
{ title: "Dashboard", icon: Home },
{ title: "Notifications", icon: Bell },
{ type: "separator" },
{ title: "Settings", icon: Settings },
{ title: "Support", icon: HelpCircle },
{ title: "Security", icon: Shield },
];
return (
<div className="flex flex-col gap-4">
<ExpandableTabs tabs={tabs} />
</div>
);
}
function CustomColorDemo() {
const tabs = [
{ title: "Profile", icon: User },
{ title: "Messages", icon: Mail },
{ type: "separator" },
{ title: "Documents", icon: FileText },
{ title: "Privacy", icon: Lock },
];
return (
<div className="flex flex-col gap-4">
<ExpandableTabs
tabs={tabs}
activeColor="text-blue-500"
className="border-blue-200 dark:border-blue-800"
/>
</div>
);
}
export { DefaultDemo, CustomColorDemo };