Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/redpanda-ui/accordion';
<Accordion type="single" collapsible>  <AccordionItem value="item-1">    <AccordionTrigger>What is Redpanda?</AccordionTrigger>    <AccordionContent>      Redpanda is a streaming data platform that is Kafka-compatible but simpler to operate and 10x faster.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-2">    <AccordionTrigger>How does it work?</AccordionTrigger>    <AccordionContent>      Redpanda is built from the ground up in C++ and designed to be simple, powerful, and cost-efficient.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-3">    <AccordionTrigger>Is it production ready?</AccordionTrigger>    <AccordionContent>Yes, Redpanda is production-ready and used by hundreds of companies worldwide.</AccordionContent>  </AccordionItem></Accordion>;

<Accordion type="multiple">  <AccordionItem value="features">    <AccordionTrigger>Features</AccordionTrigger>    <AccordionContent>      <ul className="list-disc pl-6 space-y-1">        <li>Kafka API compatible</li>        <li>10x faster performance</li>        <li>Built-in schema registry</li>        <li>Tiered storage support</li>      </ul>    </AccordionContent>  </AccordionItem>  <AccordionItem value="pricing">    <AccordionTrigger>Pricing</AccordionTrigger>    <AccordionContent>      Redpanda offers both open source and cloud options with flexible pricing models.    </AccordionContent>  </AccordionItem></Accordion>

<Accordion type="single" collapsible>  <AccordionItem value="no-chevron">    <AccordionTrigger chevron={false}>No Chevron Icon</AccordionTrigger>    <AccordionContent>This accordion item doesn't display the chevron indicator.</AccordionContent>  </AccordionItem></Accordion>

<Accordion type="single" defaultValue="item-1" collapsible variant="contained" className="max-w-[500px] w-full">  <AccordionItem value="item-1">    <AccordionTrigger>What is Redpanda UI?</AccordionTrigger>    <AccordionContent>      Redpanda UI is an open-source distribution of React components built with TypeScript and Tailwind CSS.    </AccordionContent>  </AccordionItem>
  <AccordionItem value="item-2">    <AccordionTrigger>How is it different from other libraries?</AccordionTrigger>    <AccordionContent>      Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify      or customize them as needed.    </AccordionContent>  </AccordionItem>
  <AccordionItem value="item-3">    <AccordionTrigger>Is Redpanda UI free to use?</AccordionTrigger>    <AccordionContent>      Absolutely! Redpanda UI is fully open-source. You can use, modify, and adapt it to fit your needs.    </AccordionContent>  </AccordionItem></Accordion>

import { Circle, FileText, Settings } from 'lucide-react';import { Badge } from '@/components/badge';
<Accordion type="single" defaultValue="item-1" collapsible variant="contained" className="max-w-[500px] w-full">  <AccordionItem value="item-1">    <AccordionTrigger start={<Circle className="size-4 text-subtle" />} end={<Badge tone="success">Available</Badge>}>      Accordion heading    </AccordionTrigger>    <AccordionContent>      This is the accordion content that provides additional details when the accordion is expanded.    </AccordionContent>  </AccordionItem>
  <AccordionItem value="item-2">    <AccordionTrigger      start={<FileText className="size-4 text-subtle" />}      end={        <Badge tone="default" variant="subtle">          In preview        </Badge>      }    >      Accordion heading    </AccordionTrigger>    <AccordionContent>      This is the accordion content that provides additional details when the accordion is expanded.    </AccordionContent>  </AccordionItem>
  <AccordionItem value="item-3">    <AccordionTrigger start={<Settings className="size-4 text-subtle" />} end={<Badge tone="success">Available</Badge>}>      Accordion heading    </AccordionTrigger>    <AccordionContent>      This is the accordion content that provides additional details when the accordion is expanded.    </AccordionContent>  </AccordionItem></Accordion>;

Accordion Container┌─────────────────────────────────────────────────┐│ AccordionItem (value="item-1")                  ││ ┌─────────────────────────────────────────────┐ ││ │ AccordionHeader                             │ ││ │ ┌─────────────────────────────────────────┐ │ ││ │ │ AccordionTrigger (clickable)            │ │ ││ │ │ [Text Content] [ChevronDown Icon] ────┐ │ │ ││ │ └─────────────────────────────────────────┘ │ │ ││ └─────────────────────────────────────────────┘ │ ││ ┌─────────────────────────────────────────────┐ │ ││ │ AccordionContent (animated)                 │ │ ││ │ [Expandable content with CSS height transition] │ │ ││ └─────────────────────────────────────────────┘ │ │├─────────────────────────────────────────────────┤ ││ AccordionItem (value="item-2")                  │ ││ [Similar structure repeats...]                  │ │└─────────────────────────────────────────────────┘ │                                                    │Context Flow:                                       │AccordionItemContext ──────────────────────────────┘├── isOpen: boolean└── setIsOpen: (open: boolean) => void

function AccordionContent({ className, children, ...props }: AccordionContentProps) {  const { variant } = useAccordionItem();
  return (    <AccordionPrimitive.Panel      className="h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"      data-slot="accordion-content"      keepMounted      {...props}    >      <div className={cn(accordionContentVariants({ variant }), className)}>{children}</div>    </AccordionPrimitive.Panel>  );}