Collapsed

Component is closed.

html

<details class="col-el" style="--accent:#D9C8F0;">
  <summary class="col-el__summary">Advanced settings</summary>
  <p class="col-el__body">Rate limits, webhooks, and the danger zone live here.</p>
</details>
<p class="col-el__hint">Closed is the real collapsed state — click the summary to expand it yourself, or force it open above.</p>
<style>
.col-el { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 4px 16px; }
.col-el__summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.col-el__summary::-webkit-details-marker { display: none; }
.col-el__summary::after { content: "▸"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.col-el__summary::after { transition: transform .15s; }
}
.col-el[open] .col-el__summary::after { transform: rotate(90deg); display: inline-block; }
.col-el__body { margin: 0 0 14px; font-size: 13px; color: #241430cc; }
.col-el__hint { width: 300px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }
</style>

tailwind

<details class="w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-4 py-1 [&_summary::-webkit-details-marker]:hidden">
  <summary class="list-none cursor-pointer py-3.5 font-bold flex justify-between items-center">
    Advanced settings
    <span aria-hidden="true" style="color:#D9C8F0">▸</span>
  </summary>
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/80">Rate limits, webhooks, and the danger zone live here.</p>
</details>
<p class="w-[300px] box-border mt-2 text-[11px] text-[#241430]/55">Closed is the real collapsed state — click the summary to expand it yourself, or force it open above.</p>

react

import { useState } from "react";

export function CollapsedState({
  summaryText = "Advanced settings",
  body = "Rate limits, webhooks, and the danger zone live here.",
  accent = "#D9C8F0",
  force = false,
}) {
  const [open, setOpen] = useState(force);
  return (
    <div>
      <details open={open} onToggle={(e) => setOpen(e.target.open)}
        style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143025", borderRadius: 10, padding: "4px 16px" }}>
        <summary style={{ listStyle: "none", cursor: "pointer", padding: "13px 0", fontWeight: 700, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          {summaryText}
          <span aria-hidden="true" style={{ color: accent, display: "inline-block", transform: open ? "rotate(90deg)" : "none" }}>▸</span>
        </summary>
        <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430cc" }}>{body}</p>
      </details>
      <p style={{ width: 300, margin: "8px 0 0", fontSize: 11, color: "#241430888" }}>Closed is the real collapsed state — click the summary to expand it yourself, or force it open with the <code>force</code> prop.</p>
    </div>
  );
}