Tile UI React
Source code

Components

Collapsible

An accessible collapsible content container.

Use Collapsible to toggle extra content without a dialog.

This content is hidden until you expand it.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@tile-ui/react';

export default function CollapsibleDemo() {
	return (
		<Collapsible>
			<CollapsibleTrigger className="component-preview__action">Toggle details</CollapsibleTrigger>

Registry install

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

Package usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@tile-ui/react';
 
<Collapsible>
	<CollapsibleTrigger>Details</CollapsibleTrigger>
	<CollapsibleContent>Extra content here.</CollapsibleContent>
</Collapsible>

Highlights

  • Open and defaultOpen states
  • Trigger and content
  • Disabled state

Registry dependencies

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

API reference

Collapsible

PropTypeDefault
openboolean—
defaultOpenboolean—
disabledboolean—

CollapsibleTrigger

No custom props.

CollapsibleContent

No custom props.

PreviousCheckboxNextCombobox