Accordion
Installation
npx shadcn@latest add https://ui.timkit.cn/r/accordion.json
Usage
import { Accordion } from "@/components/ui/accordion"
Examples
Accordion · With chevron
Loading preview...
Accordion · With plus-minus
Loading preview...
Accordion · With left chevron
Loading preview...
Accordion · With left plus-minus
Loading preview...
Accordion · With icon and chevron
Loading preview...
Accordion · With icon and plus-minus
Loading preview...
Accordion · With sub-header and chevron
Loading preview...
Accordion · With sub-header and plus-minus
Loading preview...
Accordion · With icon, sub-header, and chevron
Loading preview...
Accordion · With icon, sub-header, and plus-minus
Loading preview...
Accordion · Tabs w/ chevron
Loading preview...
Accordion · Tabs w/ plus-minus
Loading preview...
Accordion · Tabs w/ left chevron
Loading preview...
Accordion · Tabs w/ left plus-minus
Loading preview...
Accordion · Table w/ chevron
Loading preview...
Accordion · Table w/ plus-minus
Loading preview...
Accordion · Table w/ left chevron
Loading preview...
Accordion · Table w/ left plus-minus
Loading preview...
Accordion · Multi-level
Loading preview...
Accordion · Multi-level w/ icon
Loading preview...
Structured API
Component
accordion
Logic
zag / accordion
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | accordion | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | enum (single | multiple) | single | The selection mode of the accordion. |
| collapsible | boolean | false | Whether a single accordion item can be collapsed after it has been opened. |
| value | string | - | The controlled value of the accordion items to expand. |
| disabled | boolean | false | Whether the accordion is disabled. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Event handler called when the value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The accordion items |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The accordion container |
| item | part | - | An accordion item |
| trigger | part | - | The toggle button for an item |
| content | part | - | The collapsible content section |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Accordion · With chevron
- Accordion · With plus-minus
- Accordion · With left chevron
- Accordion · With left plus-minus
- Accordion · With icon and chevron
- Accordion · With icon and plus-minus
- Accordion · With sub-header and chevron
- Accordion · With sub-header and plus-minus
- Accordion · With icon, sub-header, and chevron
- Accordion · With icon, sub-header, and plus-minus
- Accordion · Tabs w/ chevron
- Accordion · Tabs w/ plus-minus
- Accordion · Tabs w/ left chevron
- Accordion · Tabs w/ left plus-minus
- Accordion · Table w/ chevron
- Accordion · Table w/ plus-minus
- Accordion · Table w/ left chevron
- Accordion · Table w/ left plus-minus
- Accordion · Multi-level
- Accordion · Multi-level w/ icon
- API Reference
Accordion
Installation
npx shadcn@latest add https://ui.timkit.cn/r/accordion.json
Usage
import { Accordion } from "@/components/ui/accordion"
Examples
Accordion · With chevron
Loading preview...
Accordion · With plus-minus
Loading preview...
Accordion · With left chevron
Loading preview...
Accordion · With left plus-minus
Loading preview...
Accordion · With icon and chevron
Loading preview...
Accordion · With icon and plus-minus
Loading preview...
Accordion · With sub-header and chevron
Loading preview...
Accordion · With sub-header and plus-minus
Loading preview...
Accordion · With icon, sub-header, and chevron
Loading preview...
Accordion · With icon, sub-header, and plus-minus
Loading preview...
Accordion · Tabs w/ chevron
Loading preview...
Accordion · Tabs w/ plus-minus
Loading preview...
Accordion · Tabs w/ left chevron
Loading preview...
Accordion · Tabs w/ left plus-minus
Loading preview...
Accordion · Table w/ chevron
Loading preview...
Accordion · Table w/ plus-minus
Loading preview...
Accordion · Table w/ left chevron
Loading preview...
Accordion · Table w/ left plus-minus
Loading preview...
Accordion · Multi-level
Loading preview...
Accordion · Multi-level w/ icon
Loading preview...
Structured API
Component
accordion
Logic
zag / accordion
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | accordion | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | enum (single | multiple) | single | The selection mode of the accordion. |
| collapsible | boolean | false | Whether a single accordion item can be collapsed after it has been opened. |
| value | string | - | The controlled value of the accordion items to expand. |
| disabled | boolean | false | Whether the accordion is disabled. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Event handler called when the value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The accordion items |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The accordion container |
| item | part | - | An accordion item |
| trigger | part | - | The toggle button for an item |
| content | part | - | The collapsible content section |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Accordion · With chevron
- Accordion · With plus-minus
- Accordion · With left chevron
- Accordion · With left plus-minus
- Accordion · With icon and chevron
- Accordion · With icon and plus-minus
- Accordion · With sub-header and chevron
- Accordion · With sub-header and plus-minus
- Accordion · With icon, sub-header, and chevron
- Accordion · With icon, sub-header, and plus-minus
- Accordion · Tabs w/ chevron
- Accordion · Tabs w/ plus-minus
- Accordion · Tabs w/ left chevron
- Accordion · Tabs w/ left plus-minus
- Accordion · Table w/ chevron
- Accordion · Table w/ plus-minus
- Accordion · Table w/ left chevron
- Accordion · Table w/ left plus-minus
- Accordion · Multi-level
- Accordion · Multi-level w/ icon
- API Reference