Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.
alphaView sourceReka UI
vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionTrigger>
        What is @typlog/ui?
      </AccordionTrigger>
      <AccordionContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>
        What is Reka UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility, customization, and developer-friendly design.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>
        What is Radix UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

API Reference ​

AccordionRoot ​

PropDefaultType
indicatorIcon"chevron"
"none""chevron""plus"

An indicator icon on the left or right of the trigger.

indicatorSide"right"
"right""left"

The indicator icon's poistion, left or right.

orientation"vertical"
"vertical""horizontal"

The orientation of the accordion.

size"1"
"1""2""3"

Control the size of the accordion.

AccordionItem ​

PropDefaultType
value
–
string

A string identifier for the accordion item. If omitted, a unique value will be generated automatically.

AccordionTrigger ​

PropDefaultType
indicatorIcon"chevron"
"none""chevron""plus"

An indicator icon on the left or right of the trigger.

indicatorSide"right"
"right""left"

The indicator icon's poistion, left or right.

AccordionIndicator ​

PropDefaultType
variant"chevron"
"chevron""plus"

The indicator icon for the accordion trigger.

AccordionContent ​

Examples ​

Size ​

vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-8">
    <AccordionRoot size="1">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
    <AccordionRoot size="2">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
    <AccordionRoot size="3">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
  </div>
</template>

Indicator Side ​

Root ​

vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-8">
    <AccordionRoot indicator-side="left">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>

    <AccordionRoot indicator-side="right">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
  </div>
</template>

Trigger ​

vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionTrigger indicator-side="right">
        What is @typlog/ui?
      </AccordionTrigger>
      <AccordionContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger indicator-side="left">
        What is Reka UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility, customization, and developer-friendly design.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>
        What is Radix UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

Indicator Icon ​

Root ​

vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-8">
    <AccordionRoot indicator-icon="chevron">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>

    <AccordionRoot indicator-icon="plus">
      <AccordionItem>
        <AccordionTrigger>
          What is @typlog/ui?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            <code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
            consistent theming.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Reka UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
            customization, and developer-friendly design.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          What is Radix UI?
        </AccordionTrigger>
        <AccordionContent>
          <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
  </div>
</template>

Trigger ​

vue
<script setup lang="ts">
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@typlog/ui'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionTrigger indicator-icon="chevron">
        What is @typlog/ui?
      </AccordionTrigger>
      <AccordionContent>
        <p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger indicator-icon="plus">
        What is Reka UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility, customization, and developer-friendly design.</p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>
        What is Radix UI?
      </AccordionTrigger>
      <AccordionContent>
        <p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>