v0.17.1

Appearance

Disclosure <details> ​

Disclosures are used to show and hide content sections on demand. Commonly used for FAQs, collapsible panels, and progressive disclosure of secondary information.

HTML tag<details>
⏣Native
⬡Progressive
◇Plain
⬢Shadow-DOM
Native element

Options ​

Variants ​

Add data-variant="bordered" for a visual container.

What is Luxen UI?
Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.
Code
html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
>
  <summary>What is Luxen UI?</summary>
  <div>Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.</div>
</details>

Initially open ​

Native open attribute.

Initially open
This disclosure starts expanded via the native open attribute.
Code
html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
  open
>
  <summary>Initially open</summary>
  <div>This disclosure starts expanded via the native <code>open</code> attribute.</div>
</details>

Markers ​

Add data-marker="arrow" or data-marker="plus" for an animated icon indicator.

Arrow marker
Chevron icon that rotates 180° when open.
Plus marker
Plus icon that rotates 45° into a cross when open.
Code
html
<div class="flex flex-col gap-3">
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="arrow"
  >
    <summary>Arrow marker</summary>
    <div>Chevron icon that rotates 180° when open.</div>
  </details>
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="plus"
  >
    <summary>Plus marker</summary>
    <div>Plus icon that rotates 45° into a cross when open.</div>
  </details>
</div>

Marker placement ​

Add data-marker-placement="start" to move the marker before the label (defaults to end).

Arrow at the start
The marker sits before the label instead of after it.
Plus at the start
Works with any marker icon.
Code
html
<div class="flex flex-col gap-3">
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="arrow"
    data-marker-placement="start"
  >
    <summary>Arrow at the start</summary>
    <div>The marker sits before the label instead of after it.</div>
  </details>
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="plus"
    data-marker-placement="start"
  >
    <summary>Plus at the start</summary>
    <div>Works with any marker icon.</div>
  </details>
</div>

Examples ​

FAQ ​

Use the native name attribute to create an exclusive accordion — only one item open at a time. Style the container with Tailwind utilities.

What is Luxen UI?
An HTML & CSS-first UI library built with modern CSS and web components. No framework required.
Does it require JavaScript?
Most elements are CSS-only. Custom elements use Lit for progressive enhancement when interactivity is needed.
How do I install it?
Install via npm: npm install luxen-ui, then import the CSS and components you need.
Can I use it with React or Vue?
Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or with plain HTML.
Code
html
<div
  class="mx-auto max-w-2xl divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900"
>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>What is Luxen UI?</summary>
    <div>
      An HTML & CSS-first UI library built with modern CSS and web components. No framework
      required.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Does it require JavaScript?</summary>
    <div>
      Most elements are CSS-only. Custom elements use Lit for progressive enhancement when
      interactivity is needed.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>How do I install it?</summary>
    <div>
      Install via npm: <code>npm install luxen-ui</code>, then import the CSS and components you
      need.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Can I use it with React or Vue?</summary>
    <div>
      Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or
      with plain HTML.
    </div>
  </details>
</div>

Accessibility ​

Criteria ​

Role

Uses native <details> — built-in disclosure semantics, no ARIA needed

WCAG4.1.2
RGAA7.1
Accessible name

The <summary> provides the accessible name automatically

WCAG4.1.2
Motion

Animations use CSS transitions that respect prefers-reduced-motion

WCAG2.3.3

Keyboard interactions ​

Enter
Toggles the disclosure open or closed
Space
Toggles the disclosure open or closed

API reference ​

Importing ​

css
@import 'luxen-ui/css/disclosure';

Attributes & Properties ​

openAttribute
Native attribute — starts the disclosure expanded.
nameAttribute
Native attribute — groups disclosures into an exclusive accordion.
data-markerarrow | plusAttribute
Marker icon: arrow rotates 180° when open; plus rotates 45° into a cross.
data-marker-placementstart | endAttribute
Marker side. Defaults to end.
data-variantAttribute
bordered — Adds border, background, and border-radius.
disabledAttribute
Disables interaction (set on <details> or <summary>).

Events ​

toggleEvent
Fires when the disclosure opens or closes (e.newState is "open" or "closed").

CSS classes ​

.l-disclosureClass
Headless base — layout, animation, and marker behavior only.

CSS custom properties ​

--marker-sizedefault:20pxCustom property
Marker icon size.
--marker-colordefault:var(--l-color-text-tertiary)Custom property
Marker icon color ().