Loading...
Installation
Usage
import BadgeTabs from "@/components/ruixen/badge-tabs";
const tabItems = [
{
value: "messages",
label: "Messages",
badge: 5,
content: "You have 5 new messages.",
},
{
value: "tasks",
label: "Tasks",
badge: 12,
content: "12 tasks pending review.",
},
{
value: "alerts",
label: "Alerts",
badge: 3,
content: "3 new system alerts.",
},
];
export default function App() {
return <BadgeTabs items={tabItems} defaultValue="messages" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BadgeTabItem[] | Default items | Array of tab items with badges |
defaultValue | string | First item | Default active tab value |
className | string | "" | Additional CSS classes |
Features
- Animated Badges: Badges scale in/out with smooth animations
- Active Pill: Moving background pill follows active tab
- Hover Effects: Scale animation on hover
- Badge Counts: Display numeric badges for notifications
Types
interface BadgeTabItem {
value: string;
label: string;
badge?: number;
content?: React.ReactNode;
}