Content

FAQ accordion

Bordered accordion answer section with rotating chevrons.

simple2 in Content

Accordion

Demo

Can I use blocks without the CLI?
Yes — every block is plain Astro markup. Copy the section, paste it into a page, and adjust the content. No registry or generator required.
Do blocks add JavaScript?
Only what their parts need. An FAQ block is zero-JS (native details); a settings block ships a few hundred bytes for the switches.
How do I theme a block?
Blocks read the same tokens as components. Override --ui-primary once and every block — and every component inside it — follows.
---
import { Accordion } from "astro-ui";
---

<Accordion
  id="faq"
  variant="bordered"
  items={[
    { value: "f1", title: "Can I use blocks without the CLI?", content: "Yes — every block is plain Astro markup. Copy the section, paste it into a page, and adjust the content." },
    { value: "f2", title: "Do blocks add JavaScript?", content: "Only what their parts need. An FAQ block is zero-JS (native details); a settings block ships a few hundred bytes for the switches." },
    { value: "f3", title: "How do I theme a block?", content: "Blocks read the same tokens as components. Override --ui-primary once and every block follows." },
  ]}
/>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.