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

On this page