Accordion

Collapsible content sections with dot notation and smooth CSS animation.

Preview

A component library for modern web apps.

Run npx drivn@latest create to get started.

Installation

npx drivn add accordion

Usage

1 import { Accordion } from "@/components/ui/accordion"
2 
3 export default function Page() {
4   return (
5     <Accordion>
6       <Accordion.Item value="item-1">
7         <Accordion.Trigger>
8           What is Drivn?
9         </Accordion.Trigger>
10         <Accordion.Content>
11           A component library for modern web apps.
12         </Accordion.Content>
13       </Accordion.Item>
14       <Accordion.Item value="item-2">
15         <Accordion.Trigger>
16           How do I install it?
17         </Accordion.Trigger>
18         <Accordion.Content>
19           Run npx drivn@latest create to get started.
20         </Accordion.Content>
21       </Accordion.Item>
22     </Accordion>
23   )
24 }

Default Open

Open a specific item by default.

Install the package and run the init command.

Customize your drivn.config.json to match your project.

Multiple

Allow multiple items to be open at the same time.

19 accessible components with dot notation API.

Install any component with npx drivn add.

HSL color tokens with dark and light mode.

API Reference

Accordion

Prop	Type	Default	Description
`defaultValue`	string \| string[]	—	Item(s) open by default. String for single, array for multiple.
`multiple`	boolean	false	Allow multiple items to be open simultaneously.
`className`	string	—	Additional CSS classes to apply.
`children`	ReactNode	—	Accordion.Item sub-components.

Accordion.Item

Prop	Type	Default	Description
`value`	string	—	Unique value identifying this accordion item.
`children`	ReactNode	—	Trigger and Content sub-components.

Accordion.Trigger

Prop	Type	Default	Description
`children`	ReactNode	—	Trigger label content.
`className`	string	—	Additional CSS classes to apply.

Accordion.Content

Prop	Type	Default	Description
`children`	ReactNode	—	Expandable content.
`className`	string	—	Additional CSS classes to apply.

1	import { Accordion } from "@/components/ui/accordion"
2
3	export default function Page() {
4	return (
5	<Accordion>
6	<Accordion.Item value="item-1">
7	<Accordion.Trigger>
8	What is Drivn?
9	</Accordion.Trigger>
10	<Accordion.Content>
11	A component library for modern web apps.
12	</Accordion.Content>
13	</Accordion.Item>
14	<Accordion.Item value="item-2">
15	<Accordion.Trigger>
16	How do I install it?
17	</Accordion.Trigger>
18	<Accordion.Content>
19	Run npx drivn@latest create to get started.
20	</Accordion.Content>
21	</Accordion.Item>
22	</Accordion>
23	)
24	}