On this page

Accordion

What is Astro?

Astro is an web framework for building fast, scalable, and secure websites.

Why should I use Astro?

Astro provides a set of features that make it an ideal choice for building fast, scalable, and secure websites.

How do I get started with Astro?

To get started with Astro, follow the instructions in the documentation.

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Installation

pnpx starwind@latest add accordion

npx starwind@latest add accordion

yarn dlx starwind@latest add accordion

Usage

multiple

Use type="multiple" to allow multiple accordion items to be open at the same time.

What is Astro?

Astro is an web framework for building fast, scalable, and secure websites.

Why should I use Astro?

Astro provides a set of features that make it an ideal choice for building fast, scalable, and secure websites.

How do I get started with Astro?

To get started with Astro, follow the instructions in the documentation.

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion type="multiple" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

defaultValue

Use the defaultValue prop to set the default open item. If the prop is not provided, no items will be open by default.

What is Astro?

Astro is an web framework for building fast, scalable, and secure websites.

Why should I use Astro?

Astro provides a set of features that make it an ideal choice for building fast, scalable, and secure websites.

How do I get started with Astro?

To get started with Astro, follow the instructions in the documentation.

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-3">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion

The root component that contains all accordion items. It manages the state of the accordion items and handles keyboard interactions.

Prop	Type	Default
`type`	`"single" \| "multiple"`	`"single"`
`defaultValue`	`string`	-
`class`	`string`	-

<Accordion type="single" defaultValue="item-1">
  <!-- AccordionItem components -->
</Accordion>

Additional Notes:

type: Determines whether only one or multiple accordion items can be open at once
defaultValue: The value of the item that should be open by default

AccordionItem

The container for each individual accordion item.

Prop	Type	Default
`value`	`string`	Required
`class`	`string`	-

<AccordionItem value="item-1">
  <!-- AccordionTrigger and AccordionContent -->
</AccordionItem>

Additional Notes:

value: A unique identifier for the accordion item

AccordionTrigger

The button that toggles the accordion item. Clicking this component will expand or collapse the associated content.

Prop	Type	Default
`class`	`string`	-

<AccordionTrigger>What is Astro?</AccordionTrigger>

AccordionContent

The content to be revealed when the accordion item is expanded.

Prop	Type	Default
`class`	`string`	-

<AccordionContent>
  Astro is a web framework for building fast, scalable, and secure websites.
</AccordionContent>

Animation

This component requires an animation to function properly. It is automatically included when initializing a project with Starwind, but in case you have removed it, you can find the required code below.

/* Tailwind CSS v4 theme definition */
@theme inline {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--starwind-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--starwind-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

Changelog

v1.3.2

add named slot “icon” to AccordionTrigger to enable easy icon swapping

v1.3.1

simplified default styling to enable easier custom styling

v1.3.0

style and focus state updates

v1.2.0

Add a data-slot attribute to all components to enable global styling updates

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the class prop.