Collapsible

A component that toggles the visibility of a content panel on user interaction.
betaView sourceReka UI
vue
<script setup lang="ts">
import {
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <CollapsibleRoot>
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>
  </div>
</template>

API Reference ​

CollapsibleRoot ​

PropDefaultType
color
–
Color
radius
–
"none""small""medium""large""full"
size"2"
"1""2""3""4"
variant"ghost"
"ghost""soft""surface"

CollapsibleTrigger ​

PropDefaultType
indicator"right"
"left""none""right"

CollapsibleContent ​

Examples ​

Size ​

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

<template>
  <div class="flex flex-col gap-4">
    <CollapsibleRoot variant="soft" size="1">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="soft" size="2">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="soft" size="3">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>
  </div>
</template>

Variant ​

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

<template>
  <div class="flex flex-col gap-4">
    <CollapsibleRoot variant="ghost">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="soft">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="surface">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>
  </div>
</template>

Color ​

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

<template>
  <div class="flex flex-col gap-4">
    <CollapsibleRoot variant="soft" color="gray">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="soft" color="green">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>

    <CollapsibleRoot variant="soft" color="red">
      <CollapsibleTrigger>
        What is @typlog/ui?
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </CollapsibleContent>
    </CollapsibleRoot>
  </div>
</template>
Last updated Sep 15, 2026
AccordionPagination