Accordion Component

A vertically stacked set of interactive headings that each reveal a section of content.

Default

A basic accordion with shadcn styling.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.

FAQ Example

Common use case for accordions.

We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for enterprise customers.

Standard shipping typically takes 5-7 business days. Express shipping options are available for 2-3 day delivery.

We offer a 30-day money-back guarantee. Items must be returned in original condition with all packaging and accessories.

Yes! We provide 24/7 technical support via email and live chat. Phone support is available Monday-Friday, 9AM-5PM EST.

Multiple Open Items

Allow multiple items to be open simultaneously.

Blazing fast rendering with optimized algorithms.

  • Minimal re-renders
  • Virtual scrolling support
  • Lazy loading capabilities

Fully customizable to match your brand.

  • Theme system
  • Custom styling
  • Component composition

Built with accessibility in mind.

  • WCAG 2.1 compliant
  • Screen reader support
  • Keyboard navigation

With Rich Content

Accordion items can contain any content.

Install the package using your preferred package manager:

dotnet add package BlazorUI

Add the services to your Program.cs:

builder.Services.AddBlazorUI();

Start using components in your pages:

<Button>Click me</Button>
An unhandled error has occurred. Reload 🗙