Accordion

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/accordion.json

Usage

<script lang="ts">
  import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>

<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

API Reference

Accordion.Root

The root component owns single or multiple selection. Use value and bind:value for controlled state, or defaultValue for the initial uncontrolled value.

Accordion.Item

An individual accordion item. Each item needs a unique value and keeps the COSS bottom border.

Accordion.Header

The heading wrapper for an item trigger.

Accordion.Trigger

The button that toggles its panel. It includes the COSS chevron, which rotates when the item opens.

Accordion.Panel

The collapsible content panel. It uses the Shards accordion measurements and transition state while keeping the COSS height animation. Accordion.Content is an alias.

See the Shards Accordion API for primitive state, keyboard, and accessibility props.

Examples

Single Accordion

Multiple Accordion

Controlled Accordion