Skip to main content

Starwind UI v1.3.1 is now available! Get started

On this page

Accordion

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

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

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

Installation

Usage

multiple

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

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

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

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

defaultValue

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

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

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

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

API Reference

Accordion

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

  • 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.
PropTypeDefault
type"single" | "multiple""single"
defaultValuestringundefined

The component also accepts all standard HTML attributes for <div> elements.

AccordionItem

The container for each individual accordion item. The value prop is a unique identifier for the accordion item and is used to track the item’s open/closed state.

PropTypeDefault
valuestringRequired

The component also accepts all standard HTML attributes for <div> elements.

AccordionTrigger

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

This component accepts all standard HTML attributes for <button> elements.

AccordionContent

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

This component accepts all standard HTML attributes for <div> elements.

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.

src/styles/starwind.css
/* Tailwind CSS v4 theme definition */
@theme {
  --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.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.