Accordion

import { Accordion, Accordions } from "@prisma/eclipse";

Usage

Basic Accordion

The Accordion component displays collapsible content sections with smooth animations.

import { Accordions, Accordion } from "@prisma/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>
  );
}

Multiple Open Items

Allow multiple accordion items to be open simultaneously:

import { Accordions, Accordion } from "@prisma/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>
  );
}

With Hash Linking

Add IDs to accordion items for deep linking:

import { Accordions, Accordion } from "@prisma/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.

With Custom Values

Specify custom values for controlling which items are open:

import { Accordions, Accordion } from "@prisma/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