Collapsible

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download collapsible -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Collapsible } from "@/components/ui/collapsible";
import { CollapsibleTrigger } from "@/components/ui/collapsible";
import { CollapsibleContent } from "@/components/ui/collapsible";
import { reactive } from "vue";

const args = reactive(
  {
    "open": false,
    "disabled": false,
  } satisfies Partial<
    InstanceType<typeof Collapsible> extends { $props: infer Props }
      ? Props
      : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <Collapsible v-model:open="args.open" :disabled="args.disabled"
    ><CollapsibleTrigger>Show details</CollapsibleTrigger
    ><CollapsibleContent
      >Details are available here.</CollapsibleContent
    ></Collapsible
  >
</template>

Examples

Default

<script setup lang="ts">
import { iconSet } from "@frontfriend/sdk";
import { Collapsible } from "@/components/ui/collapsible";
import { CollapsibleTrigger } from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { CollapsibleContent } from "@/components/ui/collapsible";

const triggerIcon = (iconSet as any)?.collapsible?.trigger ?? "ChevronDown";

const args = {

} satisfies Partial<
  InstanceType<typeof Collapsible> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Collapsible class="w-[350px] space-y-2"
    ><div class="flex items-center justify-between space-x-4 px-4">
      <h4 class="text-sm font-semibold">Countries</h4>
      <CollapsibleTrigger as-child
        ><Button variant="ghostmain" size="sm"
          ><Icon :name="triggerIcon" /></Button
      ></CollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
      Italy
    </div>
    <CollapsibleContent class="space-y-2"
      ><div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        USA
      </div>
      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        UK
      </div></CollapsibleContent
    ></Collapsible
  >
</template>

Open

<script setup lang="ts">
import { iconSet } from "@frontfriend/sdk";
import { Collapsible } from "@/components/ui/collapsible";
import { CollapsibleTrigger } from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { CollapsibleContent } from "@/components/ui/collapsible";

const triggerIcon = (iconSet as any)?.collapsible?.trigger ?? "ChevronDown";

const args = {

} satisfies Partial<
  InstanceType<typeof Collapsible> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Collapsible default-open class="w-[350px] space-y-2"
    ><div class="flex items-center justify-between space-x-4 px-4">
      <h4 class="text-sm font-semibold">Countries</h4>
      <CollapsibleTrigger as-child
        ><Button variant="ghostmain" size="sm"
          ><Icon :name="triggerIcon" /></Button
      ></CollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
      Italy
    </div>
    <CollapsibleContent class="space-y-2"
      ><div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        USA
      </div>
      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        UK
      </div></CollapsibleContent
    ></Collapsible
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

This component adds no props of its own to Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.