A playful, high-utility shadcn registry: PDF, DOCX and JSON viewers, redaction and bounding boxes, agent chat with tool calls, data tables, command palettes, OTP inputs, and shader fields.
A proposed change shown as a unified or side-by-side diff, with optional accept and reject controls.
A worked example of Diff View: A proposed change shown as a unified or side-by-side diff, with optional accept and reject controls.
Two images crossing by pushing their pixels through the same noise.
A worked example of Displacement Image: Two images crossing by pushing their pixels through the same noise in opposite directions, with the first image also present as ordinary markup for anything that cannot run it.
A photograph reduced to two theme colours through an ordered dither.
A worked example of Dither Image: A photograph reduced to two theme colours through an ordered dither, the way a newspaper reduced one to ink and paper.
Mark where one scanned batch becomes several documents.
A worked example of Document Splits: Mark where one scanned batch becomes several documents. Splits are toggled between pages and the segments update as you go.
Renders a Word document as elements built through a tag and attribute allowlist.
A worked example of DOCX Viewer: Renders a Word document as elements built through an allowlist, so a file you did not write cannot bring its own scripts or links.
An accessible value slider with restrained physical feedback at its limits.
A worked example of Elastic Slider: A precise slider with a small amount of give at either end. The current value stays visible and the control works without a pointer.
One line saying a list came back empty, for a table, a list, or a popover.
A worked example of Empty Row: One line saying a list came back empty, for a table, a list, or a popover.
What to show when there is nothing yet.
A worked example of Empty State: What to show when there is nothing yet: what this place is for, and the way to fill it.
A compact image preview with automatic browser File support, loading, and failure states.
A worked example of File Thumbnail: A compact image preview for attachments, upload queues, and file lists. Browser image files work without any setup.
An expandable tree of folders and files with full keyboard navigation.
A worked example of File Tree: An expandable tree of folders and files with full keyboard navigation and correct tree semantics.
A file picker and dropzone with validation, a visible queue, and optional progress, cancel, and retry handling.
A worked example of File Upload: A file picker and dropzone with clear validation and a visible queue. Connect your upload function when you need progress, cancel, and retry.
A compact floating outline that tracks reading progress and the active section.
A worked example of Floating Index: A compact outline for long pages. It keeps the active section and reading progress visible without becoming another permanent sidebar.
Labelled columns of links, with the column count and the link rendering left to you.
A worked example of Footer Columns: Labelled columns of links, with the column count and the link rendering left to you.
A wrapping row of links under its own label, set apart by a dashed rule.
A worked example of Footer Row: A wrapping row of links under its own label, set apart by a dashed rule.
The oversized brand word that closes a page, drawn as texture rather than content.
A worked example of Footer Wordmark: The oversized brand word that closes a page, drawn as texture rather than content.
Film grain for any panel, which also hides the banding in a wide gradient.
A worked example of Grain Overlay: Film grain for any positioned box, which incidentally fixes the banding a wide gradient shows on a good monitor.
A confirmation button that completes after a deliberate pointer hold and remains accessible from a keyboard.
A worked example of Hold Button: A confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.
A responsive image collection with grid and masonry layouts and an accessible lightbox.
A worked example of Image Gallery: A responsive image collection with equal and masonry layouts, plus a lightbox that handles focus, keyboard navigation, and scroll locking.
Thumbnails in even cells or masonry columns, with nothing but React behind them.
A worked example of Image Grid: Thumbnails in even cells or masonry columns, with nothing but React behind them.
A playful checkbox that a determined bear refuses to leave on.
A worked example of Impossible Checkbox: A checkbox with one stubborn rule: the bear will not let you leave it on. Best kept for demos, Easter eggs, and harmless preferences.
Numbered markers inside generated text, each linking to its entry in a source list.
A worked example of Inline Citations: Numbered markers placed inside generated text, each linking to its entry in a source list underneath.
A switchable install line for a library, with the runner and installer kept apart.
A worked example of Install Command: The install line for a library, switchable between package managers, with the runner and the installer kept apart.
A collapsible tree for a JSON payload, navigable from the keyboard, where every row can hand you its path.
A worked example of JSON Viewer: A collapsible tree for a JSON payload, navigable from the keyboard, where every row can hand you its path.
A keyboard chord rendered with the right glyphs for the reader's platform.
A worked example of Kbd: A keyboard chord rendered with the right glyphs for the reader's platform, and spoken in words.