Examples

🔄 Auto-generated mirror. Canonical source: docs/examples/README.md. Edit there — changes here are overwritten by CI.

Examples

Nav: Quick start · Writing cases · Hierarchy · Tweaks · Theming · Documentation panel · Writing placard docs · Testing · CLI · AI agents · Configuration

Example files that illustrate the snippets used throughout the guides. Display Case dogfoods itself, so these examples case Display Case's own UI parts — TweakControl (an atom) and FlowNav (a molecule). They are illustrative: these components aren't actually cased in the package yet, and this folder is not type-checked, so the colocated ./tweak-control / ./flow-nav imports are imaginary stand-ins.

File	Shows	Subject	Guide
plain.case.tsx	A single named case with a render thunk.	TweakControl	Writing cases
tweaks.case.tsx	A Playground case with text, choice, and boolean tweaks.	TweakControl	Tweaks
multi-variant.case.tsx	Several named cases for one component.	FlowNav	Writing cases
tweak-control.placard.md	A component doc panel, annotated section by section.	TweakControl	Writing placard docs

To use a *.case.tsx, copy it next to a component as <component>.case.tsx, point the import at your real component, and make sure your config's roots glob matches its location. To use the .placard.md, copy everything above its --- rule to <component>.placard.md and rewrite it for your component. See Quick start.