Command Palette

Search for a command to run...

Docs
Badge Accordion

Badge Accordion

An accordion with optional badges on items for highlighting new, important, or beta content.

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

PropTypeDefaultDescription
itemsAccordionBadgeItem[]-Array of accordion items
defaultValuestring-ID of the initially open item
classNamestring-Additional CSS classes

Badge Variants

VariantDescription
defaultPrimary colored badge
secondaryMuted/secondary badge
destructiveRed/warning badge
outlineOutlined badge