Accordion

Use Accordion to present collapsible sections.

Content one.

Content two.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tile-ui/vue';
 
export default function AccordionDemo() {
	return (
		<Accordion type="single" collapsible defaultValue="one">
			<AccordionItem value="one">

Registry install

pnpm dlx shadcn@latest add @tile-ui/accordion

Package usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tile-ui/vue';
 
<Accordion type="single" collapsible>
	<AccordionItem value="one">
		<AccordionTrigger>Section one</AccordionTrigger>
		<AccordionContent>Content one.</AccordionContent>
	</AccordionItem>
</Accordion>

Highlights

Single and multiple modes
Collapsible mode
Item and content

Registry dependencies

Item	Purpose
`accordion`	Component source and module styles
`core`	Framework-agnostic logic helpers
`styles`	Shared SCSS tokens and globals

API reference

Prop	Type	Default
`type`	`'single' \| 'multiple'`	—
`value`	`string \| string[]`	—
`defaultValue`	`string \| string[]`	—
`onValueChange`	`(value: string \| string[]) => void`	—
`collapsible`	`boolean`	—

AccordionItem

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	—

AccordionTrigger

No custom props.

AccordionContent

No custom props.