UIPackage
Vue React

Collapsible

Vue disclosure
Edit on GitHub

Headless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/collapsible.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/collapsible

Examples

Dependencies

reka-ui

Used by

sidebar-02sidebar-03

Files (4)

  • app/components/ui/collapsible/Collapsible.vue 0.8 kB 
    <script setup lang="ts">
import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'

// CLAUDE.md mandate: bare `defineProps<RekaUiX>()` can bail under Vue 3.5+
// because reka-ui has no exports.types. The intersection form delegates
// type extraction to TS via the installed typescript package.
const props = defineProps<CollapsibleRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<CollapsibleRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <CollapsibleRoot v-slot="slotProps" data-uipkge data-slot="collapsible" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </CollapsibleRoot>
</template>
  • app/components/ui/collapsible/CollapsibleContent.vue 0.5 kB 
    <script setup lang="ts">
import type { CollapsibleContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleContent } from 'reka-ui'

// CLAUDE.md mandate: intersection form delegates type extraction to TS.
const props = defineProps<CollapsibleContentProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <CollapsibleContent data-uipkge data-slot="collapsible-content" v-bind="props">
    <slot />
  </CollapsibleContent>
</template>
  • app/components/ui/collapsible/CollapsibleTrigger.vue 0.5 kB 
    <script setup lang="ts">
import type { CollapsibleTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleTrigger } from 'reka-ui'

// CLAUDE.md mandate: intersection form delegates type extraction to TS.
const props = defineProps<CollapsibleTriggerProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <CollapsibleTrigger data-uipkge data-slot="collapsible-trigger" v-bind="props">
    <slot />
  </CollapsibleTrigger>
</template>
  • app/components/ui/collapsible/index.ts 0.2 kB 
    export { default as Collapsible } from './Collapsible.vue'
export { default as CollapsibleContent } from './CollapsibleContent.vue'
export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

Raw manifest: https://uipkge.dev/r/vue/collapsible.json