Accordion — uicraft

Default

Only one item can be open at a time. Click an item to expand or collapse it.

html

Yes. It adheres to the WAI-ARIA design pattern. All interactive elements are keyboard accessible and screen reader friendly.

Yes. It comes with default styles that match the other components. You can also customize it with your own CSS or utility classes.

Yes. It includes smooth transitions for opening and closing. The chevron icon rotates to indicate the current state.

<div data-accordion="single">
  <div data-accordion-item>
    <button data-accordion-trigger>Is it accessible?</button>
    <div data-accordion-content>Yes. It adheres to WAI-ARIA.</div>
  </div>
  <div data-accordion-item>
    <button data-accordion-trigger>Is it styled?</button>
    <div data-accordion-content>Yes, with default styles.</div>
  </div>
</div>

Multiple Open

Multiple items can be expanded at the same time.

html

We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we will process your refund.

Yes, we provide 24/7 technical support via email and live chat. Our team typically responds within 2 hours during business hours.

Absolutely! You can upgrade or downgrade your plan at any time from your account settings. Changes take effect immediately.

<div data-accordion="multiple">
  <div data-accordion-item>
    <button data-accordion-trigger>What is your refund policy?</button>
    <div data-accordion-content>Full refund within 30 days.</div>
  </div>
  <div data-accordion-item>
    <button data-accordion-trigger>Do you offer technical support?</button>
    <div data-accordion-content>Yes, 24/7 via email and chat.</div>
  </div>
</div>

With Icons

Accordion items with leading icons for visual context.

html

We accept all major credit cards (Visa, MasterCard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are securely encrypted.

Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery. Free shipping on orders over $50.

Items can be returned or exchanged within 30 days of delivery. Items must be in original condition with tags attached. Return shipping is free.

<div data-accordion="single">
  <div data-accordion-item>
    <button data-accordion-trigger>
      <span class="uc-flex uc-items-center uc-gap-3">
        <svg class="uc-h-5 uc-w-5">...</svg>
        Payment Methods
      </span>
    </button>
    <div data-accordion-content>We accept all major credit cards.</div>
  </div>
</div>

Bordered

Each item in a separate bordered container for visual separation.

html

We support React, Vue, Svelte, Angular, and plain HTML/CSS. Each framework has its own set of components and documentation.

You can customize the theme by modifying the CSS variables in your global stylesheet. Override colors, spacing, and border-radius values to match your brand.

Yes, we provide a comprehensive Figma library with all components, variants, and design tokens. It stays in sync with the code implementation.

<div class="uc-flex uc-flex-col uc-gap-3" data-accordion="single">
  <div class="uc-rounded-2xl uc-border" data-accordion-item>
    <button data-accordion-trigger class="uc-px-4 uc-py-4">
      What frameworks are supported?
    </button>
    <div data-accordion-content class="uc-px-4 uc-pb-4">
      React, Vue, Svelte, Angular, and plain HTML/CSS.
    </div>
  </div>
</div>

Flush

Minimal style with no borders. Subtle hover effect on headers.

html

Install the package using npm or yarn, then import the components you need. Check the documentation for detailed setup instructions.

Configure the library by creating a config file in your project root. You can set default themes, breakpoints, and component defaults.

For advanced use cases, you can compose components together, create custom variants, and extend the design system with your own tokens.

<div data-accordion="single">
  <div data-accordion-item>
    <button data-accordion-trigger class="uc-py-3 uc-px-3 uc-rounded-lg">
      Getting Started
    </button>
    <div data-accordion-content class="uc-px-3 uc-pb-3">
      Install the package, then import the components.
    </div>
  </div>
</div>

API Reference

All data attributes available for the Accordion component.

Class	Type	Description
`data-accordion="single"`	Base	Single-open accordion — only one item expands at a time
`data-accordion="multiple"`	Base	Multi-open accordion — multiple items can be open
`data-accordion-item`	Structure	Wraps each accordion item (trigger + content)
`data-accordion-trigger`	Structure	The clickable header that toggles content
`data-accordion-content`	Structure	The collapsible content panel
`data-accordion-icon`	Modifier	Chevron icon that rotates on open/close
`data-accordion-shift`	Modifier	Adds left-padding shift on item hover

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Triggers use button element, content uses region role
Keyboard	Enter and Space toggle the accordion item
ARIA	aria-expanded on trigger, aria-controls links trigger to content
Focus	Visible focus ring via :focus-visible on trigger buttons