Details / Collapsible

How the native HTML <details> and <summary> elements are automatically styled as glassmorphic collapsibles.

The native <details> and <summary> elements are automatically styled as glassmorphic collapsible panels. No classes, no JavaScript required — it’s all driven by the browser’s native open/close state.

Basic Usage

What is Luminary UI?

Luminary UI is a classless, zero-config glassmorphism CSS framework that styles raw semantic HTML elements automatically.

Do I need JavaScript?

No. The open/close state is managed entirely by the browser via the native open attribute on the <details> element.

<details>
  <summary>What is Luminary UI?</summary>
  <p>A classless glassmorphism CSS framework.</p>
</details>

<details>
  <summary>Do I need JavaScript?</summary>
  <p>No. It's pure HTML and CSS.</p>
</details>

Open by Default

Add the open attribute to have a panel start expanded.

<details open>
  <summary>This is expanded by default</summary>
  <p>Content shown immediately on load.</p>
</details>

Styling Details

State	Treatment
Closed	Glass background, `→` arrow on the right
Summary hover	Background brightens to `--glass-bg-hover`
Open	Summary gets `--glass-bg-active` + bottom border; arrow rotates 90°
Content	`1.25rem` padding, `--glass-text-secondary` color

The <summary> uses display: flex; justify-content: space-between to push the arrow indicator to the right edge. The native browser marker (triangle) is hidden via ::-webkit-details-marker { display: none }.