Mcoli UI - MC Accordion

Overview

The mc-accordion is a disclosure component of the MicroClub UI library. Built on the @base-ui/react accordion primitive, it helps organize related content into expandable sections while keeping keyboard navigation and accessibility behavior handled for you.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

import {  McAccordion,  McAccordionContent,  McAccordionItem,  McAccordionTrigger,} from '../ui/mc-accordion';export function AccordionDemo() {  return (    <McAccordion defaultValue={['product']} className="max-w-lg">      <McAccordionItem value="product">        <McAccordionTrigger>Product Information</McAccordionTrigger>        <McAccordionContent>          <p>            Our flagship product combines cutting-edge technology with sleek design. Built with            premium materials, it offers unparalleled performance and reliability.          </p>          <p>            Key features include advanced processing capabilities, and an intuitive user interface            designed for both beginners and experts.          </p>        </McAccordionContent>      </McAccordionItem>      <McAccordionItem value="shipping">        <McAccordionTrigger>Shipping Details</McAccordionTrigger>        <McAccordionContent>          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>          <p>            Free shipping on international orders is available once the minimum order amount is            reached.          </p>        </McAccordionContent>      </McAccordionItem>      <McAccordionItem value="returns">        <McAccordionTrigger>Return Policy</McAccordionTrigger>        <McAccordionContent>          <p>            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds            processed within 5-7 business days.          </p>        </McAccordionContent>      </McAccordionItem>    </McAccordion>  );}export default AccordionDemo;

Add to Your Project

Deploy the mc-accordion directly to your components/ui directory:

npx mcoli-ui@latest add mc-accordion

pnpm dlx mcoli-ui@latest add mc-accordion

yarn dlx mcoli-ui@latest add mc-accordion

bunx mcoli-ui@latest add mc-accordion

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

bun add @base-ui/react lucide-react

Copy the source code

import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';import { cn } from '@/lib/utils';function McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {  return (    <AccordionPrimitive.Root      data-slot="accordion"      className={cn('flex w-[503px] flex-col', className)}      {...props}    />  );}function McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {  return (    <AccordionPrimitive.Item      data-slot="accordion-item"      className={cn('not-last:border-b', className)}      {...props}    />  );}function McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {  return (    <AccordionPrimitive.Header className="flex">      <AccordionPrimitive.Trigger        data-slot="accordion-trigger"        className={cn(          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',          className        )}        {...props}      >        {children}        <ChevronDownIcon          data-slot="accordion-trigger-icon"          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"        />        <ChevronUpIcon          data-slot="accordion-trigger-icon"          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"        />      </AccordionPrimitive.Trigger>    </AccordionPrimitive.Header>  );}function McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {  return (    <AccordionPrimitive.Panel      data-slot="accordion-content"      className="paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up"      {...props}    >      <div        className={cn(          'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',          className        )}      >        {children}      </div>    </AccordionPrimitive.Panel>  );}export { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import {
  McAccordion,
  McAccordionContent,
  McAccordionItem,
  McAccordionTrigger,
} from '@/registry/ui/mc-accordion';

  return (
    <McAccordion defaultValue={['product']} className="w-full max-w-[503px]">
      <McAccordionItem value="product">
        <McAccordionTrigger>Product Information</McAccordionTrigger>
        <McAccordionContent>
          <p>Our flagship product combine cutting-edge technology with sleek design.</p>
        </McAccordionContent>
      </McAccordionItem>
    </McAccordion>
  );
}

Examples

Basic Accordion

<McAccordion defaultValue={['product']} className="w-full max-w-[503px]">
  <McAccordionItem value="product">
    <McAccordionTrigger>Product Information</McAccordionTrigger>
    <McAccordionContent>
      <p>Our flagship product combine cutting-edge technology with sleek design.</p>
      <p>Key features include advanced processing capabilities and an intuitive interface.</p>
    </McAccordionContent>
  </McAccordionItem>

  <McAccordionItem value="shipping">
    <McAccordionTrigger>Shipping Details</McAccordionTrigger>
    <McAccordionContent>
      <p>We offer standard, express, and overnight shipping.</p>
      <p>Free international shipping is available over the minimum order amount.</p>
    </McAccordionContent>
  </McAccordionItem>

  <McAccordionItem value="returns">
    <McAccordionTrigger>Return Policy</McAccordionTrigger>
    <McAccordionContent>
      <p>Returns are accepted within 30 days when items are unused and in original packaging.</p>
    </McAccordionContent>
  </McAccordionItem>
</McAccordion>

Width Control

The accordion already accepts className, so width is usually controlled from the parent with Tailwind utilities.

<McAccordion className="w-full max-w-[503px]">...</McAccordion>

Use w-[503px] for a fixed width, or w-full max-w-[503px] for a responsive layout that still respects the Figma width.

Long Trigger Text

When trigger labels are long, keep the chevron separated from the text so content wraps cleanly instead of sliding underneath the icon.

<McAccordionItem value="faq">
  <McAccordionTrigger>
    What happens if my accordion title is much longer than a single line?
  </McAccordionTrigger>
  <McAccordionContent>
    <p>The trigger text should wrap naturally while the chevron keeps its own space.</p>
  </McAccordionContent>
</McAccordionItem>

Multiple Paragraphs

AccordionContent works well with stacked content such as paragraphs, links, and lists.

<McAccordionContent>
  <p>First paragraph of supporting information.</p>
  <p>Second paragraph with more details.</p>
  <a href="#learn-more">Learn more</a>
</McAccordionContent>

API Reference

Accordion

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes, commonly used to control width
`defaultValue`	`string[]`	`undefined`	The item values opened by default
`value`	`string[]`	`undefined`	Controlled open item values
`onValueChange`	`(value: string[]) => void`	`undefined`	Called when open items change

All other props from @base-ui/react/accordion root are supported.

AccordionItem

Prop	Type	Default	Description
`value`	`string`	`-`	Unique value used to identify the item
`className`	`string`	`undefined`	Additional CSS classes

All other props from @base-ui/react/accordion item are supported.

AccordionTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	The clickable heading content
`className`	`string`	`undefined`	Additional CSS classes
`disabled`	`boolean`	`false`	Prevents interaction for the trigger

All other props from @base-ui/react/accordion trigger are supported.

AccordionContent

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	The revealed content
`className`	`string`	`undefined`	Additional CSS classes

All other props from @base-ui/react/accordion panel are supported.

MC Accordion

Product Information

Shipping Details

Return Policy

On this page

Product Information

Shipping Details

Return Policy