Accordion
A collapsible accordion component for displaying FAQ sections and grouped content with smooth animations.
Usage
Basic Accordion
The Accordion component displays collapsible content sections with smooth animations.
import { Accordions, Accordion } from "@prisma-docs/eclipse";
export function FAQSection() {
return (
<Accordions type="single">
<Accordion title="What is Prisma?">
Prisma is a next-generation ORM that makes working with databases easy for application developers.
</Accordion>
<Accordion title="How do I get started?">
You can get started by installing Prisma CLI and initializing a new project.
</Accordion>
<Accordion title="What databases are supported?">
Prisma supports PostgreSQL, MySQL, SQLite, SQL Server, MongoDB, and CockroachDB.
</Accordion>
</Accordions>
);
}Live Example:
Multiple Open Items
Allow multiple accordion items to be open simultaneously:
import { Accordions, Accordion } from "@prisma-docs/eclipse";
export function MultipleAccordion() {
return (
<Accordions type="multiple">
<Accordion title="Installation">
Run npm install to get started.
</Accordion>
<Accordion title="Configuration">
Configure your settings in the config file.
</Accordion>
<Accordion title="Usage">
Import and use the components in your app.
</Accordion>
</Accordions>
);
}Live Example:
With Hash Linking
Add IDs to accordion items for deep linking:
import { Accordions, Accordion } from "@prisma-docs/eclipse";
export function HashLinkedAccordion() {
return (
<Accordions type="single">
<Accordion
id="what-is-prisma"
title="What is Prisma?"
>
Prisma is a next-generation ORM that makes working with databases easy.
</Accordion>
<Accordion
id="getting-started"
title="How do I get started?"
>
You can get started by installing Prisma CLI.
</Accordion>
</Accordions>
);
}When you provide an id prop, a copy link button appears that allows users to copy a direct link to that accordion item.
Live Example:
With Custom Values
Specify custom values for controlling which items are open:
import { Accordions, Accordion } from "@prisma-docs/eclipse";
export function CustomValueAccordion() {
return (
<Accordions type="single" defaultValue="intro">
<Accordion value="intro" title="Introduction">
Welcome to our documentation.
</Accordion>
<Accordion value="setup" title="Setup">
Follow these steps to set up your project.
</Accordion>
<Accordion value="usage" title="Usage">
Learn how to use the features.
</Accordion>
</Accordions>
);
}Accordions Props
type- Control behavior:"single"(one open at a time) or"multiple"(multiple can be open) (optional, default: "single")defaultValue- Default open item value(s) (string or string[], optional)children- Accordion components (ReactNode, required)className- Additional CSS classes (optional)
Accordion Props
title- The title text displayed in the header (string or ReactNode, required)value- Unique value for this accordion item, defaults to title (string, optional)id- Optional ID for the accordion (enables hash linking with copy button) (string, optional)children- The content shown when expanded (ReactNode, required)className- Additional CSS classes (optional)
Features
- ✅ Single or multiple open items
- ✅ Smooth animations when opening/closing
- ✅ Hash linking support with copy button
- ✅ Chevron icon rotates when expanded
- ✅ Keyboard accessible
- ✅ Automatic URL hash navigation
- ✅ Based on Radix UI Accordion
Best Practices
- Use clear, concise titles that describe the content
- Keep content readable and well-formatted
- Use
type="single"for FAQ sections where only one answer should be visible - Use
type="multiple"for step-by-step guides where users may want to reference multiple sections - Add
idprops when you want to enable deep linking to specific items - Group related items together in the same Accordions container
- Limit the number of accordion items to 5-10 for better usability
Common Use Cases
The Accordion component is perfect for:
- FAQ sections - Organize frequently asked questions
- Step-by-step guides - Break down complex processes
- Feature documentation - Group related features
- Troubleshooting guides - Organize common issues and solutions
- Release notes - Display version-specific changes
- API documentation - Group endpoint descriptions