Components

Accordion

A disclosure powered by the browser. No client wrapper needed.

Preview

Does this need JavaScript?

No. Native details and summary handle the interaction.

Usage

import { Accordion } from '@fwenthehunter/friendly-ui';

<Accordion title="Does this need JavaScript?">
  No. Native details and summary handle the interaction.
</Accordion>

Renders details with a summary and a content wrapper. Works on the server and remains interactive with JavaScript disabled. Focus the summary and press Enter or Space to toggle it.

Each disclosure opens independently. Supply the native name attribute to group disclosures in browsers that support it. Avoid interactive elements inside the title.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`title`	ReactNode (required)	—
`open`	boolean (native)	false
`name`	string (native grouping)	—