Components
Loading preview...
A set of collapsible panels with headings, built with Base UI components.
npx shadcn@latest add https://21st.dev/r/sean0205/base-accordionimport {
Accordion,
AccordionHeader,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from '@/components/ui/base-accordion';
export default function Component() {
return (
<div className="flex w-full h-screen justify-center items-center p-10">
<Accordion openMultiple={false} className="w-full lg:w-[75%]">
<AccordionItem value="reui-1">
<AccordionHeader>
<AccordionTrigger>What is ReUI?</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>ReUI provides ready-to-use CRUD examples for developers.</AccordionPanel>
</AccordionItem>
<AccordionItem value="reui-2">
<AccordionHeader>
<AccordionTrigger>Who benefits from ReUI?</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>Developers looking to save time with pre-built CRUD solutions.</AccordionPanel>
</AccordionItem>
<AccordionItem value="reui-3">
<AccordionHeader>
<AccordionTrigger>Why choose ReUI?</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>ReUI simplifies development with plug-and-play CRUDs.</AccordionPanel>
</AccordionItem>
</Accordion>
</div>
);
}