Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

Toggle

@radix-ui/primitives

Installation

npm

npx @galaxy-stack/nebula-cli@latest add collapsible

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add collapsible

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add collapsible

bun

bunx @galaxy-stack/nebula-cli@latest add collapsible

global

# If you have installed galaxy-design globally
galaxy-design add collapsible

Usage

API Reference

Props

Prop	Type	Default	Description	Frameworks
open	boolean	undefined	Controlled open state	All
defaultOpen	boolean	false	Initial open state	All
onOpenChange	(open: boolean) => void	-	Called when open state changes	All
disabled	boolean	false	Disables the collapsible	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Subcomponents

CollapsibleTrigger

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
disabled	boolean	false	Disables the trigger	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

CollapsibleContent

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
forceMount	boolean	false	Force mount content	React, Vue
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Vue

<script setup lang="ts">
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <Collapsible v-model:open="isOpen">
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      Yes. Free to use for personal and commercial projects.
    </CollapsibleContent>
  </Collapsible>
</template>

React

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui'

export default function CollapsibleDemo() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. Free to use for personal and commercial projects.
      </CollapsibleContent>
    </Collapsible>
  )
}

Angular

import { Component } from '@angular/core';
import {
  CollapsibleComponent,
  CollapsibleTriggerComponent,
  CollapsibleContentComponent
} from '@/components/ui';

@Component({
  selector: 'app-collapsible-demo',
  standalone: true,
  imports: [CollapsibleComponent, CollapsibleTriggerComponent, CollapsibleContentComponent],
  template: `
    <ui-collapsible [open]="isOpen" (openChange)="isOpen = $event">
      <ui-collapsible-trigger (triggerClick)="isOpen = !isOpen">
        Can I use this in my project?
      </ui-collapsible-trigger>
      <ui-collapsible-content [isOpen]="isOpen">
        Yes. Free to use for personal and commercial projects.
      </ui-collapsible-content>
    </ui-collapsible>
  `
})
export class CollapsibleDemoComponent {
  isOpen = false;
}

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)