Tile UI React
Source code

Components

Accordion

Collapsible accordion.

Use Accordion to present collapsible sections.

Content one.

Content two.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tile-ui/react';

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/react';
 
<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

ItemPurpose
accordionComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Accordion

PropTypeDefault
type'single' | 'multiple'—
valuestring | string[]—
defaultValuestring | string[]—
onValueChange(value: string | string[]) => void—
collapsibleboolean—

AccordionItem

PropTypeDefault
valuestring—
disabledboolean—

AccordionTrigger

No custom props.

AccordionContent

No custom props.

PreviousThemingNextAlert