Property Panel

Panel containing object attributes/settings.

html

<div class="pp-demo pp-demo--comfortable">
  <details class="pp-demo__group" open><summary style="color:#BFD9F2;">Settings</summary>
  
  <label class="pp-demo__row"><span>Opacity</span><input type="text" value="100%" readonly /></label>
  <label class="pp-demo__row"><span>Blend mode</span><input type="text" value="Normal" readonly /></label>
  <label class="pp-demo__row"><span>Corner radius</span><input type="text" value="8" readonly /></label>
  </details>
</div>
<style>
.pp-demo { font: 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; max-width: 260px; box-sizing: border-box; border: 1px solid #24143018; border-radius: 8px; }
.pp-demo__title, .pp-demo summary { margin: 0 0 8px; font-weight: 700; cursor: default; }
.pp-demo summary { cursor: pointer; }
.pp-demo__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 8px; }
.pp-demo--compact .pp-demo__row { padding: 3px 0; font-size: 12px; }
.pp-demo__row span { color: #24143099; }
.pp-demo__row input { width: 80px; box-sizing: border-box; border: 1px solid #24143022; border-radius: 5px; padding: 3px 6px; font: inherit; text-align: right; background: #fff; color: #241430; }
</style>

tailwind

<div class="font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-3 max-w-[260px] box-border border border-[#24143018] rounded-lg pp-tw pp-tw--comfortable">
  <details open><summary class="mb-2 font-bold cursor-pointer" style="color:#BFD9F2;">Settings</summary>
  
  <label class="flex justify-between items-center py-1.5 gap-2 pp-tw__row"><span class="text-[#24143099]">Opacity</span><input type="text" value="100%" readonly class="w-20 box-border border border-[#24143022] rounded text-right px-1.5 py-0.5 bg-white text-[#241430]" /></label>
  <label class="flex justify-between items-center py-1.5 gap-2 pp-tw__row"><span class="text-[#24143099]">Blend mode</span><input type="text" value="Normal" readonly class="w-20 box-border border border-[#24143022] rounded text-right px-1.5 py-0.5 bg-white text-[#241430]" /></label>
  <label class="flex justify-between items-center py-1.5 gap-2 pp-tw__row"><span class="text-[#24143099]">Corner radius</span><input type="text" value="8" readonly class="w-20 box-border border border-[#24143022] rounded text-right px-1.5 py-0.5 bg-white text-[#241430]" /></label>
  </details>
</div>
<style>
.pp-tw--compact .pp-tw__row { padding: 3px 0 !important; font-size: 12px; }
</style>

react

export function PropertyPanel({
  title = "Settings",
  density = "comfortable",
  accent = "#BFD9F2",
  collapsible = true,
}) {
  const compact = density === "compact";
  const rows = [["Opacity", "100%"], ["Blend mode", "Normal"], ["Corner radius", "8"]];
  const body = rows.map(([k, v]) => (
    <label key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: compact ? "3px 0" : "6px 0", gap: 8, fontSize: compact ? 12 : 13 }}>
      <span style={{ color: "#24143099" }}>{k}</span>
      <input type="text" value={v} readOnly style={{ width: 80, boxSizing: "border-box", border: "1px solid #24143022", borderRadius: 5, padding: "3px 6px", textAlign: "right", background: "#fff", color: "#241430" }} />
    </label>
  ));
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", background: "#FAF7F2", padding: 12, maxWidth: 260, boxSizing: "border-box", border: "1px solid #24143018", borderRadius: 8 }}>
      {collapsible ? (
        <details open>
          <summary style={{ marginBottom: 8, fontWeight: 700, cursor: "pointer", color: accent }}>{title}</summary>
          {body}
        </details>
      ) : (
        <>
          <h4 style={{ margin: "0 0 8px", fontWeight: 700, color: accent }}>{title}</h4>
          {body}
        </>
      )}
    </div>
  );
}