Installation
Usage
import AccordionBadge from "@/components/ruixen/accordion-badge";
const items = [
{
id: "1",
title: "New Feature: Dark Mode",
badge: "New",
badgeVariant: "default",
content: "We've added a beautiful dark mode.",
},
{
id: "2",
title: "API Rate Limits",
badge: "Important",
badgeVariant: "destructive",
content: "Free tier users are limited to 100 API calls per minute.",
},
];
export default function MyAccordion() {
return <AccordionBadge items={items} defaultValue="1" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionBadgeItem[] | - | Array of accordion items |
defaultValue | string | - | ID of the initially open item |
className | string | - | Additional CSS classes |
Badge Variants
| Variant | Description |
|---|---|
default | Primary colored badge |
secondary | Muted/secondary badge |
destructive | Red/warning badge |
outline | Outlined badge |

