collapsibleuiHeadless 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 ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/collapsible.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/collapsible.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/collapsible.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/collapsible.jsonnpx shadcn-vue@latest add @uipkge/collapsibleInstalls to:app/components/ui/collapsible/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
<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>
<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>
<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>
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
