SmoothDetails

A native <details> disclosure with an animated height.

Is it accessible?

Yes: it is a native details element, so keyboard, screen readers and find-in-page all work.

Does it need JavaScript?

No. The animation is pure CSS, and it still opens without it.

What about reduced motion?

It opens instantly, with no height animation.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/smooth-details.json

React
import SmoothDetails from "@/components/fx/smooth-details"

<SmoothDetails title="Is it accessible?">Yes.</SmoothDetails>

Native <details>/<summary>: keyboard, screen readers, find-in-page and no-JS all work.
Animates where ::details-content is supported; elsewhere it opens instantly.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) opens without animation.

Prop	Type	Default	Description
title	ReactNode	—	Summary line.
...props	ComponentProps<'details'>	—	open, name, onToggle…