---
name: "@mizzle"
slug: "mizzle"
description: "Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license."
category: "Animated components"
tags: ["ai", "animation", "audio", "auth", "blocks", "buttons", "cards", "forms", "icons", "loaders", "media", "navigation", "overlays", "payments", "pro-available", "retro", "text-effects"]
framework: "react"
license: null
author: null
website: "https://mizzle.saddy.me"
github: null
registry: "https://mizzle.saddy.me/r/registry.json"
pro: true
pro_url: "https://mizzle.saddy.me/pricing"
github_stars: null
component_count: 214
generated_at: "2026-10-17T06:30:14.294Z"
---

# @mizzle

Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license.

## Links

- Website: https://mizzle.saddy.me
- Registry JSON: https://mizzle.saddy.me/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/mizzle
- This file: https://sh4dcn.vercel.app/md/mizzle.md
- Pro / pricing: https://mizzle.saddy.me/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://mizzle.saddy.me/r/registry.json
pnpm dlx shadcn@latest add https://mizzle.saddy.me/r/registry.json
bunx shadcn@latest add https://mizzle.saddy.me/r/registry.json
# fetch the raw registry index
curl -s https://mizzle.saddy.me/r/registry.json
```

## Components (214)

| name | type | description | install |
| --- | --- | --- | --- |
| confirmation | registry:ui | The agent asking for a yes before it does something: run a command, start a plan, touch a file. One line says what and why, two buttons answer, and once answer… | `npx shadcn@latest add https://mizzle.saddy.me/r/confirmation.json` |
| image-generation | registry:ui | A placeholder that becomes the picture. A grid of soft tiles moves in a pattern of your choosing while the image is made, takes on its colours the moment it ar… | `npx shadcn@latest add https://mizzle.saddy.me/r/image-generation.json` |
| loader | registry:ui | Sixteen dots in a square that swell and light up in a pattern: a scan, a wave, a twinkle, an orbit, a pulse, a spiral, rain or rising bars. Round, soft-cornere… | `npx shadcn@latest add https://mizzle.saddy.me/r/loader.json` |
| marker | registry:ui | A line in a conversation that is not a message: what the agent is doing, what it did, or a labelled break. | `npx shadcn@latest add https://mizzle.saddy.me/r/marker.json` |
| message-scroller | registry:ui | A transcript that only moves when the reader asks it to. A new prompt rises to the top with the end of the last answer still in view, the reply streams into th… | `npx shadcn@latest add https://mizzle.saddy.me/r/message-scroller.json` |
| orb | registry:ui | An orb of fine dots that shows what an agent is doing. The same dots rearrange for each step it goes through: listening, thinking, searching, connecting, compo… | `npx shadcn@latest add https://mizzle.saddy.me/r/orb.json` |
| outline | registry:ui | The questions asked so far, as a rail of marks at the edge of the transcript. The mark for the turn you are reading is longer; rest on the rail and the questio… | `npx shadcn@latest add https://mizzle.saddy.me/r/outline.json` |
| plan | registry:ui | A plan the agent proposes before it acts: a title, a line on what it changes, the scope in a few words, and numbered steps that arrive one by one with the file… | `npx shadcn@latest add https://mizzle.saddy.me/r/plan.json` |
| prompt-input | registry:ui | Where a prompt is written. It takes files from a picker, a drop or a paste, records voice notes with a glow that swells with your voice, opens a menu for / com… | `npx shadcn@latest add https://mizzle.saddy.me/r/prompt-input.json` |
| questionnaire | registry:ui | An agent asking before it acts, one question at a time, in the same tinted bubble as the rest of the conversation. Pick with a click or the number key shown at… | `npx shadcn@latest add https://mizzle.saddy.me/r/questionnaire.json` |
| reasoning | registry:ui | The model thinking out loud, kept to a small window. While it thinks the latest lines scroll up in steps under a shimmering label; when it is done it folds awa… | `npx shadcn@latest add https://mizzle.saddy.me/r/reasoning.json` |
| response | registry:ui | An answer as it streams. Each word comes out of a slight blur as it arrives, numbered citations become source chips you can hover, and the actions underneath c… | `npx shadcn@latest add https://mizzle.saddy.me/r/response.json` |
| shimmer | registry:ui | A band of light that passes over text while something is working. It is made from the text’s own colour, so it suits any text and anything inside it, icons inc… | `npx shadcn@latest add https://mizzle.saddy.me/r/shimmer.json` |
| sources | registry:ui | Where an answer came from. A row of site icons, a count and the first domains, opening into the full list: numbered to match the citations in the text, each wi… | `npx shadcn@latest add https://mizzle.saddy.me/r/sources.json` |
| suggestions | registry:ui | Prompts to try next, as pills or as a list of follow-ups. They arrive one after another so the eye reads them in order. | `npx shadcn@latest add https://mizzle.saddy.me/r/suggestions.json` |
| tasks | registry:ui | The to-do list an agent is working through. A ring fills as tasks finish, the one in progress shimmers over the file it is touching, a finished one keeps what … | `npx shadcn@latest add https://mizzle.saddy.me/r/tasks.json` |
| tool-call | registry:ui | What an agent did, one row per step. A step shimmers while it runs and draws a tick when it finishes; rows with output open to show it, and a group folds the w… | `npx shadcn@latest add https://mizzle.saddy.me/r/tool-call.json` |
| turn | registry:ui | One exchange: what you asked, then what the agent did and said. The prompt is a bubble on the right with its attachments above it and copy and edit on hover; t… | `npx shadcn@latest add https://mizzle.saddy.me/r/turn.json` |
| chat-divider | registry:ui | The quiet structure of a conversation: a line for each day, a line where the unread messages start, and a small note when someone joins or leaves. | `npx shadcn@latest add https://mizzle.saddy.me/r/chat-divider.json` |
| composer | registry:ui | Where a message is written. It grows with what you type, Enter sends, and the microphone turns into a send button as soon as there is something to send. | `npx shadcn@latest add https://mizzle.saddy.me/r/composer.json` |
| message-status | registry:ui | Where a sent message has got to: sending, sent, delivered, read, or not delivered. The clock fades into a tick, a second tick joins it, and read takes on colou… | `npx shadcn@latest add https://mizzle.saddy.me/r/message-status.json` |
| message | registry:ui | One message in a conversation: who sent it, the bubble, and what is said underneath. Messages from the same person run together, replies quote what they answer… | `npx shadcn@latest add https://mizzle.saddy.me/r/message.json` |
| poll | registry:ui | A question with a few answers, sent as a message. Tap one and the bars fill to each answer’s share, the percentages roll into place and the people who chose it… | `npx shadcn@latest add https://mizzle.saddy.me/r/poll.json` |
| reaction-picker | registry:ui | A row of emoji to react with. Each one lifts and grows a little under the pointer, and the ones you have already used are marked. | `npx shadcn@latest add https://mizzle.saddy.me/r/reaction-picker.json` |
| typing-indicator | registry:ui | Someone is writing. Three dots that rise and settle in turn inside a bubble, or a small pill that names who is typing. | `npx shadcn@latest add https://mizzle.saddy.me/r/typing-indicator.json` |
| voice-note | registry:ui | A recorded message in a chat bubble. The waveform fills as it plays, and the play button turns into pause in one movement. Pair it with Voice Recorder and it s… | `npx shadcn@latest add https://mizzle.saddy.me/r/voice-note.json` |
| voice-recorder | registry:ui | A record button that grows into a voice note as you speak. A warm glow drifts round its edge and swells with your voice, the bars build up beside it, and stopp… | `npx shadcn@latest add https://mizzle.saddy.me/r/voice-recorder.json` |
| data-grid-column-menu | registry:ui | The menu behind each Data Grid header: sort either way or as a second key, pin to the start or the end, reset the width and hide the column. The header's own l… | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-column-menu.json` |
| data-grid-filter | registry:ui | The Data Grid's filter bar. A popover picks a column and its value, and each filter becomes a chip whose operator and value can be changed on their own. Text, … | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-filter.json` |
| data-grid-footer | registry:ui | The strip under the Data Grid: which rows are showing, how many are selected, the count, sum, average, minimum and maximum of the selected cells, and paging wi… | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-footer.json` |
| data-grid-icons | registry:ui | The stroke icons the Data Grid's parts share, drawn on a 16px grid in the current text colour. | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-icons.json` |
| data-grid-row-controls | registry:ui | The controls that go in a Data Grid's own columns: a select-all and a per-row checkbox with shift-click ranges, a disclosure arrow for rows with sub-rows, and … | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-row-controls.json` |
| data-grid-selection-bar | registry:ui | A toolbar that rises over the foot of the Data Grid while rows are selected, with export, pin, an optional delete and a way to clear the selection. | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-selection-bar.json` |
| data-grid-toolbar | registry:ui | The strip above the Data Grid: a title and row count, a search field that opens from an icon, the column visibility menu, and a menu for CSV export, print and … | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-toolbar.json` |
| data-grid | registry:ui | A spreadsheet-style table on TanStack Table, assembled from the data pieces: toolbar with search and column picker, typed filters, the grid, a selection bar an… | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid.json` |
| dissolve | registry:ui | Make an element crumble into ash and drift off as smoke. A ragged edge crosses it, and everything the edge passes turns into fine grey dust, made from the elem… | `npx shadcn@latest add https://mizzle.saddy.me/r/dissolve.json` |
| dither | registry:ui | Light drawn in two colours. A slow field of light, or a photograph, rendered the way a one-bit screen would: every dot is ink or nothing, and the shades are ma… | `npx shadcn@latest add https://mizzle.saddy.me/r/dither.json` |
| glow | registry:ui | Soft coloured light that drifts around the inside edge of an element. It follows any rounded shape, brightens and quickens with a level you give it, such as a … | `npx shadcn@latest add https://mizzle.saddy.me/r/glow.json` |
| pixel-field | registry:ui | A field of pixels that blooms under the pointer. Inside a card or a button, small squares spread out from where the pointer came in, keep twinkling, and draw b… | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-field.json` |
| pixel-transition | registry:ui | Swap what is shown through a wall of pixels. Blocks cover the old content in dither order, the way old computers dissolved between screens, the content changes… | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-transition.json` |
| progressive-blur | registry:ui | A blur that gets stronger towards an edge, and a scroll area that wears one at each end: the ends blur and dissolve only while there is more to scroll that way… | `npx shadcn@latest add https://mizzle.saddy.me/r/progressive-blur.json` |
| checkbox | registry:ui | A box that ticks. The check draws itself in, and a parent checkbox shows a dash when only some of its children are on. | `npx shadcn@latest add https://mizzle.saddy.me/r/checkbox.json` |
| field | registry:ui | A label, a control, a hint and an error, wired together. The label names the control, the hint describes it, and the error appears under it with a short settle… | `npx shadcn@latest add https://mizzle.saddy.me/r/field.json` |
| form | registry:ui | The form that holds the fields. It validates with the browser’s own rules, shows errors where they belong, takes errors back from your server, and hands you th… | `npx shadcn@latest add https://mizzle.saddy.me/r/form.json` |
| input | registry:ui | A text input and a textarea that grows as you write. Quiet at rest, lifted on focus, red when wrong. | `npx shadcn@latest add https://mizzle.saddy.me/r/input.json` |
| number-field | registry:ui | A number you can type, step with the buttons, or nudge with the arrow keys, kept inside its limits. | `npx shadcn@latest add https://mizzle.saddy.me/r/number-field.json` |
| radio-group | registry:ui | Pick one of a few. The chosen ring fills and a dot grows from its centre. | `npx shadcn@latest add https://mizzle.saddy.me/r/radio-group.json` |
| select | registry:ui | Choose one option from a list. The trigger looks like an input; when there is room the list opens over it with the chosen option sitting where the trigger was,… | `npx shadcn@latest add https://mizzle.saddy.me/r/select.json` |
| switch | registry:ui | An on and off that takes effect at once. The thumb slides across and stretches a little while you hold it. | `npx shadcn@latest add https://mizzle.saddy.me/r/switch.json` |
| auth-diagram | registry:ui | Three ways to sign in on the left, one check in the middle, your app on the right. Each turn a different method sends a signal, the lock becomes a tick that dr… | `npx shadcn@latest add https://mizzle.saddy.me/r/auth-diagram.json` |
| diagram-glyphs | registry:ui | Sixteen marks drawn by hand for Diagram tiles on a 24 unit grid, in a line style and a solid style: app, database, mail, card, chart, key, phone, shield, bank,… | `npx shadcn@latest add https://mizzle.saddy.me/r/diagram-glyphs.json` |
| diagram | registry:ui | The parts the illustrations are made from: tiles, routes with ports, and a signal that travels them, all on one clock. Lay out your own in a few lines, with th… | `npx shadcn@latest add https://mizzle.saddy.me/r/diagram.json` |
| integrations-diagram | registry:ui | Your app in the middle and four services around it, joined by routes with small ports. An event comes in along one route, the app lights up, and the answer goe… | `npx shadcn@latest add https://mizzle.saddy.me/r/integrations-diagram.json` |
| payments-diagram | registry:ui | A card is charged, the payment clears, and three things follow: the money goes to the bank, a receipt goes out and your app is told. The coin turns into a tick… | `npx shadcn@latest add https://mizzle.saddy.me/r/payments-diagram.json` |
| pixel-reveal | registry:ui | An image that resolves out of big pixels. It arrives as a handful of coloured blocks and sharpens in steps, each one halving the blocks, until it is the pictur… | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-reveal.json` |
| video-hero | registry:ui | A banner for a show or a launch: the episode plays behind the words, blurred to a glow that fades to black at the sides. On top sit a title, a line about it, o… | `npx shadcn@latest add https://mizzle.saddy.me/r/video-hero.json` |
| video-player | registry:ui | A silent, looping preview that opens into a near full screen player. The player has the title and a link along the top, one row of controls along the bottom, a… | `npx shadcn@latest add https://mizzle.saddy.me/r/video-player.json` |
| accordion | registry:ui | Rows that open to show more. One thing moves: the panel’s height, on one short clock both ways, so rows trading places leave everything below them still and no… | `npx shadcn@latest add https://mizzle.saddy.me/r/accordion.json` |
| button | registry:ui | A button that feels like an object: light on its surface, a shadow that deepens under the pointer and closes up when pressed, a quick press and a slow release.… | `npx shadcn@latest add https://mizzle.saddy.me/r/button.json` |
| card | registry:ui | A soft tray around a raised surface, with concentric corners. As a link its surface lifts on hover and sinks on press, and its media breathes; it does not jump… | `npx shadcn@latest add https://mizzle.saddy.me/r/card.json` |
| dialog | registry:ui | A dialog built like the card: what you read sits on a raised surface, what you press sits under it on the tray. It comes towards you in 250ms and is gone in 15… | `npx shadcn@latest add https://mizzle.saddy.me/r/dialog.json` |
| link | registry:ui | A text link whose underline is drawn on the text: it draws in from the left, leaves to the right, and follows the words when they wrap. Four treatments, hover … | `npx shadcn@latest add https://mizzle.saddy.me/r/link.json` |
| menu | registry:ui | A menu of actions that grows out of the button that opened it and is gone the moment you choose. Items, ticks, choices, groups and key hints. Built on Base UI,… | `npx shadcn@latest add https://mizzle.saddy.me/r/menu.json` |
| tabs | registry:ui | Tabs whose selected chip tightens under a press, stretches towards the tab you pick, then gathers itself, with panels that drift in from the same side. A raise… | `npx shadcn@latest add https://mizzle.saddy.me/r/tabs.json` |
| toast | registry:ui | A short message that rises in from just below where it rests, out of a slight blur, and leaves the same small way. Newer toasts stack in front and older ones t… | `npx shadcn@latest add https://mizzle.saddy.me/r/toast.json` |
| toolbar | registry:ui | A row of controls that act on one thing: buttons, toggles, a choice of one, a link or an input. Arrow keys move between them, and where you pick one of a few t… | `npx shadcn@latest add https://mizzle.saddy.me/r/toolbar.json` |
| tooltip | registry:ui | A small label for a control. Give a row of controls one tooltip between them and it stays open as you move along: the label glides to the next control, changes… | `npx shadcn@latest add https://mizzle.saddy.me/r/tooltip.json` |
| reveal | registry:ui | Anything that arrives as it scrolls into view: a card, a paragraph, a section. It fades, rises a little and sharpens into focus; groups go one after another fr… | `npx shadcn@latest add https://mizzle.saddy.me/r/reveal.json` |
| dot-matrix | registry:ui | Text on a dot matrix, five dots wide and seven tall, like a departure board. Unlit dots stay faintly visible, and when the text changes the dots that differ fl… | `npx shadcn@latest add https://mizzle.saddy.me/r/dot-matrix.json` |
| highlight | registry:ui | A mark made over a word or a phrase: a highlighter that wraps with the text, or a pen stroke under, around or round a word. Each is drawn when it comes into vi… | `npx shadcn@latest add https://mizzle.saddy.me/r/highlight.json` |
| letter-swap | registry:ui | On hover each letter slides out and a copy slides in, one after another, optionally into a different word. Pure CSS: the stagger plays forward on enter and bac… | `npx shadcn@latest add https://mizzle.saddy.me/r/letter-swap.json` |
| number-roll | registry:ui | A number whose digits roll to their new value. Each digit is a reel behind a soft-edged window: it rolls the way the number moved, streaks while it is fast, an… | `npx shadcn@latest add https://mizzle.saddy.me/r/number-roll.json` |
| scramble-text | registry:ui | Text that resolves out of noise. A sweep crosses the string at a steady rate; characters behind it are final, characters ahead of it churn. Decoding, not glitc… | `npx shadcn@latest add https://mizzle.saddy.me/r/scramble-text.json` |
| signature | registry:ui | Draws a signature, or any hand-drawn SVG, stroke by stroke at a steady pen speed, lifting between strokes. Pen centrelines are stroked; filled outlines are rev… | `npx shadcn@latest add https://mizzle.saddy.me/r/signature.json` |
| split-text | registry:ui | Splits a string into words and characters you can style one by one. Words still wrap, spaces stay real, screen readers hear the sentence, and every piece knows… | `npx shadcn@latest add https://mizzle.saddy.me/r/split-text.json` |
| text-reveal | registry:ui | Text that arrives piece by piece: characters, words or lines. Each one fades, lifts a little and sharpens from a slight blur, so it reads as settling into focu… | `npx shadcn@latest add https://mizzle.saddy.me/r/text-reveal.json` |
| text-swap | registry:ui | Change a word without it blinking. The old word lifts away and blurs out as the new one rises in, and the space between them stretches to fit, so nothing besid… | `npx shadcn@latest add https://mizzle.saddy.me/r/text-swap.json` |
| typewriter | registry:ui | Types a list of phrases one after another, without the harshness: letters fade in and sharpen instead of popping, the rhythm is a little uneven like a person’s… | `npx shadcn@latest add https://mizzle.saddy.me/r/typewriter.json` |
| delete-button | registry:ui | A delete button you press and hold. A fill sweeps across it while the bin’s lid lifts; let go early and it drains back, hold to the end and it deletes. Holding… | `npx shadcn@latest add https://mizzle.saddy.me/r/delete-button.json` |
| dynamic-island | registry:ui | A black pill that changes shape to fit what it is showing. Give it a view key and some content: it springs to the new size, overshooting a touch when it grows,… | `npx shadcn@latest add https://mizzle.saddy.me/r/dynamic-island.json` |
| expandable-tabs | registry:ui | An icon bar whose active tab says its name, and whose page grows out of the bar. The label, the highlight and the shell move as one, on one clock. No animation… | `npx shadcn@latest add https://mizzle.saddy.me/r/expandable-tabs.json` |
| panel-menu | registry:ui | A menu built from stacked glass panels. Closed, it is a single bar. Open, the label flips, a tall body wipes down beneath it, and the link and language rows se… | `npx shadcn@latest add https://mizzle.saddy.me/r/panel-menu.json` |
| prediction-market | registry:ui | An order ticket for a yes or no market. Pick an outcome and a side, type an amount, and the shares, the payout and the return roll to their new values. Built f… | `npx shadcn@latest add https://mizzle.saddy.me/r/prediction-market.json` |
| tick-slider | registry:ui | A scroll progress indicator you can scrub. A slim red needle runs along a tray of hairline ticks as the page scrolls, and dragging the needle scrolls the page.… | `npx shadcn@latest add https://mizzle.saddy.me/r/tick-slider.json` |
| agent-demo | registry:block | Example usage of AI. | `npx shadcn@latest add https://mizzle.saddy.me/r/agent-demo.json` |
| confirmation-demo | registry:block | Example usage of Confirmation. | `npx shadcn@latest add https://mizzle.saddy.me/r/confirmation-demo.json` |
| image-generation-demo | registry:block | Example usage of Image Generation. | `npx shadcn@latest add https://mizzle.saddy.me/r/image-generation-demo.json` |
| image-generation-loading-demo | registry:block | Example usage of Image Generation. | `npx shadcn@latest add https://mizzle.saddy.me/r/image-generation-loading-demo.json` |
| image-generation-progress-demo | registry:block | Example usage of Image Generation. | `npx shadcn@latest add https://mizzle.saddy.me/r/image-generation-progress-demo.json` |
| loader-demo | registry:block | Example usage of Loader. | `npx shadcn@latest add https://mizzle.saddy.me/r/loader-demo.json` |
| loader-shapes-demo | registry:block | Example usage of Loader. | `npx shadcn@latest add https://mizzle.saddy.me/r/loader-shapes-demo.json` |
| loader-sizes-demo | registry:block | Example usage of Loader. | `npx shadcn@latest add https://mizzle.saddy.me/r/loader-sizes-demo.json` |
| marker-demo | registry:block | Example usage of Marker. | `npx shadcn@latest add https://mizzle.saddy.me/r/marker-demo.json` |
| message-scroller-demo | registry:block | Example usage of Message Scroller. | `npx shadcn@latest add https://mizzle.saddy.me/r/message-scroller-demo.json` |
| orb-colors-demo | registry:block | Example usage of Orb. | `npx shadcn@latest add https://mizzle.saddy.me/r/orb-colors-demo.json` |
| orb-demo | registry:block | Example usage of Orb. | `npx shadcn@latest add https://mizzle.saddy.me/r/orb-demo.json` |
| orb-status-demo | registry:block | Example usage of Orb. | `npx shadcn@latest add https://mizzle.saddy.me/r/orb-status-demo.json` |
| outline-demo | registry:block | Example usage of Outline. | `npx shadcn@latest add https://mizzle.saddy.me/r/outline-demo.json` |
| plan-demo | registry:block | Example usage of Plan. | `npx shadcn@latest add https://mizzle.saddy.me/r/plan-demo.json` |
| prompt-input-compact-demo | registry:block | Example usage of Prompt Input. | `npx shadcn@latest add https://mizzle.saddy.me/r/prompt-input-compact-demo.json` |
| prompt-input-demo | registry:block | Example usage of Prompt Input. | `npx shadcn@latest add https://mizzle.saddy.me/r/prompt-input-demo.json` |
| questionnaire-demo | registry:block | Example usage of Questionnaire. | `npx shadcn@latest add https://mizzle.saddy.me/r/questionnaire-demo.json` |
| reasoning-demo | registry:block | Example usage of Reasoning. | `npx shadcn@latest add https://mizzle.saddy.me/r/reasoning-demo.json` |
| reasoning-finished-demo | registry:block | Example usage of Reasoning. | `npx shadcn@latest add https://mizzle.saddy.me/r/reasoning-finished-demo.json` |
| response-demo | registry:block | Example usage of Response. | `npx shadcn@latest add https://mizzle.saddy.me/r/response-demo.json` |
| shimmer-demo | registry:block | Example usage of Shimmer. | `npx shadcn@latest add https://mizzle.saddy.me/r/shimmer-demo.json` |
| sources-demo | registry:block | Example usage of Sources. | `npx shadcn@latest add https://mizzle.saddy.me/r/sources-demo.json` |
| suggestions-demo | registry:block | Example usage of Suggestions. | `npx shadcn@latest add https://mizzle.saddy.me/r/suggestions-demo.json` |
| suggestions-list-demo | registry:block | Example usage of Suggestions. | `npx shadcn@latest add https://mizzle.saddy.me/r/suggestions-list-demo.json` |
| tasks-demo | registry:block | Example usage of Tasks. | `npx shadcn@latest add https://mizzle.saddy.me/r/tasks-demo.json` |
| tool-call-demo | registry:block | Example usage of Tool Call. | `npx shadcn@latest add https://mizzle.saddy.me/r/tool-call-demo.json` |
| tool-call-states-demo | registry:block | Example usage of Tool Call. | `npx shadcn@latest add https://mizzle.saddy.me/r/tool-call-states-demo.json` |
| turn-demo | registry:block | Example usage of Turn. | `npx shadcn@latest add https://mizzle.saddy.me/r/turn-demo.json` |
| chat-demo | registry:block | Example usage of Chat. | `npx shadcn@latest add https://mizzle.saddy.me/r/chat-demo.json` |
| chat-divider-demo | registry:block | Example usage of Chat Divider. | `npx shadcn@latest add https://mizzle.saddy.me/r/chat-divider-demo.json` |
| composer-demo | registry:block | Example usage of Composer. | `npx shadcn@latest add https://mizzle.saddy.me/r/composer-demo.json` |
| message-demo | registry:block | Example usage of Message. | `npx shadcn@latest add https://mizzle.saddy.me/r/message-demo.json` |
| message-status-demo | registry:block | Example usage of Message Status. | `npx shadcn@latest add https://mizzle.saddy.me/r/message-status-demo.json` |
| poll-demo | registry:block | Example usage of Poll. | `npx shadcn@latest add https://mizzle.saddy.me/r/poll-demo.json` |
| poll-multiple-demo | registry:block | Example usage of Poll. | `npx shadcn@latest add https://mizzle.saddy.me/r/poll-multiple-demo.json` |
| reaction-picker-demo | registry:block | Example usage of Reaction Picker. | `npx shadcn@latest add https://mizzle.saddy.me/r/reaction-picker-demo.json` |
| typing-indicator-demo | registry:block | Example usage of Typing Indicator. | `npx shadcn@latest add https://mizzle.saddy.me/r/typing-indicator-demo.json` |
| voice-note-demo | registry:block | Example usage of Voice Note. | `npx shadcn@latest add https://mizzle.saddy.me/r/voice-note-demo.json` |
| voice-recorder-demo | registry:block | Example usage of Voice Recorder. | `npx shadcn@latest add https://mizzle.saddy.me/r/voice-recorder-demo.json` |
| data-grid-basic-demo | registry:block | Example usage of Data Grid. | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-basic-demo.json` |
| data-grid-demo | registry:block | Example usage of Data Grid. | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-demo.json` |
| dissolve-demo | registry:block | Example usage of Dissolve. | `npx shadcn@latest add https://mizzle.saddy.me/r/dissolve-demo.json` |
| dither-demo | registry:block | Example usage of Dither. | `npx shadcn@latest add https://mizzle.saddy.me/r/dither-demo.json` |
| dither-image-demo | registry:block | Example usage of Dither. | `npx shadcn@latest add https://mizzle.saddy.me/r/dither-image-demo.json` |
| glow-demo | registry:block | Example usage of Glow. | `npx shadcn@latest add https://mizzle.saddy.me/r/glow-demo.json` |
| glow-palettes-demo | registry:block | Example usage of Glow. | `npx shadcn@latest add https://mizzle.saddy.me/r/glow-palettes-demo.json` |
| pixel-field-demo | registry:block | Example usage of Pixel Field. | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-field-demo.json` |
| pixel-transition-demo | registry:block | Example usage of Pixel Transition. | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-transition-demo.json` |
| pixel-transition-patterns-demo | registry:block | Example usage of Pixel Transition. | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-transition-patterns-demo.json` |
| progressive-blur-demo | registry:block | Example usage of Progressive Blur. | `npx shadcn@latest add https://mizzle.saddy.me/r/progressive-blur-demo.json` |
| progressive-blur-image-demo | registry:block | Example usage of Progressive Blur. | `npx shadcn@latest add https://mizzle.saddy.me/r/progressive-blur-image-demo.json` |
| checkbox-demo | registry:block | Example usage of Checkbox. | `npx shadcn@latest add https://mizzle.saddy.me/r/checkbox-demo.json` |
| field-demo | registry:block | Example usage of Field. | `npx shadcn@latest add https://mizzle.saddy.me/r/field-demo.json` |
| form-demo | registry:block | Example usage of Form. | `npx shadcn@latest add https://mizzle.saddy.me/r/form-demo.json` |
| input-demo | registry:block | Example usage of Input. | `npx shadcn@latest add https://mizzle.saddy.me/r/input-demo.json` |
| number-field-demo | registry:block | Example usage of Number Field. | `npx shadcn@latest add https://mizzle.saddy.me/r/number-field-demo.json` |
| radio-group-demo | registry:block | Example usage of Radio Group. | `npx shadcn@latest add https://mizzle.saddy.me/r/radio-group-demo.json` |
| select-demo | registry:block | Example usage of Select. | `npx shadcn@latest add https://mizzle.saddy.me/r/select-demo.json` |
| switch-demo | registry:block | Example usage of Switch. | `npx shadcn@latest add https://mizzle.saddy.me/r/switch-demo.json` |
| auth-diagram-demo | registry:block | Example usage of Authentication. | `npx shadcn@latest add https://mizzle.saddy.me/r/auth-diagram-demo.json` |
| diagram-cards-demo | registry:block | Example usage of Diagram. | `npx shadcn@latest add https://mizzle.saddy.me/r/diagram-cards-demo.json` |
| diagram-demo | registry:block | Example usage of Diagram. | `npx shadcn@latest add https://mizzle.saddy.me/r/diagram-demo.json` |
| diagram-glyphs-demo | registry:block | Example usage of Diagram. | `npx shadcn@latest add https://mizzle.saddy.me/r/diagram-glyphs-demo.json` |
| integrations-diagram-demo | registry:block | Example usage of Integrations. | `npx shadcn@latest add https://mizzle.saddy.me/r/integrations-diagram-demo.json` |
| payments-diagram-demo | registry:block | Example usage of Payments. | `npx shadcn@latest add https://mizzle.saddy.me/r/payments-diagram-demo.json` |
| pixel-reveal-demo | registry:block | Example usage of Pixel Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-reveal-demo.json` |
| pixel-reveal-hover-demo | registry:block | Example usage of Pixel Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/pixel-reveal-hover-demo.json` |
| video-hero-demo | registry:block | Example usage of Video Hero. | `npx shadcn@latest add https://mizzle.saddy.me/r/video-hero-demo.json` |
| video-player-demo | registry:block | Example usage of Video Player. | `npx shadcn@latest add https://mizzle.saddy.me/r/video-player-demo.json` |
| accordion-card-demo | registry:block | Example usage of Accordion. | `npx shadcn@latest add https://mizzle.saddy.me/r/accordion-card-demo.json` |
| accordion-demo | registry:block | Example usage of Accordion. | `npx shadcn@latest add https://mizzle.saddy.me/r/accordion-demo.json` |
| button-demo | registry:block | Example usage of Button. | `npx shadcn@latest add https://mizzle.saddy.me/r/button-demo.json` |
| button-status-demo | registry:block | Example usage of Button. | `npx shadcn@latest add https://mizzle.saddy.me/r/button-status-demo.json` |
| card-demo | registry:block | Example usage of Card. | `npx shadcn@latest add https://mizzle.saddy.me/r/card-demo.json` |
| dialog-demo | registry:block | Example usage of Dialog. | `npx shadcn@latest add https://mizzle.saddy.me/r/dialog-demo.json` |
| dialog-nested-demo | registry:block | Example usage of Dialog. | `npx shadcn@latest add https://mizzle.saddy.me/r/dialog-nested-demo.json` |
| link-demo | registry:block | Example usage of Link. | `npx shadcn@latest add https://mizzle.saddy.me/r/link-demo.json` |
| link-inline-demo | registry:block | Example usage of Link. | `npx shadcn@latest add https://mizzle.saddy.me/r/link-inline-demo.json` |
| menu-demo | registry:block | Example usage of Menu. | `npx shadcn@latest add https://mizzle.saddy.me/r/menu-demo.json` |
| menu-options-demo | registry:block | Example usage of Menu. | `npx shadcn@latest add https://mizzle.saddy.me/r/menu-options-demo.json` |
| tabs-demo | registry:block | Example usage of Tabs. | `npx shadcn@latest add https://mizzle.saddy.me/r/tabs-demo.json` |
| tabs-line-demo | registry:block | Example usage of Tabs. | `npx shadcn@latest add https://mizzle.saddy.me/r/tabs-line-demo.json` |
| toast-anchored-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-anchored-demo.json` |
| toast-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-demo.json` |
| toast-pill-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-pill-demo.json` |
| toast-position-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-position-demo.json` |
| toast-promise-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-promise-demo.json` |
| toast-status-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-status-demo.json` |
| toast-upsert-demo | registry:block | Example usage of Toast. | `npx shadcn@latest add https://mizzle.saddy.me/r/toast-upsert-demo.json` |
| toolbar-demo | registry:block | Example usage of Toolbar. | `npx shadcn@latest add https://mizzle.saddy.me/r/toolbar-demo.json` |
| toolbar-share-demo | registry:block | Example usage of Toolbar. | `npx shadcn@latest add https://mizzle.saddy.me/r/toolbar-share-demo.json` |
| toolbar-sort-demo | registry:block | Example usage of Toolbar. | `npx shadcn@latest add https://mizzle.saddy.me/r/toolbar-sort-demo.json` |
| toolbar-tools-demo | registry:block | Example usage of Toolbar. | `npx shadcn@latest add https://mizzle.saddy.me/r/toolbar-tools-demo.json` |
| tooltip-demo | registry:block | Example usage of Tooltip. | `npx shadcn@latest add https://mizzle.saddy.me/r/tooltip-demo.json` |
| reveal-demo | registry:block | Example usage of Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/reveal-demo.json` |
| reveal-effects-demo | registry:block | Example usage of Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/reveal-effects-demo.json` |
| reveal-scroll-demo | registry:block | Example usage of Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/reveal-scroll-demo.json` |
| dot-matrix-charset-demo | registry:block | Example usage of Dot Matrix. | `npx shadcn@latest add https://mizzle.saddy.me/r/dot-matrix-charset-demo.json` |
| dot-matrix-demo | registry:block | Example usage of Dot Matrix. | `npx shadcn@latest add https://mizzle.saddy.me/r/dot-matrix-demo.json` |
| highlight-demo | registry:block | Example usage of Highlight. | `npx shadcn@latest add https://mizzle.saddy.me/r/highlight-demo.json` |
| letter-swap-demo | registry:block | Example usage of Letter Swap. | `npx shadcn@latest add https://mizzle.saddy.me/r/letter-swap-demo.json` |
| number-roll-demo | registry:block | Example usage of Number Roll. | `npx shadcn@latest add https://mizzle.saddy.me/r/number-roll-demo.json` |
| number-roll-spin-demo | registry:block | Example usage of Number Roll. | `npx shadcn@latest add https://mizzle.saddy.me/r/number-roll-spin-demo.json` |
| scramble-text-demo | registry:block | Example usage of Scramble Text. | `npx shadcn@latest add https://mizzle.saddy.me/r/scramble-text-demo.json` |
| signature-demo | registry:block | Example usage of Signature. | `npx shadcn@latest add https://mizzle.saddy.me/r/signature-demo.json` |
| split-text-demo | registry:block | Example usage of Split Text. | `npx shadcn@latest add https://mizzle.saddy.me/r/split-text-demo.json` |
| text-reveal-demo | registry:block | Example usage of Text Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/text-reveal-demo.json` |
| text-reveal-effects-demo | registry:block | Example usage of Text Reveal. | `npx shadcn@latest add https://mizzle.saddy.me/r/text-reveal-effects-demo.json` |
| text-swap-demo | registry:block | Example usage of Text Swap. | `npx shadcn@latest add https://mizzle.saddy.me/r/text-swap-demo.json` |
| typewriter-demo | registry:block | Example usage of Typewriter. | `npx shadcn@latest add https://mizzle.saddy.me/r/typewriter-demo.json` |
| delete-button-demo | registry:block | Example usage of Delete Button. | `npx shadcn@latest add https://mizzle.saddy.me/r/delete-button-demo.json` |
| dynamic-island-demo | registry:block | Example usage of Dynamic Island. | `npx shadcn@latest add https://mizzle.saddy.me/r/dynamic-island-demo.json` |
| expandable-tabs-demo | registry:block | Example usage of Expandable Tabs. | `npx shadcn@latest add https://mizzle.saddy.me/r/expandable-tabs-demo.json` |
| panel-menu-demo | registry:block | Example usage of Panel Menu. | `npx shadcn@latest add https://mizzle.saddy.me/r/panel-menu-demo.json` |
| prediction-market-demo | registry:block | Example usage of Prediction Market. | `npx shadcn@latest add https://mizzle.saddy.me/r/prediction-market-demo.json` |
| tick-slider-demo | registry:block | Example usage of Tick Slider. | `npx shadcn@latest add https://mizzle.saddy.me/r/tick-slider-demo.json` |
| use-content-height | registry:hook | The live height of an element's content, for a container that animates its height to fit as the content opens, closes or grows. Includes a settled flag so a se… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-content-height.json` |
| use-data-grid-filters | registry:hook | Holds the Data Grid's filters and the actions that change them, keeping each operator in step with how many values it has. Works out every column's options, co… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-data-grid-filters.json` |
| use-debounced-callback | registry:hook | Wraps a callback so it runs once the calls stop for a given time, always with the newest arguments and the newest callback. A call still waiting when the compo… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-debounced-callback.json` |
| use-entrance | registry:hook | Decides when a CSS entrance plays: a frame after mount, or when the element scrolls into view. Returns a boolean to put on a data attribute; includes a small u… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-entrance.json` |
| use-latest | registry:hook | A ref that always holds the newest value of a prop or callback, updated after each render. Lets an effect or a subscription call the latest callback without re… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-latest.json` |
| use-merged-ref | registry:hook | Points several refs at one element, so a component can keep its own ref and still honour the one passed to it. Supports object refs, callback refs and React 19… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-merged-ref.json` |
| use-outgoing | registry:hook | Keeps the content that was just replaced for the length of its exit, so it can fade out in CSS while the new content fades in. Give it a key and what is shown … | `npx shadcn@latest add https://mizzle.saddy.me/r/use-outgoing.json` |
| use-reduced-motion | registry:hook | Whether the visitor has asked for reduced motion, as a boolean that is safe to read while rendering: false on the server and during hydration, then the real se… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-reduced-motion.json` |
| use-scroll-progress | registry:hook | How far the page, or a scroll container, has been scrolled, from 0 to 1, kept current as it scrolls or resizes, with a setter that scrolls it to a fraction. Ve… | `npx shadcn@latest add https://mizzle.saddy.me/r/use-scroll-progress.json` |
| bayer | registry:lib | The 8 by 8 Bayer matrix behind ordered dithering, as a threshold from 0 to 1 for any pixel. Compare a brightness with it to decide whether that pixel is on. | `npx shadcn@latest add https://mizzle.saddy.me/r/bayer.json` |
| data-grid-export | registry:lib | Gets data out of the Data Grid as the user sees it: CSV with spreadsheet-safe quoting, tab-separated text for the clipboard, and a print window that holds ever… | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-export.json` |
| data-grid-features | registry:lib | The TanStack Table features the Data Grid is built on, registered once, with the table, column and row types every part of the grid is written against and the … | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-features.json` |
| data-grid-filters | registry:lib | The logic under the Data Grid's filter bar: the five data types a column can be filtered as, the operators each one takes and how they negate and widen, the fu… | `npx shadcn@latest add https://mizzle.saddy.me/r/data-grid-filters.json` |

## For AI agents

```text
You are adding components from @mizzle to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/mizzle.md) for the component list.
2. Fetch the machine-readable index: https://mizzle.saddy.me/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: mizzle).
```