Collapsible

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@line/abc-def-react/collapsible";

<script setup lang="ts">
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@line/abc-def-vue/collapsible";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@line/abc-def-react/collapsible";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger asChild>
        <Button variant="ghost">Token details</Button>
      </CollapsibleTrigger>
      <CollapsibleContent>Semantic and component layers.</CollapsibleContent>
    </Collapsible>
  );
}

<script setup lang="ts">
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@line/abc-def-vue/collapsible";
</script>

<template>
  <Collapsible default-open>
    <CollapsibleTrigger>Token details</CollapsibleTrigger>
    <CollapsibleContent>
      Semantic and component layers.
    </CollapsibleContent>
  </Collapsible>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Use for optional details.
• Keep the trigger close to the content it controls.
• Related component tokens use the `collapsible` token group in `@line/abc-def-styles/css`.