Collapsible

An interactive component which expands/collapses a panel. Based on Radix Vue.

Component Features

🛠️ Fully Configurable: Easily control the expanded and collapsed states.
📐 Multiple Sizes: Supports all standard sizes (xs, sm, md, lg, xl, 2xl, default).
🎨 Customizable: Replace the default icon or customize the trigger easily.
⌨️ Accessible: Full keyboard support and screen reader accessible out of the box.
🎭 Theme Customization: Fully supports global theme configuration via BrConfigProvider.

Basic Usage

The most basic collapsible usage.

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible v-model:open="isOpen">
      <BrCollapsibleTrigger>
        Can I use this in my project?
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        Yes. Free to use for personal and commercial projects. No attribution
        required.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

Sizes

You can change the size of the collapsible component using the size prop. It supports all sizes from the global configuration (xs, sm, md, lg, xl, 2xl, default).

<script setup lang="ts">
</script>

<template>
  <div class="flex flex-col gap-4 w-full max-w-[400px]">
    <BrCollapsible size="sm">
      <BrCollapsibleTrigger>
        Small Size
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a small size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>

    <BrCollapsible size="md">
      <BrCollapsibleTrigger>
        Medium Size (Default)
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a medium size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>

    <BrCollapsible size="lg">
      <BrCollapsibleTrigger>
        Large Size
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a large size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

Custom Icon

Use the icon slot on BrCollapsibleTrigger to customize the expand/collapse icon.

<script setup lang="ts">
import { ArrowDown } from 'lucide-vue-next'
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible>
      <BrCollapsibleTrigger>
        Custom Icon
        <template #icon>
          <ArrowDown class="h-4 w-4 shrink-0 transition-transform duration-300" />
        </template>
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        You can customize the icon using the icon slot in BrCollapsibleTrigger.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

Disabled

Use the disabled prop to prevent the user from interacting with the collapsible.

<script setup lang="ts">
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible disabled>
      <BrCollapsibleTrigger>
        Disabled Collapsible
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This content cannot be expanded because the component is disabled.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component.

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrConfigProvider
      :theme="{
        cssVars: {
          light: {
            '--br-radius': '1rem',
            '--br-primary': '262.1 83.3% 57.8%',
            '--br-border': '262.1 83.3% 80%',
            '--br-muted': '262.1 83.3% 95%',
          },
          dark: {
            '--br-radius': '1rem',
            '--br-primary': '262.1 83.3% 57.8%',
            '--br-border': '262.1 83.3% 30%',
            '--br-muted': '262.1 83.3% 20%',
          }
        }
      }"
    >
      <BrCollapsible v-model:open="isOpen" class="border-2 border-primary/20 shadow-md">
        <BrCollapsibleTrigger class="hover:bg-primary/10 data-[state=open]:bg-primary/5">
          <span class="text-primary font-bold">Themed Collapsible</span>
        </BrCollapsibleTrigger>
        <BrCollapsibleContent class="bg-primary/5 border-t-primary/20">
          This collapsible uses a custom theme provided by BrConfigProvider, 
          along with some specific Tailwind classes to match the theme.
        </BrCollapsibleContent>
      </BrCollapsible>
    </BrConfigProvider>
  </div>
</template>

API Reference

BrCollapsible

Prop	Type	Default	Description
open (v-model)	`boolean`	-	The controlled open state of the collapsible
defaultOpen	`boolean`	`false`	The default open state when initially rendered
disabled	`boolean`	`false`	Whether the collapsible is disabled
size	`'default' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'default'`	The size of the collapsible
lazyRender	`boolean`	`true`	Whether to defer rendering the content until opened

BrCollapsibleTrigger

Prop	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child
hideIcon	`boolean`	`false`	Hide the default chevron icon

BrCollapsibleContent

Prop	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child
forceMount	`boolean`	-	Used to force mounting when more control is needed

#Collapsible

#Component Features

#Basic Usage

#Sizes

#Custom Icon

#Disabled

#Theme Customization

#API Reference

#BrCollapsible

#BrCollapsibleTrigger

#BrCollapsibleContent