Disclosure Group — Cider UI

Selectors

.disclosure-group: Card container for multiple <details> elements with shared background, rounded corners, and separators.
<details>: Standalone disclosure (styled automatically in .cider scope — bordered, padded).

Default

General

About, Software Update, AirDrop, AirPlay & Continuity.

Appearance

Choose between Light, Dark, or Auto appearance. Accent and highlight colours can be customised in the sidebar.

Accessibility

VoiceOver, Zoom, Display & Text Size, Speech, Descriptions.

HTML

<div class="disclosure-group" style="max-width:28rem">
  <details>
    <summary>General</summary>
    <p>About, Software Update, AirDrop, AirPlay & Continuity.</p>
  </details>
  <details>
    <summary>Appearance</summary>
    <p>Choose between Light, Dark, or Auto appearance. Accent and highlight colours can be customised in the sidebar.</p>
  </details>
  <details>
    <summary>Accessibility</summary>
    <p>VoiceOver, Zoom, Display & Text Size, Speech, Descriptions.</p>
  </details>
</div>

With one section open

Wi-Fi

Manage wireless network connections and preferred networks.

Bluetooth

Currently connected to AirPods Pro and Magic Keyboard. Nearby devices will appear here when discoverable.

Network

Ethernet, VPN, DNS, and proxy configuration.

HTML

<div class="disclosure-group" style="max-width:28rem">
  <details>
    <summary>Wi-Fi</summary>
    <p>Manage wireless network connections and preferred networks.</p>
  </details>
  <details open>
    <summary>Bluetooth</summary>
    <p>Currently connected to <strong>AirPods Pro</strong> and <strong>Magic Keyboard</strong>. Nearby devices will appear here when discoverable.</p>
  </details>
  <details>
    <summary>Network</summary>
    <p>Ethernet, VPN, DNS, and proxy configuration.</p>
  </details>
</div>

With rich content

Storage

37 GB of 256 GB used

Battery

Battery health: 98%

Optimised Battery Charging is enabled.

HTML

<div class="disclosure-group" style="max-width:28rem">
  <details open>
    <summary>Storage</summary>
    <div>
      <progress value="37" max="100" aria-label="Storage usage"></progress>
      <p class="text-sm text-tertiary-foreground mt-2">37 GB of 256 GB used</p>
    </div>
  </details>
  <details>
    <summary>Battery</summary>
    <div>
      <p>Battery health: <strong>98%</strong></p>
      <p class="text-sm text-tertiary-foreground mt-1">Optimised Battery Charging is enabled.</p>
    </div>
  </details>
</div>

Accordion (exclusive)

What is Cider UI?

Apple-aesthetic UI components as a Tailwind CSS v4 plugin. Pure CSS with optional JS for interactive components.

Do I need a build step?

No. Use the CDN bundle for zero-config setup, or import via a package manager alongside Tailwind CSS v4.

Does it work with React / Vue / Svelte?

Yes. Cider UI is framework-agnostic — it works with any tool that outputs HTML.

HTML

<div class="disclosure-group" style="max-width:28rem">
  <details name="faq" open>
    <summary>What is Cider UI?</summary>
    <p>Apple-aesthetic UI components as a Tailwind CSS v4 plugin. Pure CSS with optional JS for interactive components.</p>
  </details>
  <details name="faq">
    <summary>Do I need a build step?</summary>
    <p>No. Use the CDN bundle for zero-config setup, or import via a package manager alongside Tailwind CSS v4.</p>
  </details>
  <details name="faq">
    <summary>Does it work with React / Vue / Svelte?</summary>
    <p>Yes. Cider UI is framework-agnostic — it works with any tool that outputs HTML.</p>
  </details>
</div>

Standalone details

System requirements

macOS Sequoia 15.0 or later
4 GB RAM minimum
500 MB available disk space

HTML

<details style="max-width:28rem">
  <summary>System requirements</summary>
  <ul>
    <li>macOS Sequoia 15.0 or later</li>
    <li>4 GB RAM minimum</li>
    <li>500 MB available disk space</li>
  </ul>
</details>