9.7k

Accordion

PreviousNext

A vertically stacked set of interactive headings that each reveal a section of content.

Docs API Reference

  • Webdevelop base primitives with project-ready defaults and consistent spacing. 

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VAccordion,
  VAccordionContent,
  VAccordionItem,
  VAccordionTrigger,
} from '@ui-kit/src/components/Base/VAccordion'
</script>

<template>
  <div class="w-full max-w-xl">
    <VAccordion
      type="single"
      collapsible
      default-value="overview"
      class="w-full"
    >
      <VAccordionItem value="overview">
        <VAccordionTrigger>
          What is included?
        </VAccordionTrigger>
        <VAccordionContent>
          <p>
            Webdevelop base primitives with project-ready defaults and consistent spacing.
          </p>
        </VAccordionContent>
      </VAccordionItem>
      <VAccordionItem value="usage">
        <VAccordionTrigger>
          How do we use it?
        </VAccordionTrigger>
        <VAccordionContent>
          <p>
            Compose the primitive with your product markup and keep styling close to the design system.
          </p>
        </VAccordionContent>
      </VAccordionItem>
      <VAccordionItem value="support">
        <VAccordionTrigger>
          Is it customizable?
        </VAccordionTrigger>
        <VAccordionContent>
          <p>
            Yes. These wrappers are intentionally small so the product layer can keep ownership of the UI.
          </p>
        </VAccordionContent>
      </VAccordionItem>
    </VAccordion>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add accordion

Usage

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
</script>

<template>
  <Accordion type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
ComponentsAlert