Collapsible

A component that toggles the visibility of a content panel on user interaction.
alphaView 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
–
"1""2""3""4"
variant
–
"soft""surface""ghost"

CollapsibleTrigger ​

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

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>