PaperAccordion

Disclosure pattern with editorial rhythm and yellow active marker.

↗ open what matters, collapse the rest.

Preview

Copy the file, export it, and ship.

No package required for core components.

Yes. CVA is inside every file.

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperAccordionItem {

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperAccordion/paperAccordion.tsx⎘
Step 2.Create the barrel:
components/ui/paperAccordion/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperAccordion'
```

Default

Answer text.

Prop	Type	Default	Description
`items`	`PaperAccordionItem[]`	`[]`	Disclosure entries rendered top to bottom.
`defaultValue`	`string`	`first item`	Initially opened item value.

Ideal for docs sections with concise Q&A.

Keyboard and screen-reader friendly semantics.

Yes, everything uses token classes.

<PaperAccordion items={[...]} />

Collapse changelog sections by version.

New table and tabs components.

Introduced dialog and accordion.

<PaperAccordion items={[...]} />