Components
Loading preview...
A collapsible panel that can be expanded or collapsed.
npx shadcn@latest add https://21st.dev/r/sean0205/outline-accordionimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
export default function DemoOne() {
return (
<div className="flex items-center justify-center w-full max-w-[600px]">
<Accordion type="single" variant="outline" defaultValue="reui-1" collapsible className="w-full lg:w-[75%]">
<AccordionItem value="reui-1">
<AccordionTrigger>What is ReUI?</AccordionTrigger>
<AccordionContent>ReUI provides ready-to-use CRUD examples for developers.</AccordionContent>
</AccordionItem>
<AccordionItem value="reui-2">
<AccordionTrigger>Who benefits from ReUI?</AccordionTrigger>
<AccordionContent>Developers looking to save time with pre-built CRUD solutions.</AccordionContent>
</AccordionItem>
<AccordionItem value="reui-3">
<AccordionTrigger>Why choose ReUI?</AccordionTrigger>
<AccordionContent>ReUI simplifies development with plug-and-play CRUDs.</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
}