DISCLOSURE · COMPONENT
Accordion
Keep helpful detail within reach, one question at a time.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
return <div style={{ width: "min(100%, 580px)" }}><Accordion defaultValue={["start"]} multiple={state === "multiple"} type={state === "nested" ? "nested" : "default"}>
<AccordionItem value="start"><AccordionTrigger>Where should I start?</AccordionTrigger><AccordionContent>Choose a component, copy its example, and adapt it to your project. Import the Rayden stylesheet once.</AccordionContent></AccordionItem>
<AccordionItem value="theme"><AccordionTrigger>Can I change the theme?</AccordionTrigger><AccordionContent>Rayden supports light and dark themes. Use the preview theme control to compare them.</AccordionContent></AccordionItem>
<AccordionItem value="blocks"><AccordionTrigger>What makes a block different?</AccordionTrigger><AccordionContent>A block combines smaller components into a complete interface pattern. The blocks in this release are experimental.</AccordionContent></AccordionItem>
</Accordion></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
Accordion primitives organise related questions into expandable sections. This example compares a single open section, multiple open sections and a nested appearance.
Try it
Open the theme question, then compare the multiple and nested states. Use the keyboard to activate each heading.