Components
Loading preview...
The Badge Tabs component is a dynamic, interactive tab system that displays badges alongside each tab label, making it ideal for real-time dashboards, notifications, or admin panels. Each tab can show a number or alert, and badges can animate as they change, providing a clear visual cue of updates. Selecting a tab highlights it distinctly, while inactive tabs remain subdued, ensuring users always know which tab is active. The component supports rich content for each tab, allowing for detailed displays such as messages, tasks, or alerts, all within a compact and visually engaging interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/badge-tabsimport BadgeTabs, { BadgeTabItem } from "@/components/ui/badge-tabs";
const demoItems: BadgeTabItem[] = [
{
value: "messages",
label: "Messages",
badge: 5,
content: (
<div>
<h2 className="font-bold text-lg">Messages</h2>
<p>You have 5 new messages waiting for you.</p>
</div>
),
},
{
value: "tasks",
label: "Tasks",
badge: 12,
content: (
<div>
<h2 className="font-bold text-lg">Tasks</h2>
<p>There are 12 tasks pending your review.</p>
</div>
),
},
{
value: "alerts",
label: "Alerts",
badge: 3,
content: (
<div>
<h2 className="font-bold text-lg">Alerts</h2>
<p>You have 3 new system alerts.</p>
</div>
),
},
];
export default function DemoOne() {
return (
<BadgeTabs
items={demoItems}
defaultValue="tasks"
className="mt-10"
/>
);
}