Accordion

Vertically stacked set of interactive headings that reveal content panels. Built on Radix UI.

Installation

# Install @opencosmos/ui to use Accordion
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

type— Allow single or multiple items to be open at once

collapsible— Allow all items to be closed when type is "single"

Usage

Import

import { Accordion } from '@opencosmos/ui';

Example

<Accordion>
  Content
</Accordion>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
type	single \| multiple	"single"	Allow single or multiple items to be open at once
collapsible	boolean	false	Allow all items to be closed when type is "single"

Code Examples

Basic Usage

Simple accordion with collapsible items

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@opencosmos/ui"

<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>