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.

API Reference

Accordion

Prop	Type	Default	Description
`defaultValue`	string	—	Value of the item that should be open by default
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Accordion sub-components (Item, Trigger, Content)

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	}