Loading...
Installation
Usage
import HybridTabs from "@/components/ruixen/hybrid-tabs";
import { Home, Search, Bell, User, Settings } from "lucide-react";
const tabItems = [
{ value: "home", icon: Home, label: "Home", content: "Welcome Home!" },
{
value: "search",
icon: Search,
label: "Search",
content: "Find what you need.",
},
{
value: "notifications",
icon: Bell,
label: "Alerts",
content: "You have no new notifications.",
},
{
value: "profile",
icon: User,
label: "Profile",
content: "Your profile info here.",
},
{
value: "settings",
icon: Settings,
label: "Settings",
content: "Adjust your preferences.",
},
];
export default function App() {
return <HybridTabs items={tabItems} defaultValue="home" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | HybridTabItem[] | Default items | Array of tab items with icons |
defaultValue | string | "home" | Default active tab value |
className | string | "" | Additional CSS classes |
Features
- Icon-First Design: Shows icons by default for compact layout
- Expandable Labels: Labels appear only for active tabs
- Smooth Transitions: Width and opacity animations for labels
- Glassmorphism: Backdrop blur effect on tab container
Types
interface HybridTabItem {
value: string;
icon: React.ElementType;
label: string;
content?: React.ReactNode;
}