Accordion

Native <details> rows on hairlines. The name attribute keeps one item open at a time; no JavaScript.

What is Raster?

A monochrome, CSS-first design system.

Is it dependency-free?

Yes. Native elements do the work.

Install

npx raster add accordion

Markup

<div class="rs-acc"><details class="rs-acc-item" name="faq" open><summary>What is Raster?<svg class="rs-acc-chevron" viewBox="0 0 16 16" width="16" height="16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></summary><div class="rs-acc-body">A monochrome, CSS-first design system.</div></details><details class="rs-acc-item" name="faq"><summary>Is it dependency-free?<svg class="rs-acc-chevron" viewBox="0 0 16 16" width="16" height="16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></summary><div class="rs-acc-body">Yes. Native elements do the work.</div></details></div>

React

import { Accordion, AccordionItem } from "@/components/raster/accordion";

<Accordion exclusive>
  <AccordionItem title="What is Raster?" defaultOpen>
    A monochrome, CSS-first design system.
  </AccordionItem>
  <AccordionItem title="Is it dependency-free?">
    Yes. Native elements do the work.
  </AccordionItem>
</Accordion>

Classes

.rs-acc.rs-acc-item.rs-acc-chevron.rs-acc-body