Skip to content

Fold Report

anime.js

An accordion whose rows unfold like folded paper, top to bottom, and fold back up from the end.

INC-0921 · Sev 2 · 31 Oct
Retrieval latency spike

09:12p95 on /chat crosses 2.4 s
09:15Pager fires, on-call acknowledges
09:31Reranker pods at 100% CPU
09:48Traffic shifted to Mumbai
10:05p95 back under 900 ms

Install

$ npx shadcn@latest add https://spotcheckui.com/r/fold-report.json

Also installs animejs.

Usage

import { FoldReport, FoldRow, FoldSection } from "@/components/spotcheck/fold-report"

<FoldReport defaultOpen="timeline">
  <FoldSection value="timeline" title="Timeline" meta="2 entries">
    <FoldRow label="09:12">p95 on /chat crosses 2.4 s</FoldRow>
    <FoldRow label="10:05">p95 back under 900 ms</FoldRow>
  </FoldSection>
  <FoldSection value="fix" title="Fix" meta="1 entry">
    <FoldRow label="Done">CPU limits on every queue worker</FoldRow>
  </FoldSection>
</FoldReport>

One section is open at a time. Pass open and onOpenChange to control it, with null for none.

Rows can hold anything, and they can be any height. The height is measured when a section opens and released when the animation ends, so content that grows or wraps later still shows in full. A closed section is hidden from the keyboard and screen readers.

FoldRow paints --paper behind its text so the fold looks solid, so set className if the report sits on another background.

Props

  • defaultOpenstringDefault —The section open at the start.
  • openstring | nullDefault —The open section, when you control it. Use `null` for none.
  • onOpenChange(open: string | null) => voidDefault —Runs when a section opens or closes.

Keyboard

TabMove between section headers
Enter or SpaceOpen or close the focused section

Reduced motion

Sections open and close at once with no fold.