Accordion

Imports

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

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@line/abc-def-react/accordion";

<script setup lang="ts">
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@line/abc-def-vue/accordion";
</script>

Shadcn references

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

Basic usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@line/abc-def-react/accordion";

export function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>Design tokens</AccordionTrigger>
        <AccordionContent>Component styles resolve through CSS variables.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@line/abc-def-vue/accordion";
</script>

<template>
  <Accordion type="single" collapsible default-value="item-1">
    <AccordionItem value="item-1">
      <AccordionTrigger>Design tokens</AccordionTrigger>
      <AccordionContent>
        Component styles resolve through CSS variables.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

Component tokens

Composition exports

Usage notes

• Use one item per topic.
• Use `type="multiple"` when more than one section can stay open.
• Related component tokens use the `accordion` token group in `@line/abc-def-styles/css`.