Accordion

Expand and collapse sections for organized content

Source Code Radix UI

Radian OS is a high-quality design and development library aimed at building systems that scale quickly. It enables rapid transition from design to product in just a few hours.

Installation


pnpm dlx radianui@latest add accordion

Usage

Imports

/components/ui/accordion.tsx

import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion"

Code

/components/ui/accordion.tsx

<Accordion type="single" collapsible>
	<AccordionItem value="item-1">
		<AccordionTrigger>First Item</AccordionTrigger>
		<AccordionContent>
			<p>This is the content of the first accordion item.</p>
		</AccordionContent>
	</AccordionItem>
</Accordion>