components

Accordion

Expand and collapse sections for organized content

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>

Examples

Open Variant

Table Variant

Box Variant

Disabled Variant

Plus/Minus Indicator

Accordion with Icons

Custom Accordion - Nested Accordion

Custom Accordion - w/Chevron on left

Application components such as User Authentication, Navigation Bars, Application Settings, and many more.

Custom Accordion - w/Avatar

Jasper is responsible for managing the infrastructure, network security, and data integrity of the platform.

Custom Accordion - w/Dotted line

  1. 1Choose platform matching your audience.
  2. 2Set a daily budget and campaign duration.
  3. 3Upload creative assets and write ad copy.
  4. 4Monitor click-through rates and adjust.

Custom Accordion - w/ Icon, sub-header and chevron

Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.

Props

<Accordion>
NameDefaultValues
variantboxboxtableopen
disabledfalseboolean
indicatorchevronchevronplus-minus
External Reference--
<AccordionItem>
NameDefaultValues
External Reference--
<AccordionTrigger>
NameDefaultValues
External Reference--
<AccordionContent>
NameDefaultValues
External Reference--