Collapsible
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.
Installation
$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.jsonNamed registry:
npx shadcn-vue@latest add @uipkge/collapsibleInstalls to:app/components/ui/collapsible/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
npm dependencies
Used by
Files installed (4)
app/components/ui/collapsible/Collapsible.vue0.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.vue0.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.vue0.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.ts0.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