Preblocks

Native Accordion

Source

A shadcn-style accordion built using native HTML details and summary elements with Tailwind CSS animation for better SEO and no JavaScript library required.

Is it accessible?

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

Is it styled?

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

Is it animated?

Yes. It uses the new ::details-content pseudo-element for smooth animations.

Installation

npx shadcn@latest add @preblocks/native-accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/native-accordion"
export function AccordionDemo() {
  return (
    <Accordion className="w-full">
      <AccordionItem name="item">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Compatibility

This component leverages the ::details-content pseudo-element for smooth transition animations. Please note that this pseudo-element was introduced in Chrome 131 (released November 2024), meaning animations will not be visible in unsupported browsers. However, the component will still function correctly. You can check browser compatibility on MDN.

Additionally, details-content: support is available starting from Tailwind CSS v4.1.

Comparing with Radix / shadcn

This component offers significant advantages in terms of SEO, accessibility, and reduced JavaScript dependency compared to Radix UI and shadcn/ui’s Accordion. However, animation features rely on newer browser support.

FeatureNative HTML AccordionRadix / shadcn
JavaScript DependencyNone (native HTML elements)JavaScript library (Radix UI)
DOM RenderingContent always rendered in DOM, hidden by CSSContent often not rendered until expanded
SEO BenefitsSemantic tags, all content in initial DOM for crawlersContent may not be in initial DOM
In-page SearchCan automatically expand when hidden content is foundHidden content may not be searchable or auto-expandable
AccessibilityInherently accessible due to native elementsRelies on WAI-ARIA implementation
Animation SupportRelies on newer browser features (::details-content)Generally well-supported across browsers
Browser CompatibilityCore functionality works everywhere; animations require modern browsersBroad browser support for all features

Resources