Hybrid Astro UI

Accordion

Open in ChatGPT

A UI component that allows users to expand and collapse sections of content. It is ideal for organizing information in a compact manner, such as FAQs or detailed lists, enhancing user experience by reducing clutter on the page. Perfect for Astro projects, the Accordion component supports progressive enhancement and can function without JavaScript, ensuring optimal performance.

What is Hybrid-Astro-UI?

Hybrid-Astro-UI is a component library for Astro that prioritizes a zero-JS approach and enables progressive enhancement through web components.

Does it need JavaScript to work?

Not necessarily. Components can be rendered statically and add interactivity only when needed, keeping performance optimal.

How do I install the Accordion component?

You can install it using the command shown below (npm, pnpm, yarn, or bun) with the hybrid-astro-ui CLI to add the component to your project.

What use cases is an Accordion good for?

It’s ideal for FAQ sections, expandable details, and content you want to organize into collapsible blocks without cluttering the UI.

Install

pnpm dlx hybrid-astro-ui@latest add accordion
npx hybrid-astro-ui@latest add accordion
yarn dlx hybrid-astro-ui@latest add accordion
bunx hybrid-astro-ui@latest add accordion

Usage

---
import { 
    Accordion, 
    AccordionTrigger,
    AccordionContent 
} from "@/src/components/hybrid-astro-ui/accordion"
---
<Accordion>
    <AccordionTrigger>
        What is Hybrid-Astro-UI?
    </AccordionTrigger>
    <AccordionContent>
        Hybrid-Astro-UI is a component library for Astro that prioritizes a 
        zero-JS approach and enables progressive enhancement through web components.
    </AccordionContent>
</Accordion>    

<Accordion open>
    <AccordionTrigger>
        Does it need JavaScript to work?
    </AccordionTrigger>
    <AccordionContent>
        Not necessarily. Components can be rendered statically and add
         interactivity only when needed, keeping performance optimal.
    </AccordionContent>
</Accordion>

API Reference

Accordion is a small set of composable primitives built on native HTML details and summary.

Accordion

AccordionTrigger

AccordionContent