---
name: "@mischief"
slug: "mischief"
description: "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."
category: "Animated components"
tags: ["3d", "ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "forms", "hooks", "loaders", "maps", "media", "navigation", "retro", "tables", "theming"]
framework: "react"
license: "MIT"
author: "Tinkerers-Labs"
website: "https://ui.tinkererslabs.com"
github: "https://github.com/Tinkerers-Labs/mischief-ui"
registry: "https://ui.tinkererslabs.com/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 234
generated_at: "2026-09-21T01:50:16.753Z"
---

# @mischief

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.

## Links

- Website: https://ui.tinkererslabs.com
- GitHub: https://github.com/Tinkerers-Labs/mischief-ui
- Registry JSON: https://ui.tinkererslabs.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/mischief
- This file: https://sh4dcn.vercel.app/md/mischief.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.tinkererslabs.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.tinkererslabs.com/r/registry.json
bunx shadcn@latest add https://ui.tinkererslabs.com/r/registry.json
# clone the source repo
git clone https://github.com/Tinkerers-Labs/mischief-ui.git
# fetch the raw registry index
curl -s https://ui.tinkererslabs.com/r/registry.json
```

## Components (234)

| name | type | description | install |
| --- | --- | --- | --- |
| magnetic-tabs | registry:ui | Accessible tabs with a gently responsive label and a clear active surface. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/magnetic-tabs.json` |
| elastic-slider | registry:ui | An accessible value slider with restrained physical feedback at its limits. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/elastic-slider.json` |
| hold-button | registry:ui | A confirmation button that completes after a deliberate pointer hold and remains accessible from a keyboard. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/hold-button.json` |
| shift-button | registry:ui | A call-to-action button that trades its leading icon for a directional cue. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shift-button.json` |
| impossible-checkbox | registry:ui | A playful checkbox that a determined bear refuses to leave on. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/impossible-checkbox.json` |
| floating-index | registry:ui | A compact floating outline that tracks reading progress and the active section. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/floating-index.json` |
| command-palette | registry:ui | A search dialog over anything you can list, opened from a keyboard shortcut. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/command-palette.json` |
| scroll-to-top-button | registry:ui | A floating shortcut that appears after someone moves down a long page or scroll container and returns them to the top. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scroll-to-top-button.json` |
| save-bar | registry:ui | A bar that exists only while a form has unsaved changes. It says so, saves, confirms, and leaves. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/save-bar.json` |
| install-command | registry:ui | A switchable install line for a library, with the runner and installer kept apart. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/install-command.json` |
| copy-for-ai | registry:ui | Hands a documentation page to an assistant as markdown. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/copy-for-ai.json` |
| table-of-contents | registry:ui | A page outline that marks the section the reader is in. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/table-of-contents.json` |
| file-upload | registry:ui | A file picker and dropzone with validation, a visible queue, and optional progress, cancel, and retry handling. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-upload.json` |
| file-thumbnail | registry:ui | A compact image preview with automatic browser File support, loading, and failure states. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-thumbnail.json` |
| conversation | registry:ui | A thread scroll container that follows a streaming reply and yields to the reader. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/conversation.json` |
| message | registry:ui | One turn in a thread, with role, avatar, timestamp, and reachable actions. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/message.json` |
| prompt-input | registry:ui | A growing composer that sends on Enter and becomes a stop button while streaming. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/prompt-input.json` |
| suggestions | registry:ui | A scrollable row of prompts to start or continue a conversation with. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/suggestions.json` |
| questionnaire | registry:ui | Multi-step questions an agent asks before starting, with single, multiple, and freeform answers. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/questionnaire.json` |
| ask-ai | registry:ui | A source-aware handoff that opens a prepared prompt in an AI assistant or copies it for another one. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/ask-ai.json` |
| streaming-text | registry:ui | Text that arrives a piece at a time from an async source, with sentence-level announcements. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/streaming-text.json` |
| thinking-state | registry:ui | A status row for work in progress, with a live elapsed timer and optional reasoning. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/thinking-state.json` |
| tool-call | registry:ui | A compact record of one tool invocation with its input and output behind a disclosure. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tool-call.json` |
| agent-checklist | registry:ui | A task list whose items change state as work proceeds, announcing only what changed. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/agent-checklist.json` |
| inline-citations | registry:ui | Numbered markers inside generated text, each linking to its entry in a source list. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/inline-citations.json` |
| bounding-boxes | registry:ui | Selectable regions drawn over a page image from normalized coordinates. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/bounding-boxes.json` |
| annotation-layer | registry:ui | Notes attached to regions of a page, created by dragging. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/annotation-layer.json` |
| redaction | registry:ui | Mark regions to black out, with a reveal that states it is only a preview. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/redaction.json` |
| page-navigator | registry:ui | A rail of page thumbnails for moving through a long document. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/page-navigator.json` |
| file-tree | registry:ui | An expandable tree of folders and files with full keyboard navigation. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-tree.json` |
| document-splits | registry:ui | Mark where one scanned batch becomes several documents. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/document-splits.json` |
| schema-builder | registry:ui | Build the shape you want extracted from a document, with nesting. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/schema-builder.json` |
| signature-pad | registry:ui | Sign with a pointer on a canvas, or type a name instead. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/signature-pad.json` |
| csv-viewer | registry:ui | A sortable table for delimited data with a sticky header and a row cap. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/csv-viewer.json` |
| json-viewer | registry:ui | A collapsible tree for a JSON payload, navigable from the keyboard, where every row can hand you its path. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/json-viewer.json` |
| docx-viewer | registry:ui | Renders a Word document as elements built through a tag and attribute allowlist. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/docx-viewer.json` |
| pdf-viewer | registry:ui | Page-by-page PDF rendering on a canvas, with paging and zoom, over any loader. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/pdf-viewer.json` |
| markdown-blocks | registry:ui | Extracted document regions rendered as markdown, each one selectable. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/markdown-blocks.json` |
| signature-footer | registry:block | A composed site footer that ends with an oversized, low-contrast wordmark. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/signature-footer.json` |
| image-gallery | registry:block | A responsive image collection with grid and masonry layouts and an accessible lightbox. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/image-gallery.json` |
| code-block | registry:ui | A code panel with copy, optional line numbers, highlighted lines, and a collapse for anything long. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/code-block.json` |
| diff-view | registry:ui | A proposed change shown as a unified or side-by-side diff, with optional accept and reject controls. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/diff-view.json` |
| terminal-output | registry:ui | Streaming command output with stderr called out, an exit code, and scroll that follows without trapping you. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/terminal-output.json` |
| response-actions | registry:ui | The row under an answer: copy it, ask again, and rate it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/response-actions.json` |
| theme-toggle | registry:ui | A light and dark switch that survives a reload, follows the system when asked, and stays in step across tabs. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/theme-toggle.json` |
| accordion | registry:ui | A list of disclosures built on native details elements. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/accordion.json` |
| component-preview | registry:ui | A framed example with a tab for the source beside it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/component-preview.json` |
| kbd | registry:ui | A keyboard chord rendered with the right glyphs for the reader's platform. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/kbd.json` |
| voice-input | registry:ui | A microphone that draws what it is hearing, so a live one is told apart from a dead one at a glance. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/voice-input.json` |
| audio-player | registry:ui | A recording with its waveform, its position and its transcript, every line seekable. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/audio-player.json` |
| bar-visualizer | registry:ui | Frequency bars for audio on its way out, with the state said as well as drawn. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/bar-visualizer.json` |
| mic-selector | registry:ui | Picks the microphone, then proves the choice with a live level meter. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/mic-selector.json` |
| chain-of-thought | registry:ui | The steps an assistant took before answering, open while it works and folded away after. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/chain-of-thought.json` |
| web-preview | registry:ui | A sandboxed frame for whatever the agent just built, with the widths to check it at. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/web-preview.json` |
| video-player | registry:ui | Video with real captions, a keyboard-operable scrubber, and controls that survive full screen. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/video-player.json` |
| reviewable-diff | registry:block | A proposed change staged a hunk at a time, so a good patch with one bad hunk is not all or nothing. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/reviewable-diff.json` |
| subagent-tree | registry:ui | Several agents working at once, nested under whoever handed the work down. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/subagent-tree.json` |
| stopped-run | registry:ui | What the thread says after an answer ended early, keeping what it had already written. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stopped-run.json` |
| memory-chips | registry:ui | Everything an assistant remembers about someone, each one removable on its own. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/memory-chips.json` |
| orb | registry:ui | A sphere that carries what an assistant is doing, settled when idle and moving with the voice when there is one. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/orb.json` |
| matrix | registry:ui | A grid of cells lit from the bottom by a level, which reads as a piece of hardware rather than as a chart. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/matrix.json` |
| response | registry:ui | An assistant's answer as markdown, including while it is still half-written and briefly invalid. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/response.json` |
| transcript-viewer | registry:ui | A recording as text, where every line is also the way back to the moment it was said. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/transcript-viewer.json` |
| stop-generating | registry:ui | The control that interrupts a running answer. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stop-generating.json` |
| token-meter | registry:ui | How much of the context window is gone, split by what spent it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/token-meter.json` |
| model-picker | registry:ui | A model chooser with room for what each one is good at. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/model-picker.json` |
| source-card | registry:ui | One retrieved passage: where it came from, what it said, and how well it matched. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/source-card.json` |
| empty-state | registry:ui | What to show when there is nothing yet. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/empty-state.json` |
| footer-columns | registry:ui | Labelled columns of links, with the column count and the link rendering left to you. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-columns.json` |
| footer-row | registry:ui | A wrapping row of links under its own label, set apart by a dashed rule. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-row.json` |
| footer-wordmark | registry:ui | The oversized brand word that closes a page, drawn as texture rather than content. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-wordmark.json` |
| empty-row | registry:ui | One line saying a list came back empty, for a table, a list, or a popover. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/empty-row.json` |
| not-found | registry:ui | The page-scale empty state: a status, a heading you can read across a room, and somewhere to go. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/not-found.json` |
| image-grid | registry:ui | Thumbnails in even cells or masonry columns, with nothing but React behind them. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/image-grid.json` |
| lightbox | registry:ui | One image at a time, full bleed, with the rest of the set a key away. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/lightbox.json` |
| spinner | registry:ui | The smallest way to say something is happening, for a control that is working. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/spinner.json` |
| shimmering-text | registry:ui | Words with a light moving across them, for the wait between asking and the first token. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shimmering-text.json` |
| skeleton | registry:ui | A placeholder the shape of what is coming, so the page does not jump when it arrives. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/skeleton.json` |
| status-pill | registry:ui | A dot and a few words: operational, degraded, closed. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/status-pill.json` |
| copy-button | registry:ui | Copies a value and says whether it worked, including when the clipboard refuses. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/copy-button.json` |
| secret-field | registry:ui | An API key or token: hidden until asked for, copied whole either way. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/secret-field.json` |
| pagination | registry:ui | Page numbers with gaps where the run is broken, as buttons or as your own links. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/pagination.json` |
| side-panel | registry:ui | A pane that comes in from the side: an inspector, a filter set, a row's detail. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/side-panel.json` |
| render-surface | registry:ui | A canvas that sizes itself, sleeps when it is off screen, and holds still when motion is reduced. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/render-surface.json` |
| aurora-field | registry:ui | A drifting gradient backdrop built from the colours already in your theme. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/aurora-field.json` |
| grain-overlay | registry:ui | Film grain for any panel, which also hides the banding in a wide gradient. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/grain-overlay.json` |
| spotlight-card | registry:ui | A card that catches a light following the pointer, across a whole grid at once. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/spotlight-card.json` |
| constellation-field | registry:ui | Drifting points joined by lines, brightening around the pointer. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/constellation-field.json` |
| lattice-field | registry:ui | A grid of dots that parts around the pointer and falls apart when pressed, then climbs back into line. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/lattice-field.json` |
| burst | registry:ui | A short burst of pieces for the moment something finally completes. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/burst.json` |
| shader-surface | registry:ui | Four shader backdrops, each taking its two colours from your theme. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shader-surface.json` |
| displacement-image | registry:ui | Two images crossing by pushing their pixels through the same noise. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/displacement-image.json` |
| scene-hero | registry:ui | A lit three-dimensional object behind a headline, steered by the pointer. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scene-hero.json` |
| scroll-scene | registry:ui | Turns the scrolling of a tall element into a number, without rendering the page to do it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scroll-scene.json` |
| reveal | registry:ui | Moves its children in when they arrive on screen, and never decides whether they are there. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/reveal.json` |
| split-text | registry:ui | A heading animated one character, word, or line at a time, announced as one sentence. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/split-text.json` |
| marquee | registry:ui | A row that runs on its own, seamlessly, and turns back into an ordinary scrolling row for anyone who asked for less motion. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/marquee.json` |
| number-ticker | registry:ui | Counts to a number rather than replacing it, in any currency or format. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/number-ticker.json` |
| tilt-card | registry:ui | A card that leans toward the pointer as though it were a physical object. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tilt-card.json` |
| connection-beam | registry:ui | A line between two elements with something travelling along it, measured from the elements rather than given as coordinates. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/connection-beam.json` |
| cursor-trail | registry:ui | A fading mark behind the pointer, drawn only inside its own box. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/cursor-trail.json` |
| metaballs | registry:ui | Blobs that merge as they meet, taking their two colours from your theme. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/metaballs.json` |
| dither-image | registry:ui | A photograph reduced to two theme colours through an ordered dither. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/dither-image.json` |
| ascii-image | registry:ui | A photograph redrawn as characters, painted once and then left alone. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/ascii-image.json` |
| wireframe-globe | registry:ui | A wireframe world with places marked on it, and the same places written out underneath. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/wireframe-globe.json` |
| presence-field | registry:ui | An ambient backdrop that carries what an assistant is doing, and settles rather than snaps. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/presence-field.json` |
| stream-glow | registry:ui | An edge that breathes along a region while tokens land in it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stream-glow.json` |
| scrub-bar | registry:ui | The seek control on its own: a slider that happens to be a timeline, announced in minutes and seconds. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scrub-bar.json` |
| otp-input | registry:ui | A one time code, one box per character, where pasting the whole code works. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/otp-input.json` |
| tag-input | registry:ui | An input that turns what you typed into a removable tag. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tag-input.json` |
| combobox | registry:ui | A searchable select that holds one choice or several. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/combobox.json` |
| sortable-list | registry:ui | A list reordered by dragging a handle, or from the keyboard without one. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/sortable-list.json` |
| resizable-panels | registry:ui | Two panels and a divider that can be dragged or driven from the keyboard. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/resizable-panels.json` |
| stepper | registry:ui | Where someone is in something with a beginning and an end. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stepper.json` |
| avatar-stack | registry:ui | Overlapping faces with a count for the rest, and the names underneath. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/avatar-stack.json` |
| timeline | registry:ui | Things that happened, in the order they happened, with each state said aloud. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/timeline.json` |
| data-table | registry:ui | Typed rows with custom cells, column widths you set or the reader drags, sorting that is one property to switch on, and keyed selection. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/data-table.json` |
| accordion-demo | registry:example | A worked example of Accordion: A list of disclosures built on native details elements, so find-in-page and the browser do the work. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/accordion-demo.json` |
| agent-checklist-demo | registry:example | A worked example of Agent Checklist: A task list whose items change state as work proceeds, announcing what changed instead of re-reading the whole list. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/agent-checklist-demo.json` |
| annotation-layer-demo | registry:example | A worked example of Annotation Layer: Notes attached to regions of a page. Drag to add one, select to read it, and the coordinates stay relative to the page ra… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/annotation-layer-demo.json` |
| ascii-image-demo | registry:example | A worked example of ASCII Image: A photograph redrawn as characters. The grid is worked out once and kept, so each frame is a single copy rather than thousands… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/ascii-image-demo.json` |
| ask-ai-demo | registry:example | A worked example of Ask AI: Hand someone a prepared, source-aware prompt in the AI assistant they already use, or let them copy it for another one. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/ask-ai-demo.json` |
| audio-player-demo | registry:example | A worked example of Audio Player: A recording with its shape, its position and its words, so a voice note can be read as well as heard. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/audio-player-demo.json` |
| aurora-field-demo | registry:example | A worked example of Aurora Field: A drifting gradient backdrop for a hero or an empty state, built from the colours already in your theme rather than from a pa… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/aurora-field-demo.json` |
| avatar-stack-demo | registry:example | A worked example of Avatar Stack: Overlapping faces with a count for the rest, and the names underneath as a real list. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/avatar-stack-demo.json` |
| bar-visualizer-demo | registry:example | A worked example of Bar Visualizer: Frequency bars for audio on its way out, the counterpart to the trace a microphone draws on the way in. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/bar-visualizer-demo.json` |
| bounding-boxes-demo | registry:example | A worked example of Bounding Boxes: Selectable regions drawn over a page image from normalized coordinates, for showing an agent exactly where an answer came f… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/bounding-boxes-demo.json` |
| burst-demo | registry:example | A worked example of Burst: A short burst of pieces for the moment something finally completes. It draws nothing until it is fired and stops as soon as the last… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/burst-demo.json` |
| chain-of-thought-demo | registry:example | A worked example of Chain of Thought: The steps an assistant took before answering, open while it is working and folded away once it is done. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/chain-of-thought-demo.json` |
| code-block-demo | registry:example | A worked example of Code Block: A code panel with copy, optional line numbers, highlighted lines, and a collapse for anything long. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/code-block-demo.json` |
| combobox-demo | registry:example | A worked example of Combobox: A field that narrows a list as you type, and holds one choice or several as removable chips. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/combobox-demo.json` |
| command-palette-demo | registry:example | A worked example of Command Palette: A search dialog over anything you can list, opened from a keyboard shortcut, with ranked matches and hidden keywords. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/command-palette-demo.json` |
| component-preview-demo | registry:example | A worked example of Component Preview: A framed example with a tab for the source beside it, and the live one still running when you switch back. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/component-preview-demo.json` |
| connection-beam-demo | registry:example | A worked example of Connection Beam: A line between two elements with something travelling along it, measured from the elements rather than given as coordinate… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/connection-beam-demo.json` |
| constellation-field-demo | registry:example | A worked example of Constellation Field: Drifting points joined by lines when they come close, brightening and swelling around the pointer. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/constellation-field-demo.json` |
| conversation-demo | registry:example | A worked example of Conversation: The scroll container a thread lives in. It follows a streaming reply to the bottom, and stops the moment the reader scrolls u… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/conversation-demo.json` |
| copy-button-demo | registry:example | A worked example of Copy Button: Copies a value and says whether it worked, including when the clipboard refuses. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/copy-button-demo.json` |
| copy-for-ai-demo | registry:example | A worked example of Copy for AI: Hands the page to an assistant as markdown, by clipboard, by link, or by opening it somewhere that can read it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/copy-for-ai-demo.json` |
| csv-viewer-demo | registry:example | A worked example of CSV Viewer: A real table for delimited data, with sortable columns, a sticky header, and a row cap so a large file cannot lock the page. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/csv-viewer-demo.json` |
| cursor-trail-demo | registry:example | A worked example of Cursor Trail: A fading mark behind the pointer, drawn only inside its own box and only while the pointer is in it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/cursor-trail-demo.json` |
| data-table-demo | registry:example | A worked example of Data Table: Typed rows with cells you write, column widths you set or the reader drags, sorting that is one property to switch on, and sele… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/data-table-demo.json` |
| diff-view-demo | registry:example | A worked example of Diff View: A proposed change shown as a unified or side-by-side diff, with optional accept and reject controls. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/diff-view-demo.json` |
| displacement-image-demo | registry:example | 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 pr… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/displacement-image-demo.json` |
| dither-image-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/dither-image-demo.json` |
| document-splits-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/document-splits-demo.json` |
| docx-viewer-demo | registry:example | 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 li… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/docx-viewer-demo.json` |
| elastic-slider-demo | registry:example | 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… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/elastic-slider-demo.json` |
| empty-row-demo | registry:example | A worked example of Empty Row: One line saying a list came back empty, for a table, a list, or a popover. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/empty-row-demo.json` |
| empty-state-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/empty-state-demo.json` |
| file-thumbnail-demo | registry:example | A worked example of File Thumbnail: A compact image preview for attachments, upload queues, and file lists. Browser image files work without any setup. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-thumbnail-demo.json` |
| file-tree-demo | registry:example | A worked example of File Tree: An expandable tree of folders and files with full keyboard navigation and correct tree semantics. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-tree-demo.json` |
| file-upload-demo | registry:example | 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, can… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/file-upload-demo.json` |
| floating-index-demo | registry:example | A worked example of Floating Index: A compact outline for long pages. It keeps the active section and reading progress visible without becoming another permane… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/floating-index-demo.json` |
| footer-columns-demo | registry:example | A worked example of Footer Columns: Labelled columns of links, with the column count and the link rendering left to you. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-columns-demo.json` |
| footer-row-demo | registry:example | A worked example of Footer Row: A wrapping row of links under its own label, set apart by a dashed rule. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-row-demo.json` |
| footer-wordmark-demo | registry:example | A worked example of Footer Wordmark: The oversized brand word that closes a page, drawn as texture rather than content. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/footer-wordmark-demo.json` |
| grain-overlay-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/grain-overlay-demo.json` |
| hold-button-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/hold-button-demo.json` |
| image-gallery-demo | registry:example | A worked example of Image Gallery: A responsive image collection with equal and masonry layouts, plus a lightbox that handles focus, keyboard navigation, and s… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/image-gallery-demo.json` |
| image-grid-demo | registry:example | A worked example of Image Grid: Thumbnails in even cells or masonry columns, with nothing but React behind them. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/image-grid-demo.json` |
| impossible-checkbox-demo | registry:example | 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 harmle… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/impossible-checkbox-demo.json` |
| inline-citations-demo | registry:example | A worked example of Inline Citations: Numbered markers placed inside generated text, each linking to its entry in a source list underneath. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/inline-citations-demo.json` |
| install-command-demo | registry:example | A worked example of Install Command: The install line for a library, switchable between package managers, with the runner and the installer kept apart. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/install-command-demo.json` |
| json-viewer-demo | registry:example | 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. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/json-viewer-demo.json` |
| kbd-demo | registry:example | A worked example of Kbd: A keyboard chord rendered with the right glyphs for the reader's platform, and spoken in words. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/kbd-demo.json` |
| lattice-field-demo | registry:example | A worked example of Lattice Field: A grid of dots that parts around the pointer and falls apart when pressed, then climbs back into line. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/lattice-field-demo.json` |
| lightbox-demo | registry:example | A worked example of Lightbox: One image at a time, full bleed, with the rest of the set a key away. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/lightbox-demo.json` |
| magnetic-tabs-demo | registry:example | A worked example of Magnetic Tabs: Familiar tabs with a gentle pull toward the pointer. Selection stays clear and keyboard navigation remains immediate. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/magnetic-tabs-demo.json` |
| markdown-blocks-demo | registry:example | A worked example of Markdown Blocks: Extracted document regions rendered as markdown, each one selectable so it can be tied back to where it came from. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/markdown-blocks-demo.json` |
| marquee-demo | registry:example | A worked example of Marquee: A row that runs on its own, seamlessly, and turns back into an ordinary scrolling row for anyone who asked for less motion. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/marquee-demo.json` |
| matrix-demo | registry:example | A worked example of Matrix: A grid of cells lit from the bottom by a level, which reads as a piece of hardware rather than as a chart. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/matrix-demo.json` |
| memory-chips-demo | registry:example | A worked example of Memory Chips: Everything an assistant has been told to remember about someone, each one removable on its own. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/memory-chips-demo.json` |
| message-demo | registry:example | A worked example of Message: One turn in a thread, with a role, an optional avatar and timestamp, and actions that stay reachable without a pointer. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/message-demo.json` |
| metaballs-demo | registry:example | A worked example of Metaballs: Blobs that swell into one another as they meet, taking their two colours from your theme. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/metaballs-demo.json` |
| mic-selector-demo | registry:example | A worked example of Mic Selector: Chooses which microphone to use, then settles the question by lighting a meter from the one you chose. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/mic-selector-demo.json` |
| model-picker-demo | registry:example | A worked example of Model Picker: A model chooser that has room for what each one is good at, and full keyboard control. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/model-picker-demo.json` |
| not-found-demo | registry:example | A worked example of Not Found: The page-scale empty state: a status, a heading you can read across a room, and somewhere to go. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/not-found-demo.json` |
| number-ticker-demo | registry:example | A worked example of Number Ticker: Counts to a number rather than replacing it, in whatever currency or format you asked for. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/number-ticker-demo.json` |
| orb-demo | registry:example | A worked example of Orb: A sphere that carries what an assistant is doing, settled when idle and moving with the voice when there is one. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/orb-demo.json` |
| otp-input-demo | registry:example | A worked example of OTP Input: A one time code, one box per character, where pasting the whole code into any box fills the rest. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/otp-input-demo.json` |
| page-navigator-demo | registry:example | A worked example of Page Navigator: A rail of page thumbnails for moving through a long document, with arrow-key navigation and a clear active page. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/page-navigator-demo.json` |
| pagination-demo | registry:example | A worked example of Pagination: Page numbers with gaps where the run is broken, as buttons or as your own links. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/pagination-demo.json` |
| pdf-viewer-demo | registry:example | A worked example of PDF Viewer: Page-by-page PDF rendering on a canvas, with paging and zoom, over any loader you give it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/pdf-viewer-demo.json` |
| presence-field-demo | registry:example | A worked example of Presence Field: An ambient backdrop that carries what the assistant is doing. It changes colour and pace with the state, and settles into e… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/presence-field-demo.json` |
| prompt-input-demo | registry:example | A worked example of Prompt Input: The composer. Grows with the message, sends on Enter, keeps Shift+Enter for a new line, and turns into a stop button while a … | `npx shadcn@latest add https://ui.tinkererslabs.com/r/prompt-input-demo.json` |
| questionnaire-demo | registry:example | A worked example of Questionnaire: The questions an agent asks before it starts. One at a time, with single or multiple answers, an open answer alongside them,… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/questionnaire-demo.json` |
| redaction-demo | registry:example | A worked example of Redaction: Mark regions to black out before a document leaves the building, with a reveal that says plainly it is only a preview. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/redaction-demo.json` |
| render-surface-demo | registry:example | A worked example of Render Surface: The canvas the other scenes are drawn on. It stays the size of its box, sleeps when nobody is looking at it, and holds stil… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/render-surface-demo.json` |
| resizable-panels-demo | registry:example | A worked example of Resizable Panels: Two panels and something to drag between them, where the divider is a real separator that also works from the keyboard. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/resizable-panels-demo.json` |
| response-actions-demo | registry:example | A worked example of Response Actions: The row under an answer: copy it, ask again, and rate it. Drops into the actions slot on Message. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/response-actions-demo.json` |
| response-demo | registry:example | A worked example of Response: An assistant's answer as markdown, including while it is still half-written and briefly invalid. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/response-demo.json` |
| reveal-demo | registry:example | A worked example of Reveal: Moves its children in when they arrive on screen. It changes how something arrives and never whether it is there. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/reveal-demo.json` |
| reviewable-diff-demo | registry:example | A worked example of Reviewable Diff: A proposed change reviewed a hunk at a time: take three of the seven, leave the rest, apply what you took. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/reviewable-diff-demo.json` |
| save-bar-demo | registry:example | A worked example of Save Bar: A bar that exists only while a form has unsaved changes. It says so, saves, confirms, and leaves. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/save-bar-demo.json` |
| scene-hero-demo | registry:example | A worked example of Scene Hero: A lit three-dimensional object behind a headline, steered by the pointer and coloured by the theme. The one component here that… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scene-hero-demo.json` |
| schema-builder-demo | registry:example | A worked example of Schema Builder: Build the shape you want extracted from a document. Fields carry a name, type, description, and requirement, and object and… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/schema-builder-demo.json` |
| scroll-scene-demo | registry:example | A worked example of Scroll Scene: Turns the scrolling of a tall element into a number between nought and one, published to a custom property and to a callback,… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scroll-scene-demo.json` |
| scroll-to-top-button-demo | registry:example | A worked example of Scroll to Top Button: A floating way back after someone has moved down a long page or scroll area. It stays hidden near the top. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scroll-to-top-button-demo.json` |
| scrub-bar-demo | registry:example | A worked example of Scrub Bar: The seek control on its own: a slider that happens to be a timeline, announced in minutes and seconds. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/scrub-bar-demo.json` |
| secret-field-demo | registry:example | A worked example of Secret Field: An API key or token: hidden until asked for, copied whole either way. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/secret-field-demo.json` |
| shader-surface-demo | registry:example | A worked example of Shader Surface: Four shader backdrops -- caustics, metal, plasma and ripple -- each taking its two colours from your theme, so the same sur… | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shader-surface-demo.json` |
| shift-button-demo | registry:example | A worked example of Shift Button: A call to action that trades its leading icon for a directional cue when someone approaches it. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shift-button-demo.json` |
| shimmering-text-demo | registry:example | A worked example of Shimmering Text: Words with a light moving across them, for the wait between asking and the first token. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/shimmering-text-demo.json` |
| side-panel-demo | registry:example | A worked example of Side Panel: A pane that comes in from the side: an inspector, a filter set, a row's detail. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/side-panel-demo.json` |
| signature-footer-demo | registry:example | A worked example of Signature Footer: A complete closing section with room for the useful links first and one oversized wordmark at the end. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/signature-footer-demo.json` |
| signature-pad-demo | registry:example | A worked example of Signature Pad: Sign with a pointer on a canvas, or type a name instead. Returns a PNG data URL or the typed text. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/signature-pad-demo.json` |
| skeleton-demo | registry:example | A worked example of Skeleton: A placeholder the shape of what is coming, so the page does not jump when it arrives. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/skeleton-demo.json` |
| sortable-list-demo | registry:example | A worked example of Sortable List: A list reordered by dragging a handle, or from the keyboard without one, where every move is announced. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/sortable-list-demo.json` |
| source-card-demo | registry:example | A worked example of Source Card: One retrieved passage: where it came from, what it said, and how well it matched. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/source-card-demo.json` |
| spinner-demo | registry:example | A worked example of Spinner: The smallest way to say something is happening, for a control that is working. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/spinner-demo.json` |
| split-text-demo | registry:example | A worked example of Split Text: A heading animated one character, word, or line at a time, and still announced as one sentence rather than as a pile of single … | `npx shadcn@latest add https://ui.tinkererslabs.com/r/split-text-demo.json` |
| spotlight-card-demo | registry:example | A worked example of Spotlight Card: A card that catches a light following the pointer, and can light every card in its grid from the same pointer at once. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/spotlight-card-demo.json` |
| status-pill-demo | registry:example | A worked example of Status Pill: A dot and a few words: operational, degraded, closed. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/status-pill-demo.json` |
| stepper-demo | registry:example | A worked example of Stepper: Where someone is in something with a beginning and an end, said in words as well as drawn. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stepper-demo.json` |
| stop-generating-demo | registry:example | A worked example of Stop Generating: The control that interrupts a running answer, with the time it has been going and Escape wired up. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stop-generating-demo.json` |
| stopped-run-demo | registry:example | A worked example of Stopped Run: What the thread says after an answer ended early, with whatever it had already written kept above the line. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stopped-run-demo.json` |
| stream-glow-demo | registry:example | A worked example of Stream Glow: An edge that breathes along a region while tokens land in it, and stops the moment they do. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/stream-glow-demo.json` |
| streaming-text-demo | registry:example | A worked example of Streaming Text: Text that arrives a piece at a time from an async source, with a cursor while it runs and sentence-level announcements for … | `npx shadcn@latest add https://ui.tinkererslabs.com/r/streaming-text-demo.json` |
| subagent-tree-demo | registry:example | A worked example of Subagent Tree: Several agents working at once, nested under whoever handed the work down, each with its own state and elapsed time. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/subagent-tree-demo.json` |
| suggestions-demo | registry:example | A worked example of Suggestions: A row of prompts to start or continue with, for the moment someone does not know what to ask. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/suggestions-demo.json` |
| table-of-contents-demo | registry:example | A worked example of Table of Contents: An outline of the page that keeps up with the reader, marking the section they are in as they scroll. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/table-of-contents-demo.json` |
| tag-input-demo | registry:example | A worked example of Tag Input: An input that turns what you typed into a removable tag, and gives the last one back when you press backspace on an empty field. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tag-input-demo.json` |
| terminal-output-demo | registry:example | A worked example of Terminal Output: Streaming command output with stderr called out, an exit code, and scroll that follows without trapping you. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/terminal-output-demo.json` |
| theme-toggle-demo | registry:example | A worked example of Theme Toggle: A light and dark switch that survives a reload, follows the system when asked, and stays in step across tabs. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/theme-toggle-demo.json` |
| thinking-state-demo | registry:example | A worked example of Thinking State: A status row for work in progress, with a live elapsed timer and optional reasoning behind a disclosure. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/thinking-state-demo.json` |
| tilt-card-demo | registry:example | A worked example of Tilt Card: A card that leans toward the pointer as though it were a physical object lying on the page. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tilt-card-demo.json` |
| timeline-demo | registry:example | A worked example of Timeline: Things that happened, in the order they happened, with the state of each one said aloud rather than left in a coloured dot. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/timeline-demo.json` |
| token-meter-demo | registry:example | A worked example of Token Meter: How much of the context window is gone, split by what spent it, and a warning before it runs out. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/token-meter-demo.json` |
| tool-call-demo | registry:example | A worked example of Tool Call: A compact record of one tool invocation: name, status, duration, and the input and output behind a disclosure. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/tool-call-demo.json` |
| transcript-viewer-demo | registry:example | A worked example of Transcript Viewer: A recording as text, where every line is also the way back to the moment it was said. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/transcript-viewer-demo.json` |
| video-player-demo | registry:example | A worked example of Video Player: Video with captions that can be turned on, a real scrubber, and controls that survive full screen. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/video-player-demo.json` |
| voice-input-demo | registry:example | A worked example of Voice Input: A microphone that draws what it is hearing, so a live one is told apart from a dead one at a glance. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/voice-input-demo.json` |
| web-preview-demo | registry:example | A worked example of Web Preview: A sandboxed frame for whatever the assistant just built, with the widths to check it at. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/web-preview-demo.json` |
| wireframe-globe-demo | registry:example | A worked example of Wireframe Globe: A wireframe world with places marked on it, arcs between them, and the same places written out underneath as text. | `npx shadcn@latest add https://ui.tinkererslabs.com/r/wireframe-globe-demo.json` |

## For AI agents

```text
You are adding components from @mischief to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/mischief.md) for the component list.
2. Fetch the machine-readable index: https://ui.tinkererslabs.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: mischief).
```