astro-better-details

Expandable disclosure panels built on the native <details>/<summary> HTML elements. No JavaScript required. Includes an animated chevron and CSS custom property theming.

Current version: 0.1.0 --npm

Installation

$ npm install astro-better-details

Usage

Pass the title as a prop for plain text headers:

import Details from 'astro-better-details/Details.astro';

<Details title="Section title">
  Content goes here. Supports **markdown** and MDX components.
</Details>

Use the title slot when the header needs inline markup — code, links, or other components:

<Details>
  <span slot="title">Why use <code>astro-better-details</code>?</span>
  Content goes here.
</Details>

Live examples

Click to expand

This content is hidden by default and revealed when clicked. Supports any MDX content including code blocks, lists, and other components.

Open by default

Pass the open prop to render the panel pre-expanded.

Title with inline code via the slot Use the title slot when the header needs inline markup that a plain string prop can’t express.

Props

Prop	Type	Default	Description
`title`	`string`	—	Plain-text header label; use the `title` slot for inline markup
`open`	`boolean`	`false`	Render the panel pre-expanded
`class`	`string`	—	Extra class(es) added to the `<details>` element

Slots

Slot	Description
`title`	Header content with inline markup — code, links, components; takes precedence over the `title` prop
(default)	Body content revealed when expanded

Theming

The component exposes CSS custom properties on .abt-details:

Property	Controls
`--abt-details-border`	Border color of the outer container
`--abt-details-separator`	Border color of the line between header and body when open (defaults to `--abt-details-border`; set to `transparent` to hide)
`--abt-details-summary-bg`	Background color of the summary/header bar
`--abt-details-chevron`	Color of the rotating chevron icon

Override to match your brand:

.abt-details {
  --abt-details-border:     #ddd6fe;
  --abt-details-summary-bg: #f5f3ff;
  --abt-details-chevron:    #7c3aed;
}

.dark .abt-details {
  --abt-details-border:     #1c0e00;
  --abt-details-summary-bg: #111111;
  --abt-details-chevron:    #9ca3af;
}

Tailwind Typography note

Applying .prose directly to .abt-details-body causes @tailwindcss/typography to italicize <figcaption> elements, which conflicts with code block titles from astro-better-code-blocks. Wrap prose content in a <div> inside the slot instead:

<Details title="With prose styling">
  <div class="prose prose-slate dark:prose-invert max-w-none">
    Content with prose typography here.
  </div>
</Details>