Tile UI Vue
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/vue';
 
export default function CollapsibleDemo() {
	return (
		<Collapsible>
			<CollapsibleTrigger class="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/vue';
 
<Collapsible>
	<CollapsibleTrigger>Details</CollapsibleTrigger>
	<CollapsibleContent>Extra content here.</CollapsibleContent>
</Collapsible>

Highlights

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

Registry dependencies

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

API reference

Collapsible

Prop Type Default
open boolean —
defaultOpen boolean —
disabled boolean —

CollapsibleTrigger

No custom props.

CollapsibleContent

No custom props.

PreviousCheckboxNextCombobox