# devl

> devl (https://devl.dev) is a free, open-source catalogue of 277 React components, blocks, screens, motion pieces and illustrations built on coss ui (Base UI + Tailwind CSS v4). Every item is one TypeScript file: install it with the shadcn CLI, or read its source and adapt it. Use devl when building or restyling React or Next.js UI, to start from a working piece or borrow its patterns.

## How to install

1. Set up coss ui once: `npx shadcn@latest init @coss/style`.
2. Add an item: `npx shadcn@latest add https://devl.dev/r/<slug>.json`. It installs components/<slug>.tsx plus its npm and coss ui dependencies. With `"@devl": "https://devl.dev/r/{name}.json"` in components.json's registries, `npx shadcn@latest add @devl/<slug>` works too.
3. Import the named export (PascalCase of the slug, e.g. `LiquidSlider` from `@/components/liquid-slider`). Every prop has a typed default.
4. Without shadcn: fetch https://devl.dev/raw/<slug>.tsx, save it as components/<slug>.tsx, install the listed npm packages, and add the listed coss ui components from https://coss.com/ui (or point the @/components/ui/* imports at your own kit). `cn` is clsx + tailwind-merge.

## For agents

- [MCP server](https://devl.dev/docs/mcp): Streamable HTTP at https://devl.dev/mcp, no auth. Tools: search_items, get_item, list_categories, suggest_for.
- [Agent skill](https://devl.dev/skill/SKILL.md): a SKILL.md that teaches an agent when and how to use devl. Setup: https://devl.dev/docs/skill
- [Markdown pages](https://devl.dev/components/liquid-slider.md): add .md to any item page (or send Accept: text/markdown) for its description, install command, usage example and full source.
- [llms-full.txt](https://devl.dev/llms-full.txt): every item with its usage example, in one file.
- [shadcn registry index](https://devl.dev/r/registry.json): every installable item in shadcn's registry format.

## Docs

- [Getting started](https://devl.dev/docs): install with the shadcn CLI, the @devl namespace, using devl without shadcn.
- [Claude Code](https://devl.dev/docs/claude), [Codex](https://devl.dev/docs/codex), [Cursor](https://devl.dev/docs/cursor), [VS Code](https://devl.dev/docs/vscode): connect the MCP server and skill to each editor.
- Theming: every preview has a theme panel (colour, radius, spacing, font) that exports CSS variables or a shadcn theme item.

## Components

- [Access Pass](https://devl.dev/components/access-pass): When an agent wants more access it hands you a boarding pass that says who, what and why; pick once, an hour or always, approve, and the stub tears off along the perforation into a little pass with a countdown and Revoke. Install: `npx shadcn@latest add https://devl.dev/r/access-pass.json` · Markdown with source: https://devl.dev/components/access-pass.md · npm: lucide-react, motion · coss ui: button, segmented-control
- [Account Card](https://devl.dev/components/account-card): The card behind your avatar: who you're signed in as, how far your profile has come and the one step to do next, plus your menu and theme. Install: `npx shadcn@latest add https://devl.dev/r/account-card.json` · Markdown with source: https://devl.dev/components/account-card.md · npm: lucide-react, motion · coss ui: kbd, segmented-control
- [Alert Rules](https://devl.dev/components/alert-rules): An alert you write as a sentence: when error rate is above 2% for at least 5 minutes, only for checkout in production, page the on-call. A 30-day timeline shows which past incidents it would have caught, and warns you before it gets noisy. Install: `npx shadcn@latest add https://devl.dev/r/alert-rules.json` · Markdown with source: https://devl.dev/components/alert-rules.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, select, switch
- [Backseat](https://devl.dev/components/backseat): Nudge an agent while it works: type a note and it joins the plan as soon as the current step wraps up, or hit Interrupt to stop it right where it is. Install: `npx shadcn@latest add https://devl.dev/r/backseat.json` · Markdown with source: https://devl.dev/components/backseat.md · npm: lucide-react, motion · coss ui: badge, button
- [Revenue Area](https://devl.dev/components/bklit-area-chart): bklit's area chart in a revenue card: a soft gradient fill, a 7/30/90-day switch, and a headline that follows your cursor to read out any day. Install: `npx shadcn@latest add https://ui.bklit.com/r/area-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-area-chart.md
- [Cloud Spend Bars](https://devl.dev/components/bklit-bar-chart): bklit's bar chart breaking monthly cloud spend into compute, storage and network against a budget line, with a switch that regroups the stack side by side and a tooltip that totals each month. Install: `npx shadcn@latest add https://ui.bklit.com/r/bar-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-bar-chart.md
- [Ticker Candlesticks](https://devl.dev/components/bklit-candlestick-chart): bklit's candlestick chart as a stock card: green and red sessions, a crosshair that takes the colour of the candle under it, OHLC in the tooltip and a 1M/3M range switch. Install: `npx shadcn@latest add https://ui.bklit.com/r/candlestick-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-candlestick-chart.md
- [Visitors Map](https://devl.dev/components/bklit-choropleth-chart): bklit's choropleth chart shading a world map by visitors per country, with a hover tooltip, a colour key, a top-countries list underneath, and proper loading and retry states while the map loads. Install: `npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-choropleth-chart.md
- [Orders Trend](https://devl.dev/components/bklit-composed-chart): bklit's composed chart pairing weekly order bars with a rolling-average line on one time axis, so the noise and the trend read together in a single tooltip. Install: `npx shadcn@latest add https://ui.bklit.com/r/composed-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-composed-chart.md
- [Checkout Funnel](https://devl.dev/components/bklit-funnel-chart): bklit's layered funnel chart walking visitors to paid: switch weeks to compare, hover a stage to see how many it kept and lost, and the biggest drop-off is called out underneath. Install: `npx shadcn@latest add https://ui.bklit.com/r/funnel-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-funnel-chart.md
- [Error Budget Gauge](https://devl.dev/components/bklit-gauge-chart): bklit's notched gauge reading out an SLO error budget per service: switch services and the number rolls while the notches refill, turning green, amber or red as the budget burns. Install: `npx shadcn@latest add https://ui.bklit.com/r/gauge-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-gauge-chart.md
- [Deploy Heatmap](https://devl.dev/components/bklit-heatmap-chart): bklit's calendar heatmap counting production deploys per day: quiet weekends, a visible change freeze, the busiest weekday up top, and a Less-to-More legend that dims in step with the cell you hover. Install: `npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-heatmap-chart.md
- [Active Users Line](https://devl.dev/components/bklit-line-chart): bklit's line chart comparing weekly active users with last year: a quiet grey line for 2025, a dashed tail for this week's projection, and a legend that toggles the comparison. Install: `npx shadcn@latest add https://ui.bklit.com/r/line-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-line-chart.md
- [Live Traffic Line](https://devl.dev/components/bklit-live-line-chart): bklit's live line chart streaming requests per second: the line glides in as each sample lands, a value badge rides the tip, you can scrub back to any second, and pause freezes the window to read it. Install: `npx shadcn@latest add https://ui.bklit.com/r/live-line-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-live-line-chart.md
- [Storage Donut](https://devl.dev/components/bklit-pie-chart): bklit's pie chart as a storage donut: slices grow on hover, the centre rolls to the slice you're on, and the legend list and the chart highlight each other both ways. Install: `npx shadcn@latest add https://ui.bklit.com/r/pie-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-pie-chart.md
- [Model Eval Radar](https://devl.dev/components/bklit-radar-chart): bklit's radar chart comparing two models across six evals: the big model's reach against the small one's speed and cost, with a legend that lifts one polygon and reads out its scores. Install: `npx shadcn@latest add https://ui.bklit.com/r/radar-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-radar-chart.md
- [Target Rings](https://devl.dev/components/bklit-ring-chart): bklit's ring chart tracking quarterly revenue targets: one ring per goal, a centre that switches to the ring you hover, and a legend that lights up its ring in return. Install: `npx shadcn@latest add https://ui.bklit.com/r/ring-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-ring-chart.md
- [Signup Flow Sankey](https://devl.dev/components/bklit-sankey-chart): bklit's sankey chart following a month of sessions from each channel to paid, trial ended or bounced, with gradient links that light up every path through what you hover and a tooltip that gives each flow's share. Install: `npx shadcn@latest add https://ui.bklit.com/r/sankey-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-sankey-chart.md
- [Build Times Scatter](https://devl.dev/components/bklit-scatter-chart): bklit's scatter chart as a CI strip plot: every build a jittered dot, green under a dashed target line and red over it, with the commit and branch in the tooltip and p50/p95 up top. Install: `npx shadcn@latest add https://ui.bklit.com/r/scatter-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-scatter-chart.md
- [KPI Sparklines](https://devl.dev/components/bklit-sparkline): bklit's sparklines in a four-tile KPI overview: area, line and bar minis coloured by whether the trend is good, with each tile's number following your cursor to any day. Install: `npx shadcn@latest add https://ui.bklit.com/r/sparkline.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-sparkline.md
- [Cost Sunburst](https://devl.dev/components/bklit-sunburst-chart): bklit's sunburst chart breaking a month of cloud costs down by team and service: click a team or its chip to zoom in, read any slice in the header, and step back out with the path above or the centre. Install: `npx shadcn@latest add https://ui.bklit.com/r/sunburst-chart.json` (by bklit, MIT). Markdown: https://devl.dev/components/bklit-sunburst-chart.md
- [Branch Graph](https://devl.dev/components/branch-graph): A git log drawn as a graph: each branch gets its own coloured lane, merges sweep in on smooth curves, refs and tags sit on their commits, and hovering a row slides a detail card along with you. Install: `npx shadcn@latest add https://devl.dev/r/branch-graph.json` · Markdown with source: https://devl.dev/components/branch-graph.md · npm: lucide-react, motion
- [Browser Tabs](https://devl.dev/components/browser-tabs): A browser tab strip: drag tabs to reorder, close one and its neighbours slide in under your pointer, pin from the right-click menu, and scroll when the strip overflows. Install: `npx shadcn@latest add https://devl.dev/r/browser-tabs.json` · Markdown with source: https://devl.dev/components/browser-tabs.md · npm: lucide-react, motion · coss ui: context-menu
- [Card Pile](https://devl.dev/components/card-pile): Notifications stacked like a small deck of cards: flick the top one away, or press Delete, and the next one steps forward. Install: `npx shadcn@latest add https://devl.dev/r/card-pile.json` · Markdown with source: https://devl.dev/components/card-pile.md · npm: lucide-react, motion · coss ui: button
- [Cart Drawer](https://devl.dev/components/cart-drawer): A slide-over bag with quantity steppers, line totals and subtotal that roll digit by digit, a free-shipping bar that fills as you add, and a friendly empty state. Install: `npx shadcn@latest add https://devl.dev/r/cart-drawer.json` · Markdown with source: https://devl.dev/components/cart-drawer.md · npm: lucide-react, motion · coss ui: button
- [Chat Branches](https://devl.dev/components/chat-branches): A conversation you can fork from any message, with a little branch map up top that shows every path you tried and hops between them in one click. Install: `npx shadcn@latest add https://devl.dev/r/chat-branches.json` · Markdown with source: https://devl.dev/components/chat-branches.md · npm: lucide-react, motion
- [Code Block](https://devl.dev/components/code-block): A code viewer with file tabs, hand-rolled syntax colour, click-to-highlight lines, a diff view that works out the +/− itself, wrap and copy, and long files that fold behind a fade. Install: `npx shadcn@latest add https://devl.dev/r/code-block.json` · Markdown with source: https://devl.dev/components/code-block.md · npm: lucide-react, motion · coss ui: toggle, tooltip
- [Code Entry](https://devl.dev/components/code-entry): A six-digit code field with a ring that glides from slot to slot, room to paste the whole code, a small shake when it's wrong and slots that flow together into a “Verified” pill when it's right. Install: `npx shadcn@latest add https://devl.dev/r/code-entry.json` · Markdown with source: https://devl.dev/components/code-entry.md · npm: lucide-react, motion · coss ui: spinner
- [Cohort Grid](https://devl.dev/components/cohort-grid): A retention triangle by signup week: hover or arrow through any cell to light its row and column, read it against the average, and flip between percentages and head counts. Install: `npx shadcn@latest add https://devl.dev/r/cohort-grid.json` · Markdown with source: https://devl.dev/components/cohort-grid.md · npm: motion · coss ui: tabs
- [Colour Field](https://devl.dev/components/colour-field): An OKLCH colour picker that shows you the real shape of sRGB for each hue, tells you how the colour reads on white and black, and copies it as OKLCH or hex. Install: `npx shadcn@latest add https://devl.dev/r/colour-field.json` · Markdown with source: https://devl.dev/components/colour-field.md · npm: lucide-react, motion · coss ui: button
- [Connection Card](https://devl.dev/components/connection-card): Everything one connected service needs on a single card, its key, its site and its time zone, with a save bar that only turns up once you've changed something. Install: `npx shadcn@latest add https://devl.dev/r/connection-card.json` · Markdown with source: https://devl.dev/components/connection-card.md · npm: lucide-react, motion · coss ui: button, input-group, kbd, select, spinner, switch
- [Connection Lost](https://devl.dev/components/connection-lost): An offline banner for apps: it counts the changes kept on the device, rolls a retry countdown with backoff, shows liquid dots while reconnecting, then turns into Back online with a drawn check and slides away. Install: `npx shadcn@latest add https://devl.dev/r/connection-lost.json` · Markdown with source: https://devl.dev/components/connection-lost.md · npm: lucide-react, motion · coss ui: button
- [Connector Search](https://devl.dev/components/connector-search): Type to find a service, step through with the arrow keys, and open one to check how its sync is doing or connect it right there. Install: `npx shadcn@latest add https://devl.dev/r/connector-search.json` · Markdown with source: https://devl.dev/components/connector-search.md · npm: lucide-react, motion · coss ui: badge, button, kbd
- [Constellation](https://devl.dev/components/constellation): Your agents and the tools they reach for, drawn as a small constellation: each call and its answer travel the line as a spark, busy lines glow brighter, and an agent that needs you turns amber with Approve right underneath. Install: `npx shadcn@latest add https://devl.dev/r/constellation.json` · Markdown with source: https://devl.dev/components/constellation.md · npm: lucide-react, motion · coss ui: button
- [Conveyor](https://devl.dev/components/conveyor): A job queue on a little conveyor belt: jobs drop on, ride into whichever worker frees up and land in Done or Failed, and when a rate limit hits the belt stops while the backlog chart shows the pile-up and the drain. Install: `npx shadcn@latest add https://devl.dev/r/conveyor.json` · Markdown with source: https://devl.dev/components/conveyor.md · npm: lucide-react, motion
- [Coupon Field](https://devl.dev/components/coupon-field): A promo code field that checks your code, then either folds it into a tag while the savings line slides in and the total rolls down, or shakes once and says exactly why it failed. Install: `npx shadcn@latest add https://devl.dev/r/coupon-field.json` · Markdown with source: https://devl.dev/components/coupon-field.md · npm: lucide-react, motion · coss ui: spinner
- [Credit Gauge](https://devl.dev/components/credit-gauge): See where this month's credits went: a split bar by category with a warning line and a hard limit, daily spend against budget, and a plan button that gets more insistent as you close in on the cap. Install: `npx shadcn@latest add https://devl.dev/r/credit-gauge.json` · Markdown with source: https://devl.dev/components/credit-gauge.md · npm: lucide-react, motion · coss ui: badge, button
- [Cron Builder](https://devl.dev/components/cron-builder): Edit a cron expression field by field or with friendly controls, read it back as a plain sentence, see the next five runs in your timezone update as you type, and get told exactly why a schedule is invalid or can never run. Install: `npx shadcn@latest add https://devl.dev/r/cron-builder.json` · Markdown with source: https://devl.dev/components/cron-builder.md · npm: lucide-react, motion · coss ui: tabs
- [Departures](https://devl.dev/components/departures): An airport departures board for your agents: each row flips letter by letter as work boards, runs, gets delayed or lands, hand-offs show as connecting flights, and the one waiting on you glows amber with an Approve button. Install: `npx shadcn@latest add https://devl.dev/r/departures.json` · Markdown with source: https://devl.dev/components/departures.md · npm: lucide-react, motion · coss ui: button
- [Deploy Pipeline](https://devl.dev/components/deploy-pipeline): Install, build, test and deploy as stages that light up and connect as they pass, live timers, a log peek that follows the running stage, a failed stage you can retry in place, and the preview URL as a chip when it’s ready. Install: `npx shadcn@latest add https://devl.dev/r/deploy-pipeline.json` · Markdown with source: https://devl.dev/components/deploy-pipeline.md · npm: lucide-react, motion · coss ui: button
- [Donut Legend](https://devl.dev/components/donut-legend): A donut and its legend wired both ways: point at a slice or a row and the slice swells, the rest step back and the centre figure rolls to it; click a row to take it out of the total. Install: `npx shadcn@latest add https://devl.dev/r/donut-legend.json` · Markdown with source: https://devl.dev/components/donut-legend.md · npm: motion
- [Draft Review](https://devl.dev/components/draft-review): An email the assistant wrote for you to check before it goes: change who it's to or how it sounds, tweak the words, and send with a few seconds to take it back. Install: `npx shadcn@latest add https://devl.dev/r/draft-review.json` · Markdown with source: https://devl.dev/components/draft-review.md · npm: lucide-react, motion · coss ui: button, segmented-control
- [Drift Chart](https://devl.dev/components/drift-chart): An agent's plan drawn as dashed outlines with the real work filling in over them: when a step runs long it spills into amber, nudges everything after it to the right and drags the finish line with it. Install: `npx shadcn@latest add https://devl.dev/r/drift-chart.json` · Markdown with source: https://devl.dev/components/drift-chart.md · npm: lucide-react, motion
- [Drip Badge](https://devl.dev/components/drip-badge): A notification count made of liquid: a new one makes a droplet drip off the bottom, reading one pinches a piece off the side, and the number rolls either way. Install: `npx shadcn@latest add https://devl.dev/r/drip-badge.json` · Markdown with source: https://devl.dev/components/drip-badge.md · npm: motion
- [Drip Tabs](https://devl.dev/components/drip-tabs): Vertical settings tabs where the highlight runs down the rail like a bead of water, trailing a little drop that catches up and sinks back in. Install: `npx shadcn@latest add https://devl.dev/r/drip-tabs.json` · Markdown with source: https://devl.dev/components/drip-tabs.md · npm: @base-ui/react, motion
- [Droplet Button](https://devl.dev/components/droplet-button): A pill button that squashes when you press it and, as you let go, flicks a little crown of droplets from right where you pressed, then swallows them back up. Install: `npx shadcn@latest add https://devl.dev/r/droplet-button.json` · Markdown with source: https://devl.dev/components/droplet-button.md · npm: @base-ui/react, class-variance-authority, motion
- [Env Editor](https://devl.dev/components/env-editor): Environment variables as a table with a column per environment: secrets masked until you reveal them, click-to-edit cells, paste a whole .env to bulk import, and every unsaved edit tinted until you save or discard. Install: `npx shadcn@latest add https://devl.dev/r/env-editor.json` · Markdown with source: https://devl.dev/components/env-editor.md · npm: lucide-react, motion · coss ui: button, select, tooltip
- [Facets](https://devl.dev/components/facets): Filters tucked into collapsible checkbox groups and echoed above as chips you can pop off one by one, with search, Clear all and full arrow-key control. Install: `npx shadcn@latest add https://devl.dev/r/facets.json` · Markdown with source: https://devl.dev/components/facets.md · npm: lucide-react, motion · coss ui: checkbox
- [File Tree](https://devl.dev/components/file-tree): A project tree that feels like your editor: arrow keys to open folders, git changes marked in colour, F2 to rename and drag to tidy things up. Install: `npx shadcn@latest add https://devl.dev/r/file-tree.json` · Markdown with source: https://devl.dev/components/file-tree.md · npm: lucide-react, motion · coss ui: kbd
- [Fill-in Prompts](https://devl.dev/components/fill-in-prompts): Saved prompts you fill in right inside the sentence, each blank growing with its text in its own colour, with quick picks for common answers and a Use button that waits until every gap is filled. Install: `npx shadcn@latest add https://devl.dev/r/fill-in-prompts.json` · Markdown with source: https://devl.dev/components/fill-in-prompts.md · npm: lucide-react, motion · coss ui: button
- [Filter Bar](https://devl.dev/components/filter-bar): Linear-style filter chips you build from one menu: Status is not Done, Labels include Bug, Assignee is me. Click any part of a chip to change it, press F to add one, Backspace to drop it, and the issue list re-sorts itself as you go. Install: `npx shadcn@latest add https://devl.dev/r/filter-bar.json` · Markdown with source: https://devl.dev/components/filter-bar.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, kbd, menu, tooltip
- [Flag Board](https://devl.dev/components/flag-board): Feature flags per environment: flip a flag, drag its rollout and see how many people that is, target segments with chips, and a kill switch you have to press and hold, with undo, before it turns everything off. Install: `npx shadcn@latest add https://devl.dev/r/flag-board.json` · Markdown with source: https://devl.dev/components/flag-board.md · npm: lucide-react, motion · coss ui: button, menu, slider, switch, tabs
- [Flag Playground](https://devl.dev/components/flag-playground): Paste a user as JSON and watch every flag decide, rule by rule: each condition ticks or crosses, the winning rule lights up, later ones grey out, and the served variant swaps in. Broken JSON and wrong types get called out instead of quietly failing. Install: `npx shadcn@latest add https://devl.dev/r/flag-playground.json` · Markdown with source: https://devl.dev/components/flag-playground.md · npm: @qnot/core, lucide-react, motion · coss ui: textarea
- [Flag Targeting](https://devl.dev/components/flag-targeting): Targeting rules for a feature flag, per environment: if beta and in Europe serve the new checkout, roll out to 10% of everyone else, fall back when it's off, and see who gets what across 2,000 simulated users while you edit. Install: `npx shadcn@latest add https://devl.dev/r/flag-targeting.json` · Markdown with source: https://devl.dev/components/flag-targeting.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, menu, select, slider, switch, tabs
- [Flame Profile](https://devl.dev/components/flame-profile): An agent run as a flame graph, one stacked frame per call and as wide as it took; switch the lens to tokens or cost and the frames spring to their new sizes, click any frame to zoom in, and the slowest one is flagged for you. Install: `npx shadcn@latest add https://devl.dev/r/flame-profile.json` · Markdown with source: https://devl.dev/components/flame-profile.md · npm: lucide-react, motion · coss ui: segmented-control
- [Footnoted Answer](https://devl.dev/components/footnoted-answer): An answer whose footnotes really point somewhere: hover a number and its sentence lights up in the source's colour, click it and the quoted passage unfolds with the matching words marked. Install: `npx shadcn@latest add https://devl.dev/r/footnoted-answer.json` · Markdown with source: https://devl.dev/components/footnoted-answer.md · npm: lucide-react, motion
- [Funnel](https://devl.dev/components/funnel): A conversion funnel where each bar keeps a hatched ghost of what the step before had, so drop-off reads at a glance; flip between counts and percentages and hover a step for its channel split. Install: `npx shadcn@latest add https://devl.dev/r/funnel.json` · Markdown with source: https://devl.dev/components/funnel.md · npm: lucide-react, motion · coss ui: tabs
- [Ghostwriters](https://devl.dev/components/ghostwriters): A shared draft with a few ghostwriters in it: each agent's cursor glides in with its name, picks a phrase and types its suggestion right there in the text, and you keep or toss each one, or let them settle on their own. Install: `npx shadcn@latest add https://devl.dev/r/ghostwriters.json` · Markdown with source: https://devl.dev/components/ghostwriters.md · npm: lucide-react, motion · coss ui: badge, button
- [Go / No-go](https://devl.dev/components/go-no-go): A clear yes or no for risky agent actions that shows the exact command or diff, answers to Y and N, and folds into a one-line receipt you can undo. Install: `npx shadcn@latest add https://devl.dev/r/go-no-go.json` · Markdown with source: https://devl.dev/components/go-no-go.md · npm: lucide-react, motion · coss ui: badge, button, kbd
- [Handoff Card](https://devl.dev/components/handoff-card): Pass work to a teammate with the summary, open questions and links in one card; when they accept, it flips over to show who owns it now. Install: `npx shadcn@latest add https://devl.dev/r/handoff-card.json` · Markdown with source: https://devl.dev/components/handoff-card.md · npm: lucide-react, motion · coss ui: button
- [Incident Banner](https://devl.dev/components/incident-banner): A dismissible status banner that moves through investigating, identified, monitoring and resolved: its colour, icon and progress track change with each update, and the timeline unfolds underneath. Install: `npx shadcn@latest add https://devl.dev/r/incident-banner.json` · Markdown with source: https://devl.dev/components/incident-banner.md · npm: lucide-react, motion · coss ui: button
- [Invite Teammates](https://devl.dev/components/invite-teammates): Paste a whole list of emails and they sort themselves into chips, each with its own role, with typos caught before anyone gets a broken invite. Install: `npx shadcn@latest add https://devl.dev/r/invite-teammates.json` · Markdown with source: https://devl.dev/components/invite-teammates.md · npm: lucide-react, motion · coss ui: button, menu, select, switch
- [JSON Explorer](https://devl.dev/components/json-explorer): A JSON tree you can actually read: types in colour, key and item counts, inline previews of folded branches, copy-any-path, and a search that opens the tree down to every match and steps through them. Install: `npx shadcn@latest add https://devl.dev/r/json-explorer.json` · Markdown with source: https://devl.dev/components/json-explorer.md · npm: lucide-react, motion · coss ui: input-group, tooltip
- [Latency Histogram](https://devl.dev/components/latency-histogram): Request latency as a histogram with p50, p95 and p99 marked on it; drag a brush across the bars (or Shift-arrow) to see how many requests fall in any window. Install: `npx shadcn@latest add https://devl.dev/r/latency-histogram.json` · Markdown with source: https://devl.dev/components/latency-histogram.md · npm: lucide-react, motion · coss ui: tabs
- [Launch List](https://devl.dev/components/launch-list): A getting-started list in tidy groups with a ring that fills as you go, where each task ticks and strikes through once it's done. Install: `npx shadcn@latest add https://devl.dev/r/launch-list.json` · Markdown with source: https://devl.dev/components/launch-list.md · npm: lucide-react, motion
- [Launcher](https://devl.dev/components/launcher): A search button that grows into a keyboard launcher, with grouped actions and their shortcuts, your recent picks, a highlight that glides as you arrow through and pages you can step into. Install: `npx shadcn@latest add https://devl.dev/r/launcher.json` · Markdown with source: https://devl.dev/components/launcher.md · npm: lucide-react, motion · coss ui: kbd
- [Leaderboard](https://devl.dev/components/leaderboard): A ranked list that reshuffles itself when scores land: rows glide to their new places, gains flash beside the rolling totals, and your own row stays pinned below with the gap to the next person. Install: `npx shadcn@latest add https://devl.dev/r/leaderboard.json` · Markdown with source: https://devl.dev/components/leaderboard.md · npm: lucide-react, motion
- [Limit Reached](https://devl.dev/components/limit-reached): An in-app quota state for when a team runs out of AI runs: a full meter, a countdown to the reset with rolling digits, what still works and what's paused, and an upgrade that rescales the meter in place. Install: `npx shadcn@latest add https://devl.dev/r/limit-reached.json` · Markdown with source: https://devl.dev/components/limit-reached.md · npm: lucide-react, motion · coss ui: button
- [Liquid Checkbox](https://devl.dev/components/liquid-checkbox): A checkbox that fills with a little pour of liquid before the tick draws in, and drains when you uncheck it. A select-all box can sit part full as a list gets done. Install: `npx shadcn@latest add https://devl.dev/r/liquid-checkbox.json` · Markdown with source: https://devl.dev/components/liquid-checkbox.md · npm: @base-ui/react, motion
- [Liquid Progress](https://devl.dev/components/liquid-progress): A progress bar filled with liquid: each jump surges forward and the rounded front wobbles before it settles, and when there's no telling how long it'll take, a slug of it sloshes end to end. Install: `npx shadcn@latest add https://devl.dev/r/liquid-progress.json` · Markdown with source: https://devl.dev/components/liquid-progress.md · npm: motion
- [Liquid Segments](https://devl.dev/components/liquid-segments): A row of options where the selected pill is a soft blob that stretches, splits and joins back up as it slides, and you can drag it straight to the one you want. Install: `npx shadcn@latest add https://devl.dev/r/liquid-segments.json` · Markdown with source: https://devl.dev/components/liquid-segments.md · npm: motion
- [Liquid Slider](https://devl.dev/components/liquid-slider): A range slider whose thumb is a droplet: it stretches when you drag fast, melts into the filled track, and buds off a little value bubble while you hold it. Install: `npx shadcn@latest add https://devl.dev/r/liquid-slider.json` · Markdown with source: https://devl.dev/components/liquid-slider.md · npm: motion
- [Liquid Switch](https://devl.dev/components/liquid-switch): A toggle whose thumb stretches as it crosses, trails two droplets behind it and swallows them back up the moment it lands. Install: `npx shadcn@latest add https://devl.dev/r/liquid-switch.json` · Markdown with source: https://devl.dev/components/liquid-switch.md · npm: @base-ui/react, motion
- [Live Poll](https://devl.dev/components/live-poll): Write a poll right in the thread, then watch it fill: bars spring to their share as votes land, your pick stays marked, and closing it locks in the winner. Install: `npx shadcn@latest add https://devl.dev/r/live-poll.json` · Markdown with source: https://devl.dev/components/live-poll.md · npm: lucide-react, motion · coss ui: button
- [Log Stream](https://devl.dev/components/log-stream): Live logs that stay readable: level filters with counts, search that highlights as it filters, pause and follow with a “new lines” pill, and bursts of the same error folded into one “12 similar” row. Install: `npx shadcn@latest add https://devl.dev/r/log-stream.json` · Markdown with source: https://devl.dev/components/log-stream.md · npm: lucide-react, motion
- [Magnify Dock](https://devl.dev/components/magnify-dock): An app dock that swells under your pointer on a stiff spring, bounces apps as they launch, marks running ones with a dot, and works from the keyboard too. Install: `npx shadcn@latest add https://devl.dev/r/magnify-dock.json` · Markdown with source: https://devl.dev/components/magnify-dock.md · npm: motion
- [Mention Picker](https://devl.dev/components/mention-picker): Type @ in a message and a picker opens right at the caret with people, files and channels; what you pick lands as a token that moves and deletes as one piece. Install: `npx shadcn@latest add https://devl.dev/r/mention-picker.json` · Markdown with source: https://devl.dev/components/mention-picker.md · npm: lucide-react, motion
- [Metric Card](https://devl.dev/components/metric-card): One number with its own hand-drawn chart: switch the range and the lines reshape, scrub with a pointer or the arrow keys for exact figures, and the headline follows wherever you are. Install: `npx shadcn@latest add https://devl.dev/r/metric-card.json` · Markdown with source: https://devl.dev/components/metric-card.md · npm: lucide-react, motion · coss ui: tabs
- [Milestone Rail](https://devl.dev/components/milestone-rail): Your onboarding steps on a vertical rail that fills in as each one is done, with a progress bar and percentage keeping count up top. Install: `npx shadcn@latest add https://devl.dev/r/milestone-rail.json` · Markdown with source: https://devl.dev/components/milestone-rail.md · npm: lucide-react, motion · coss ui: button
- [Mini Sheet](https://devl.dev/components/mini-sheet): A pocket spreadsheet on coss ui table styles: drag or shift-select a range, type to edit, copy and paste straight from your sheets app, sort with rows that slide into order, and undo any of it. Install: `npx shadcn@latest add https://devl.dev/r/mini-sheet.json` · Markdown with source: https://devl.dev/components/mini-sheet.md · npm: lucide-react, motion · coss ui: button, kbd, table
- [Model Switcher](https://devl.dev/components/model-switcher): A model menu that helps you choose: hover a model to compare speed, quality and cost, turn on thinking to set the effort, and watch latency and price count to their new values, inline or from a pill trigger. Install: `npx shadcn@latest add https://devl.dev/r/model-switcher.json` · Markdown with source: https://devl.dev/components/model-switcher.md · npm: lucide-react, motion · coss ui: popover, slider, switch
- [Money Input](https://devl.dev/components/money-input): An amount field that groups digits as you type without ever losing your caret, follows each currency's own rules (yes, lakh grouping and zero-decimal yen), and keeps the limits in view. Install: `npx shadcn@latest add https://devl.dev/r/money-input.json` · Markdown with source: https://devl.dev/components/money-input.md · npm: lucide-react, motion · coss ui: menu
- [No Results](https://devl.dev/components/no-results): A search that comes up empty: it repeats the query, suggests the spelling fix, names the filter that is hiding matches and offers popular searches. Removing a filter springs the results back in. Install: `npx shadcn@latest add https://devl.dev/r/no-results.json` · Markdown with source: https://devl.dev/components/no-results.md · npm: lucide-react, motion · coss ui: button, input-group, menu
- [Notification Centre](https://devl.dev/components/notification-centre): A bell whose panel grows out of it: tabs for all, mentions and unread, grouped by day, approve requests inline, archive with undo and a badge that rolls as you read. Install: `npx shadcn@latest add https://devl.dev/r/notification-centre.json` · Markdown with source: https://devl.dev/components/notification-centre.md · npm: @base-ui/react, lucide-react, motion · coss ui: button, tabs
- [Nudge](https://devl.dev/components/nudge): One clear suggestion with an honest read on how sure it is, a couple of alternatives a tap away, and a short window to undo once you accept. Install: `npx shadcn@latest add https://devl.dev/r/nudge.json` · Markdown with source: https://devl.dev/components/nudge.md · npm: lucide-react, motion · coss ui: button
- [Order Tracker](https://devl.dev/components/order-tracker): A shipment card with a live ETA, a step rail whose current stop gently pulses, carrier scans that slide in as they arrive, and a small spray of confetti when it lands. Install: `npx shadcn@latest add https://devl.dev/r/order-tracker.json` · Markdown with source: https://devl.dev/components/order-tracker.md · npm: lucide-react, motion
- [Overflow Breadcrumb](https://devl.dev/components/overflow-breadcrumb): Breadcrumbs that fold their middle crumbs into a menu as space runs out and unfold as it returns, with a last crumb you can rename in place. Install: `npx shadcn@latest add https://devl.dev/r/overflow-breadcrumb.json` · Markdown with source: https://devl.dev/components/overflow-breadcrumb.md · npm: lucide-react, motion · coss ui: menu
- [Password Strength](https://devl.dev/components/password-strength): A password field that explains itself: it spots common words, years and keyboard runs, says how long a crack would take, and ticks off what's left in plain words. Install: `npx shadcn@latest add https://devl.dev/r/password-strength.json` · Markdown with source: https://devl.dev/components/password-strength.md · npm: lucide-react, motion
- [Payment Failed](https://devl.dev/components/payment-failed): A billing state for a declined renewal that names the card and the reason, counts down the grace period, and puts the fixes right there: retry, switch to a saved card or add a new one. Install: `npx shadcn@latest add https://devl.dev/r/payment-failed.json` · Markdown with source: https://devl.dev/components/payment-failed.md · npm: lucide-react, motion · coss ui: badge, button, collapsible, input, radio-group
- [People Picker](https://devl.dev/components/people-picker): Find people and teams in one grouped list, see what you typed highlighted in each match, add as many as you like as springy avatar chips, or create someone new right there. Install: `npx shadcn@latest add https://devl.dev/r/people-picker.json` · Markdown with source: https://devl.dev/components/people-picker.md · npm: lucide-react, motion · coss ui: avatar, combobox
- [Phase Builder](https://devl.dev/components/phase-builder): Lay out one stretch of a contract with its products, cadence, discount and minimum, and watch each month's invoice settle into place as you go. Install: `npx shadcn@latest add https://devl.dev/r/phase-builder.json` · Markdown with source: https://devl.dev/components/phase-builder.md · npm: lucide-react, motion · coss ui: badge, button, calendar, menu, number-field, popover, select, switch
- [Phone Field](https://devl.dev/components/phone-field): A phone number field with a searchable country picker: it formats the number the local way as you type, drops the habitual leading zero, and spots the country when you paste a +44. Install: `npx shadcn@latest add https://devl.dev/r/phone-field.json` · Markdown with source: https://devl.dev/components/phone-field.md · npm: @base-ui/react, lucide-react, motion
- [Plan Review](https://devl.dev/components/plan-review): Look over an agent's plan before it starts, rename, reorder or drop steps, then follow each one on its own timer and pick up again from the step that broke. Install: `npx shadcn@latest add https://devl.dev/r/plan-review.json` · Markdown with source: https://devl.dev/components/plan-review.md · npm: lucide-react, motion · coss ui: button
- [Presence Bar](https://devl.dev/components/presence-bar): A live facepile for shared docs: status rings, a rolling “viewing” count, faces that spring in and out, and a click to follow someone around the page. Install: `npx shadcn@latest add https://devl.dev/r/presence-bar.json` · Markdown with source: https://devl.dev/components/presence-bar.md · npm: lucide-react, motion · coss ui: tooltip
- [Project Pulse](https://devl.dev/components/project-pulse): A project in two lines that opens into its tasks: the ring gives every task its own arc in its owner's colour, tap a face to see just their work, and the status chip opens a picker. Install: `npx shadcn@latest add https://devl.dev/r/project-pulse.json` · Markdown with source: https://devl.dev/components/project-pulse.md · npm: lucide-react, motion · coss ui: avatar, menu
- [Prompt Bar](https://devl.dev/components/prompt-bar): A prompt box that grows as you type, with attachments, a model menu, an approval toggle and a mic that opens into a live level meter, plus a send button that only lights up when there's something to send. Install: `npx shadcn@latest add https://devl.dev/r/prompt-bar.json` · Markdown with source: https://devl.dev/components/prompt-bar.md · npm: lucide-react, motion · coss ui: menu
- [Quota Ring](https://devl.dev/components/quota-ring): A small usage ring that turns amber, then red, as it crosses its thresholds, with a tooltip that breaks the number down and counts down to the reset. Install: `npx shadcn@latest add https://devl.dev/r/quota-ring.json` · Markdown with source: https://devl.dev/components/quota-ring.md · npm: lucide-react, motion · coss ui: tooltip
- [Quote Reply](https://devl.dev/components/quote-reply): Highlight any part of a message to get a small Quote action; the snippet rides along in the composer until you send or dismiss it, and tapping it later jumps back to the source. Install: `npx shadcn@latest add https://devl.dev/r/quote-reply.json` · Markdown with source: https://devl.dev/components/quote-reply.md · npm: lucide-react, motion
- [Radial Gauge](https://devl.dev/components/radial-gauge): A dial with threshold bands and a target notch: the needle springs to each new reading, the fill takes the colour of the band it lands in, and hovering a band names its range. Install: `npx shadcn@latest add https://devl.dev/r/radial-gauge.json` · Markdown with source: https://devl.dev/components/radial-gauge.md · npm: motion
- [Range Calendar](https://devl.dev/components/range-calendar): Pick a range from two months side by side or a one-click preset, watch it preview as you hover, and line it up against the period before with a single tap. Install: `npx shadcn@latest add https://devl.dev/r/range-calendar.json` · Markdown with source: https://devl.dev/components/range-calendar.md · npm: lucide-react, motion · coss ui: button, calendar, switch
- [Reaction Picker](https://devl.dev/components/reaction-picker): Tap or hold the smiley and a tray of emoji pours out of it like liquid; slide to one and let go, and it lands on the message as a counted chip with yours lit up. Install: `npx shadcn@latest add https://devl.dev/r/reaction-picker.json` · Markdown with source: https://devl.dev/components/reaction-picker.md · npm: lucide-react, motion
- [Read Receipts](https://devl.dev/components/read-receipts): Tiny faces that glide down a conversation as people catch up, stacking under the last message they saw and folding into +N when it gets crowded. Install: `npx shadcn@latest add https://devl.dev/r/read-receipts.json` · Markdown with source: https://devl.dev/components/read-receipts.md · npm: lucide-react, motion · coss ui: tooltip
- [Recall](https://devl.dev/components/recall): Everything the assistant remembers about you, sorted into groups you can filter, with each memory yours to edit, pause or forget, and an undo if you slip. Install: `npx shadcn@latest add https://devl.dev/r/recall.json` · Markdown with source: https://devl.dev/components/recall.md · npm: lucide-react, motion · coss ui: switch
- [Redline](https://devl.dev/components/redline): Suggested edits marked up right inside your sentence, so you can keep or drop each one with a click or a key, and undo any call you change your mind on. Install: `npx shadcn@latest add https://devl.dev/r/redline.json` · Markdown with source: https://devl.dev/components/redline.md · npm: lucide-react, motion · coss ui: button, kbd
- [Reply Toolbar](https://devl.dev/components/reply-toolbar): The quiet row under an AI reply where every small action gives something back: copy draws a check, regenerate opens a version switcher, a thumb asks what worked and read aloud turns into an equaliser. Install: `npx shadcn@latest add https://devl.dev/r/reply-toolbar.json` · Markdown with source: https://devl.dev/components/reply-toolbar.md · npm: lucide-react, motion · coss ui: tooltip
- [Request Builder](https://devl.dev/components/request-builder): A small API playground: pick a method, type a URL whose :path params and query light up and turn into fields, toggle headers, check the JSON body as you type, then send for a status pill, timing, size and a pretty response. Install: `npx shadcn@latest add https://devl.dev/r/request-builder.json` · Markdown with source: https://devl.dev/components/request-builder.md · npm: lucide-react, motion · coss ui: button, checkbox, kbd, select, tabs
- [Review Feed](https://devl.dev/components/review-feed): Every comment on a page in one list: filter by open or resolved, tick one off and watch it slide away, or type / to summarise them all or turn them into tasks. Install: `npx shadcn@latest add https://devl.dev/r/review-feed.json` · Markdown with source: https://devl.dev/components/review-feed.md · npm: lucide-react, motion · coss ui: tabs
- [Rewind](https://devl.dev/components/rewind): Scrub back through everything an agent changed on one timeline: later changes ghost out and show what they'd go back to, the ones that can't be undone pin the playhead with a lock and say why, and Rewind to here comes with an Undo. Install: `npx shadcn@latest add https://devl.dev/r/rewind.json` · Markdown with source: https://devl.dev/components/rewind.md · npm: lucide-react, motion · coss ui: button
- [Routing Rules](https://devl.dev/components/routing-rules): Routing for a booking form: if company size is over 50 and the region is Europe, send it to Sales EU. Drag routes into order, see what share of last month each one caught, test a response to watch it land, and export the lot as one CASE WHEN. Install: `npx shadcn@latest add https://devl.dev/r/routing-rules.json` · Markdown with source: https://devl.dev/components/routing-rules.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, menu, select
- [Rule Builder](https://devl.dev/components/rule-builder): A nested query builder that reads like a sentence: Where, and, or, groups inside groups, drag or arrow-key rules into place, undo anything, and watch the parameterised SQL, JSON and plain English rewrite themselves as you type. Install: `npx shadcn@latest add https://devl.dev/r/rule-builder.json` · Markdown with source: https://devl.dev/components/rule-builder.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, menu, select, tabs, tooltip
- [Run List](https://devl.dev/components/run-list): Keep an eye on every background agent from one calm list, with live clocks, counts by status and a click to see the last few steps or sign off the work. Install: `npx shadcn@latest add https://devl.dev/r/run-list.json` · Markdown with source: https://devl.dev/components/run-list.md · npm: lucide-react, motion · coss ui: badge, button, tabs
- [Saved Views](https://devl.dev/components/saved-views): Filters you keep as named views on a crisp tab bar: tweak one and a dot says it's unsaved, then save, discard or fork it. Every view travels as a share link with the filter in the URL hash, and links that no longer fit the schema are cleaned up instead of breaking. Install: `npx shadcn@latest add https://devl.dev/r/saved-views.json` · Markdown with source: https://devl.dev/components/saved-views.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, menu, popover, tabs
- [Segment Builder](https://devl.dev/components/segment-builder): Describe an audience in a few rules and watch it form: the head count rolls, the size bar slides, and real people from your sample glide in and out of the list as each rule tightens or loosens. Install: `npx shadcn@latest add https://devl.dev/r/segment-builder.json` · Markdown with source: https://devl.dev/components/segment-builder.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, select
- [Shortcut Sheet](https://devl.dev/components/shortcut-sheet): A keyboard cheat sheet that slides up when you press ? inside your app: searchable by action or key, grouped, with sequences and Mac or Windows keys. Install: `npx shadcn@latest add https://devl.dev/r/shortcut-sheet.json` · Markdown with source: https://devl.dev/components/shortcut-sheet.md · npm: lucide-react, motion · coss ui: kbd
- [Signature Pad](https://devl.dev/components/signature-pad): A place to sign with a finger, mouse or pen: strokes come out smooth and swell with pressure or slow down, with undo, a typed fallback and a stamped, timestamped signed state. Install: `npx shadcn@latest add https://devl.dev/r/signature-pad.json` · Markdown with source: https://devl.dev/components/signature-pad.md · npm: lucide-react, motion · coss ui: button
- [Since You Left](https://devl.dev/components/since-you-left): What moved while you were away, one metric per row: a tiny trend line, the number now, and a change chip that knows when down is the good news. Install: `npx shadcn@latest add https://devl.dev/r/since-you-left.json` · Markdown with source: https://devl.dev/components/since-you-left.md · npm: lucide-react, motion · coss ui: tabs
- [Slash Menu](https://devl.dev/components/slash-menu): A writing surface where typing / opens a command menu right at the caret, narrows as you type and drops in a styled block: heading, to-do, callout, code and more. Install: `npx shadcn@latest add https://devl.dev/r/slash-menu.json` · Markdown with source: https://devl.dev/components/slash-menu.md · npm: lucide-react, motion
- [Smart Search](https://devl.dev/components/smart-search): One search box that speaks filter: type status:open owner:me priority>2 webhook and it becomes chips and a filtered table, with Tab to complete fields and values, minus to negate, ranges like priority:2..3, and typos flagged right on the chip. Install: `npx shadcn@latest add https://devl.dev/r/smart-search.json` · Markdown with source: https://devl.dev/components/smart-search.md · npm: @qnot/core, lucide-react, motion · coss ui: kbd
- [Social Pill](https://devl.dev/components/social-pill): A like, comment, repost and share pill where each icon pops and fills with a tiny burst and every count rolls over digit by digit. Install: `npx shadcn@latest add https://devl.dev/r/social-pill.json` · Markdown with source: https://devl.dev/components/social-pill.md · npm: lucide-react, motion
- [Sparkline Table](https://devl.dev/components/sparkline-table): A dense endpoint table where every row carries its own 24-hour sparkline, a delta that knows lower is better, and a status; sort any column and the rows glide into order. Install: `npx shadcn@latest add https://devl.dev/r/sparkline-table.json` · Markdown with source: https://devl.dev/components/sparkline-table.md · npm: lucide-react, motion
- [Spawn Tree](https://devl.dev/components/spawn-tree): See which agent started which, with each one's time and cost ticking on its card and every branch adding up what it spent. Install: `npx shadcn@latest add https://devl.dev/r/spawn-tree.json` · Markdown with source: https://devl.dev/components/spawn-tree.md · npm: lucide-react, motion · coss ui: button
- [Split Button](https://devl.dev/components/split-button): A primary action with a menu of alternatives beside it: pick one and it runs, then takes the primary slot, its label springing to the new width. Install: `npx shadcn@latest add https://devl.dev/r/split-button.json` · Markdown with source: https://devl.dev/components/split-button.md · npm: lucide-react, motion · coss ui: button, menu, spinner
- [Split Card](https://devl.dev/components/split-card): A total and what it's made of, in one small card: switch the period and the figures roll, the bar re-proportions and the ranked rows quietly trade places. Install: `npx shadcn@latest add https://devl.dev/r/split-card.json` · Markdown with source: https://devl.dev/components/split-card.md · npm: lucide-react, motion · coss ui: tabs
- [Stacked Explorer](https://devl.dev/components/stacked-explorer): Twelve months of stacked bars you can re-cut by measure and by slice: segments settle at their new heights, hovering a month breaks it down, and the table below lights up the series under your pointer. Install: `npx shadcn@latest add https://devl.dev/r/stacked-explorer.json` · Markdown with source: https://devl.dev/components/stacked-explorer.md · npm: motion · coss ui: select
- [Star & Emoji Rating](https://devl.dev/components/star-and-emoji-rating): Two ways to ask how it went: stars with half steps that pop when you pick, and a little face that morphs from grumpy to delighted as you slide across the scale. Install: `npx shadcn@latest add https://devl.dev/r/star-and-emoji-rating.json` · Markdown with source: https://devl.dev/components/star-and-emoji-rating.md · npm: motion
- [Status Pill](https://devl.dev/components/status-pill): A tiny working indicator that rolls through what it's doing, from Reading to Searching to Writing, eases to fit each word and lands on a green check when it's finished. Install: `npx shadcn@latest add https://devl.dev/r/status-pill.json` · Markdown with source: https://devl.dev/components/status-pill.md · npm: motion
- [Step Flow](https://devl.dev/components/step-flow): A three-step sign-up card where the progress bar pours into each step as you reach it, the card grows or shrinks to fit what's next and each field tells you what's missing as you go. Install: `npx shadcn@latest add https://devl.dev/r/step-flow.json` · Markdown with source: https://devl.dev/components/step-flow.md · npm: lucide-react, motion · coss ui: button, input
- [Streak Heatmap](https://devl.dev/components/streak-heatmap): A year of daily activity as a calendar heatmap: hover or arrow through any day, see which streak it belongs to, and point at a streak callout to light up its run. Install: `npx shadcn@latest add https://devl.dev/r/streak-heatmap.json` · Markdown with source: https://devl.dev/components/streak-heatmap.md · npm: lucide-react, motion
- [Streamed Reply](https://devl.dev/components/streamed-reply): An answer that reads its sources first, then softly streams in word by word, with little numbered chips you can hover to peek at each source, all in a card that holds its size the whole time. Install: `npx shadcn@latest add https://devl.dev/r/streamed-reply.json` · Markdown with source: https://devl.dev/components/streamed-reply.md · npm: lucide-react, motion · coss ui: preview-card
- [Swarm](https://devl.dev/components/swarm): A big job split across workers as a honeycomb: each cell fills with honey as its tasks finish, retries shimmer, failures crack, and done, failed, cost and time left roll along up top. Install: `npx shadcn@latest add https://devl.dev/r/swarm.json` · Markdown with source: https://devl.dev/components/swarm.md · npm: lucide-react, motion · coss ui: badge, button
- [Swatch Card](https://devl.dev/components/swatch-card): A product card whose drawn bottle recolours as you hover the swatches and grows with the size you pick, with a price that rolls and an add button that turns into a stepper. Install: `npx shadcn@latest add https://devl.dev/r/swatch-card.json` · Markdown with source: https://devl.dev/components/swatch-card.md · npm: lucide-react, motion · coss ui: spinner
- [Tag Input](https://devl.dev/components/tag-input): Type to add tags with grouped suggestions, paste a comma list to add a bunch at once, and backspace to pull the last one back for editing. Each group keeps its own colour. Install: `npx shadcn@latest add https://devl.dev/r/tag-input.json` · Markdown with source: https://devl.dev/components/tag-input.md · npm: lucide-react, motion
- [Task Card](https://devl.dev/components/task-card): A task card you can read at a glance: checklist progress, who's on it, and a due date that warms from grey to amber to red as it slips. Install: `npx shadcn@latest add https://devl.dev/r/task-card.json` · Markdown with source: https://devl.dev/components/task-card.md · npm: lucide-react, motion · coss ui: avatar, button, checkbox, menu, tooltip
- [Terminal](https://devl.dev/components/terminal): A terminal that replays a session: commands typed at the prompt, output streamed in real ANSI colour, braille spinners that resolve to a tick, and a status bar that keeps time, with skip and replay. Install: `npx shadcn@latest add https://devl.dev/r/terminal.json` · Markdown with source: https://devl.dev/components/terminal.md · npm: lucide-react, motion · coss ui: button
- [Theme Studio](https://devl.dev/components/theme-studio): A live theme customiser: pick an accent hue, drag the corner radius, set the density, watch a sample card restyle as you go, then copy the CSS variables. Install: `npx shadcn@latest add https://devl.dev/r/theme-studio.json` · Markdown with source: https://devl.dev/components/theme-studio.md · npm: @base-ui/react, lucide-react, motion · coss ui: slider
- [Thread](https://devl.dev/components/thread): A comment and its replies in one tidy card, where @mentions stand out and an assistant's reply opens up to show each step it took. Install: `npx shadcn@latest add https://devl.dev/r/thread.json` · Markdown with source: https://devl.dev/components/thread.md · npm: lucide-react, motion
- [Time Wheel](https://devl.dev/components/time-wheel): A drum-style time picker: flick the hours and minutes and they spin with momentum, curl away on a 3D wheel and snap onto the row, by touch, trackpad, mouse or keys. Install: `npx shadcn@latest add https://devl.dev/r/time-wheel.json` · Markdown with source: https://devl.dev/components/time-wheel.md · npm: motion
- [Toast Deck](https://devl.dev/components/toast-deck): Notifications that settle into a tidy deck, fan open when you hover, swipe away to the side and turn from a spinner into a check when the work behind them finishes. Install: `npx shadcn@latest add https://devl.dev/r/toast-deck.json` · Markdown with source: https://devl.dev/components/toast-deck.md · npm: lucide-react, motion
- [Token Budget](https://devl.dev/components/token-budget): See exactly what's filling your model's context, as a field of cells or a treemap of the same parts; hover anything to light it in both, drop a file you don't need, and Compact folds older turns into a short summary. Install: `npx shadcn@latest add https://devl.dev/r/token-budget.json` · Markdown with source: https://devl.dev/components/token-budget.md · npm: lucide-react, motion · coss ui: button, segmented-control
- [Tool Receipt](https://devl.dev/components/tool-receipt): Every tool call your agent makes prints as a little thermal receipt with its time, tokens and cost; tap one to unroll the arguments and result, failed calls get a red VOID stamp and a Retry, and a whole run stacks up on a spike with a running total. Install: `npx shadcn@latest add https://devl.dev/r/tool-receipt.json` · Markdown with source: https://devl.dev/components/tool-receipt.md · npm: lucide-react, motion · coss ui: button
- [Triage Desk](https://devl.dev/components/triage-desk): Work through agent output one card at a time, riskiest first, with the shaky parts marked and explained and a single key to approve, edit, reject or skip. Install: `npx shadcn@latest add https://devl.dev/r/triage-desk.json` · Markdown with source: https://devl.dev/components/triage-desk.md · npm: lucide-react, motion · coss ui: button, kbd
- [Typing Indicators](https://devl.dev/components/typing-indicators): Four quiet ways to say a reply is coming: a dotted bubble, a named line, a stack of faces for busy threads and a soft shimmer for an assistant at work. Install: `npx shadcn@latest add https://devl.dev/r/typing-indicators.json` · Markdown with source: https://devl.dev/components/typing-indicators.md · npm: lucide-react, motion
- [Upload Failed](https://devl.dev/components/upload-failed): A batch upload where each failed file says exactly why, too large, wrong type or a dropped connection, next to the fix for it, and a retry picks up where the upload stopped. Install: `npx shadcn@latest add https://devl.dev/r/upload-failed.json` · Markdown with source: https://devl.dev/components/upload-failed.md · npm: lucide-react, motion · coss ui: button
- [Upload Tray](https://devl.dev/components/upload-tray): Drop files in and each one fans out into its own card with a coloured type badge, live progress and time left, while a failed upload waits patiently for a retry. Install: `npx shadcn@latest add https://devl.dev/r/upload-tray.json` · Markdown with source: https://devl.dev/components/upload-tray.md · npm: lucide-react, motion
- [Uptime Bars](https://devl.dev/components/uptime-bars): A status-page block with 90 days of daily bars per service: hover or arrow along a row to read that day's uptime and incidents, with a headline that names whatever is broken right now. Install: `npx shadcn@latest add https://devl.dev/r/uptime-bars.json` · Markdown with source: https://devl.dev/components/uptime-bars.md · npm: lucide-react, motion
- [Voice Note](https://devl.dev/components/voice-note): A chat voice message you can scrub like a waveform, with a play button that morphs to pause, a speed chip that rolls, and a transcript that follows along word by word. Install: `npx shadcn@latest add https://devl.dev/r/voice-note.json` · Markdown with source: https://devl.dev/components/voice-note.md · npm: lucide-react, motion
- [Webhook Inspector](https://devl.dev/components/webhook-inspector): Incoming webhook deliveries with status and latency at a glance, a detail pane for payload, headers and your endpoint’s response, and Redeliver that slides a new attempt into the list and lets you watch it land. Install: `npx shadcn@latest add https://devl.dev/r/webhook-inspector.json` · Markdown with source: https://devl.dev/components/webhook-inspector.md · npm: lucide-react, motion · coss ui: button
- [Week Agenda](https://devl.dev/components/week-agenda): Your week on one strip and your day on a timeline, where you can drag a meeting to a new time and see straight away if it clashes with another. Install: `npx shadcn@latest add https://devl.dev/r/week-agenda.json` · Markdown with source: https://devl.dev/components/week-agenda.md · npm: lucide-react, motion · coss ui: button
- [Working Out Loud](https://devl.dev/components/working-out-loud): Lets people watch an agent think: a running clock, steps that tick off along a rail, sources that slide in as they're found, and a tidy one-line summary once it's done. Install: `npx shadcn@latest add https://devl.dev/r/working-out-loud.json` · Markdown with source: https://devl.dev/components/working-out-loud.md · npm: lucide-react, motion

## Blocks

- [Article Cards](https://devl.dev/blocks/article-cards): A blog grid led by one large featured post, each card with drawn cover art, tags, reading time and author, lifting gently on hover while its cover drifts closer. Install: `npx shadcn@latest add https://devl.dev/r/article-cards.json` · Markdown with source: https://devl.dev/blocks/article-cards.md · npm: lucide-react, motion
- [Assistant App](https://devl.dev/blocks/assistant-app): A small, complete assistant with chats and projects in the sidebar, files you can attach, and replies that write themselves out word by word. Install: `npx shadcn@latest add https://devl.dev/r/assistant-app.json` · Markdown with source: https://devl.dev/blocks/assistant-app.md · npm: lucide-react, motion · coss ui: avatar, button, composer, input-group, scroll-area, segmented-control
- [Before & After Hero](https://devl.dev/blocks/before-after-hero): A hero split down the middle: drag the handle and a messy expense spreadsheet turns into a clean, matched ledger row by row, while the headline flips from a week to an afternoon. Install: `npx shadcn@latest add https://devl.dev/r/before-after-hero.json` · Markdown with source: https://devl.dev/blocks/before-after-hero.md · npm: lucide-react, motion · coss ui: button
- [Billing Overview](https://devl.dev/blocks/billing-overview): A billing page in one glance: plan and seats, the next invoice with its cycle progress, a payment card that holds its colours in both themes, usage bars that warn near the limit, and invoices with a one-click retry. Install: `npx shadcn@latest add https://devl.dev/r/billing-overview.json` · Markdown with source: https://devl.dev/blocks/billing-overview.md · npm: lucide-react, motion · coss ui: button, spinner
- [Changelog](https://devl.dev/blocks/changelog): A release timeline with sticky version tags, New / Improved / Fixed chips you can filter by, small drawn media cards instead of screenshots, and a load-more that eases older releases into place. Install: `npx shadcn@latest add https://devl.dev/r/changelog.json` · Markdown with source: https://devl.dev/blocks/changelog.md · npm: lucide-react, motion · coss ui: button
- [Checkout Summary](https://devl.dev/blocks/checkout-summary): A checkout with generic express-pay buttons, delivery options that slide a selection ring, quantity steppers, a promo field that validates, and totals whose digits roll as anything changes. Install: `npx shadcn@latest add https://devl.dev/r/checkout-summary.json` · Markdown with source: https://devl.dev/blocks/checkout-summary.md · npm: lucide-react, motion · coss ui: button, input
- [City Time](https://devl.dev/blocks/city-time): A local-time page for any city: a live clock whose digits roll, the sun on today's arc, your working hours against theirs with the best time to meet, and the year's clock changes, all re-computed as you switch cities. Install: `npx shadcn@latest add https://devl.dev/r/city-time.json` · Markdown with source: https://devl.dev/blocks/city-time.md · npm: lucide-react, motion · coss ui: combobox, segmented-control
- [Connector Marketplace](https://devl.dev/blocks/connector-marketplace): A place to browse the apps that plug into your product: filter by category, search, and connect one through a short permissions step that shows the link being made. Install: `npx shadcn@latest add https://devl.dev/r/connector-marketplace.json` · Markdown with source: https://devl.dev/blocks/connector-marketplace.md · npm: lucide-react, motion · coss ui: button, input-group, spinner
- [Dashboard Header](https://devl.dev/blocks/dashboard-header): The top of a dashboard: three trend cards, a this-period-versus-last chart you can scrub day by day, and a goal ring that fills as sales come in. Install: `npx shadcn@latest add https://devl.dev/r/dashboard-header.json` · Markdown with source: https://devl.dev/blocks/dashboard-header.md · npm: lucide-react, motion
- [Docs Layout](https://devl.dev/blocks/docs-layout): A docs page shell: grouped sidebar, readable article with tabbed code and callouts, a reading-progress hairline and a right-hand outline whose marker glides to the section you're reading; the sidebar becomes a drawer on phones. Install: `npx shadcn@latest add https://devl.dev/r/docs-layout.json` · Markdown with source: https://devl.dev/blocks/docs-layout.md · npm: lucide-react, motion · coss ui: button
- [FAQ](https://devl.dev/blocks/faq): A searchable FAQ with topic tabs and live counts, matches marked in place, answers that open on a smooth measured height, and a copy-link button on every question that deep-links straight to it. Install: `npx shadcn@latest add https://devl.dev/r/faq.json` · Markdown with source: https://devl.dev/blocks/faq.md · npm: @base-ui/react, lucide-react, motion · coss ui: button
- [Feature Bento](https://devl.dev/blocks/feature-bento): A bento grid of feature tiles, each with a tiny working demo (search, shortcuts, version history, a flow, a chart) that wakes up on hover and rests when you leave. Install: `npx shadcn@latest add https://devl.dev/r/feature-bento.json` · Markdown with source: https://devl.dev/blocks/feature-bento.md · npm: lucide-react, motion
- [First Project](https://devl.dev/blocks/first-project): The empty Projects page of an app: one line on what projects are for, a Create button with its shortcut, a guide link and three templates. Creating one flies the icon into the first row of a real project list. Install: `npx shadcn@latest add https://devl.dev/r/first-project.json` · Markdown with source: https://devl.dev/blocks/first-project.md · npm: lucide-react, motion · coss ui: button, kbd
- [Flags Console](https://devl.dev/blocks/flags-console): A whole flag console in one piece: search and filter your flags, pick one to edit its targeting rules and rollout per environment, and watch a live log of requests getting their variant, with a marker the moment your change takes effect. Install: `npx shadcn@latest add https://devl.dev/r/flags-console.json` · Markdown with source: https://devl.dev/blocks/flags-console.md · npm: @qnot/core, @qnot/react, lucide-react, motion · coss ui: button, input, menu, select, slider, switch, tabs
- [Inbox Preview](https://devl.dev/blocks/inbox-preview): A mail client in one block: unread dots, coloured labels, hover actions, rows you swipe to archive or mark read (with undo), j/k/e shortcuts and a reading pane that slides over the list on phones. Install: `npx shadcn@latest add https://devl.dev/r/inbox-preview.json` · Markdown with source: https://devl.dev/blocks/inbox-preview.md · npm: lucide-react, motion · coss ui: button, kbd
- [Intake Survey](https://devl.dev/blocks/intake-survey): A one-question-at-a-time onboarding survey: answer with A–D, a quick blink confirms your pick before the next question glides in, multi-select with a limit, an optional free-text step and an editable summary at the end. Install: `npx shadcn@latest add https://devl.dev/r/intake-survey.json` · Markdown with source: https://devl.dev/blocks/intake-survey.md · npm: lucide-react, motion · coss ui: button, kbd
- [Kanban Board](https://devl.dev/blocks/kanban-board): A team board you can really work in: drag cards between columns, add one with a keystroke, filter by label, and open any card for its checklist and notes. Install: `npx shadcn@latest add https://devl.dev/r/kanban-board.json` · Markdown with source: https://devl.dev/blocks/kanban-board.md · npm: lucide-react, motion · coss ui: checkbox, input-group, switch, textarea
- [Mega Footer](https://devl.dev/blocks/mega-footer): A full site footer: link columns with little badges, a one-field digest signup, a live status pill, language and theme switches, a legal row, and an oversized wordmark fading into the floor. Install: `npx shadcn@latest add https://devl.dev/r/mega-footer.json` · Markdown with source: https://devl.dev/blocks/mega-footer.md · npm: lucide-react, motion · coss ui: select
- [Newsletter CTA](https://devl.dev/blocks/newsletter-cta): An email capture that checks as you go, catches gmial-style typos, shakes once on a bad address, then morphs into a success note while your avatar joins the stack and the reader count rolls up by one. Install: `npx shadcn@latest add https://devl.dev/r/newsletter-cta.json` · Markdown with source: https://devl.dev/blocks/newsletter-cta.md · npm: lucide-react, motion · coss ui: button
- [Not Found](https://devl.dev/blocks/not-found): A 404 with a compass that dithers between headings until you move your mouse or start searching, plus a did-you-mean fix for the typo, inline search and popular links. Install: `npx shadcn@latest add https://devl.dev/r/not-found.json` · Markdown with source: https://devl.dev/blocks/not-found.md · npm: lucide-react, motion · coss ui: button, input-group
- [Notification Matrix](https://devl.dev/blocks/notification-matrix): Events down the side, email, push and in-app across the top: group checkboxes that go half-checked, locked security rows with a reason, edited cells that glow, and a save bar that floats in only when something changed. Install: `npx shadcn@latest add https://devl.dev/r/notification-matrix.json` · Markdown with source: https://devl.dev/blocks/notification-matrix.md · npm: lucide-react, motion · coss ui: button, checkbox, switch, tooltip
- [Pour Hero](https://devl.dev/blocks/pour-hero): A hero whose headline drips in as lime liquid: drops pinch off the top edge, splash on landing and set into real, selectable type, with a droplet button that squashes and splashes when pressed. Install: `npx shadcn@latest add https://devl.dev/r/pour-hero.json` · Markdown with source: https://devl.dev/blocks/pour-hero.md · npm: lucide-react, motion
- [Pricing Table](https://devl.dev/blocks/pricing-table): Three plans side by side with a monthly or yearly toggle that rolls each price into place, and a full feature table that folds out underneath. Install: `npx shadcn@latest add https://devl.dev/r/pricing-table.json` · Markdown with source: https://devl.dev/blocks/pricing-table.md · npm: lucide-react, motion · coss ui: button, collapsible
- [Quote Wall](https://devl.dev/blocks/quote-wall): Customer quotes stacked in columns that drift past in opposite directions and settle the moment you stop to read one. Install: `npx shadcn@latest add https://devl.dev/r/quote-wall.json` · Markdown with source: https://devl.dev/blocks/quote-wall.md · npm: lucide-react, motion
- [Request Access](https://devl.dev/blocks/request-access): The page you hit when a doc is private: who you are signed in as, a switch-account menu, an optional note and a Request access button. It then shows who the request went to, when, and a resend that unlocks after a countdown. Install: `npx shadcn@latest add https://devl.dev/r/request-access.json` · Markdown with source: https://devl.dev/blocks/request-access.md · npm: lucide-react, motion · coss ui: button, label, menu, textarea
- [Sales Overview](https://devl.dev/blocks/sales-overview): A year of sales on one page: pick a number up top and the monthly chart, best sellers and channel split all follow it, with a line or bar view to taste. Install: `npx shadcn@latest add https://devl.dev/r/sales-overview.json` · Markdown with source: https://devl.dev/blocks/sales-overview.md · npm: lucide-react, motion
- [Sign-in Card](https://devl.dev/blocks/sign-in-card): Email and password sign-in with a peek toggle, a one-tap switch to magic links, passkey and SSO buttons, a gentle shake on errors and a calm check-your-inbox state. Install: `npx shadcn@latest add https://devl.dev/r/sign-in-card.json` · Markdown with source: https://devl.dev/blocks/sign-in-card.md · npm: lucide-react, motion · coss ui: button, input, input-group, spinner
- [Something Went Wrong](https://devl.dev/blocks/something-went-wrong): An app error page with a small 1-bit dithered ?! glyph, Try again that fails once with a shake and then recovers into a check, a copyable error details panel and a quiet Report this link. Install: `npx shadcn@latest add https://devl.dev/r/something-went-wrong.json` · Markdown with source: https://devl.dev/blocks/something-went-wrong.md · npm: lucide-react, motion · coss ui: button, collapsible
- [Split Sign-up](https://devl.dev/blocks/split-sign-up): A two-panel sign-up: the form validates as you go (live email check, password rules that tick off, a strength bar) beside a product glimpse and rotating customer quotes that fold below on phones. Install: `npx shadcn@latest add https://devl.dev/r/split-sign-up.json` · Markdown with source: https://devl.dev/blocks/split-sign-up.md · npm: lucide-react, motion · coss ui: button, checkbox, input-group, spinner
- [Stats Band](https://devl.dev/blocks/stats-band): A band of big figures that count up once when it scrolls into view, sitting on a hairline ruler that draws itself in, with labels and captions on a steady divider rhythm. Install: `npx shadcn@latest add https://devl.dev/r/stats-band.json` · Markdown with source: https://devl.dev/blocks/stats-band.md · npm: motion
- [Status Page](https://devl.dev/blocks/status-page): A public status page: a banner that names what's wrong, 90 days of uptime bars you can scrub with mouse or arrow keys, an incident timeline, and an inline subscribe form. Install: `npx shadcn@latest add https://devl.dev/r/status-page.json` · Markdown with source: https://devl.dev/blocks/status-page.md · npm: lucide-react, motion · coss ui: button, input
- [Tally Hero](https://devl.dev/blocks/tally-hero): A hero led by one giant figure that rolls up digit by digit as the itemised statement beneath it prints line by line, landing on a total that matches, with a period switch that re-tallies both. Install: `npx shadcn@latest add https://devl.dev/r/tally-hero.json` · Markdown with source: https://devl.dev/blocks/tally-hero.md · npm: lucide-react, motion · coss ui: button, segmented-control
- [Team Grid](https://devl.dev/blocks/team-grid): Team cards with tinted initials portraits, roles and a ticking local clock; hover, focus or tap one and a short bio with links slides over, plus a team filter and a we're-hiring card. Install: `npx shadcn@latest add https://devl.dev/r/team-grid.json` · Markdown with source: https://devl.dev/blocks/team-grid.md · npm: lucide-react, motion
- [Two-step Setup](https://devl.dev/blocks/two-step-setup): Turn on authenticator-app 2FA in three calm steps: scan a coded QR or copy the setup key, type the six digits, then copy or download backup codes before you can finish. Install: `npx shadcn@latest add https://devl.dev/r/two-step-setup.json` · Markdown with source: https://devl.dev/blocks/two-step-setup.md · npm: lucide-react, motion · coss ui: button, checkbox, otp-field
- [Versus Table](https://devl.dev/blocks/versus-table): An us-versus-the-old-way comparison with one raised, highlighted column, ticks that pop in as you scroll, a header that sticks, and a phone layout that compares against one rival at a time. Install: `npx shadcn@latest add https://devl.dev/r/versus-table.json` · Markdown with source: https://devl.dev/blocks/versus-table.md · npm: lucide-react, motion · coss ui: button
- [Waitlist](https://devl.dev/blocks/waitlist): A join-the-line card: your position rolls down digit by digit, a referral link to copy, and friends who sign up drop into slots while you jump toward the next wave. Install: `npx shadcn@latest add https://devl.dev/r/waitlist.json` · Markdown with source: https://devl.dev/blocks/waitlist.md · npm: lucide-react, motion · coss ui: button, input
- [Wordmark Ticker](https://devl.dev/blocks/wordmark-ticker): A quiet strip of customer wordmarks that eases to a stop under your cursor, flings when you drag it, and pauses with a click. Install: `npx shadcn@latest add https://devl.dev/r/wordmark-ticker.json` · Markdown with source: https://devl.dev/blocks/wordmark-ticker.md · npm: lucide-react, motion

## Screens

- [Pipeline Today](https://devl.dev/screens/accounts-crm): A salesperson's morning view: drag deals between stages (or move them with the keyboard) while each column's weighted value and the forecast roll live, and a Focus rail tells you who to act on and why, with one-click email, call and snooze that update the deal. Install: `npx shadcn@latest add https://devl.dev/r/accounts-crm.json` · Markdown with source: https://devl.dev/screens/accounts-crm.md · npm: lucide-react, motion · coss ui: avatar, button, kbd, menu, segmented-control, tooltip
- [Admin Users](https://devl.dev/screens/admin-users): A members admin with seat and 2FA stats, role and status filters, a sortable table you can bulk-edit, an invite dialog that checks emails as chips, and a drawer with each person's devices and activity. Install: `npx shadcn@latest add https://devl.dev/r/admin-users.json` · Markdown with source: https://devl.dev/screens/admin-users.md · npm: lucide-react, motion · coss ui: avatar, button, checkbox, input-group, menu, table
- [Appearance Settings](https://devl.dev/screens/appearance-settings): Theme cards with miniature previews above a compact live app that re-themes with a circular wipe, eases into your accent colour and glides between densities as you change them. Install: `npx shadcn@latest add https://devl.dev/r/appearance-settings.json` · Markdown with source: https://devl.dev/screens/appearance-settings.md · npm: lucide-react, motion · coss ui: button, radio-group, segmented-control, slider, switch
- [Assistant Start](https://devl.dev/screens/assistant-start): The first screen of an AI assistant, with chats and projects down the side, a gooey orb that says hello and a prompt box that gathers tools and connected apps as context, then glides down into the conversation when you send. Install: `npx shadcn@latest add https://devl.dev/r/assistant-start.json` · Markdown with source: https://devl.dev/screens/assistant-start.md · npm: motion, lucide-react · coss ui: avatar, badge, button, input-group, kbd, menu, select, tooltip
- [Calendar Week](https://devl.dev/screens/calendar-week): A week calendar you can push around: drag events to move or stretch them on a 15-minute snap, drag empty time to create one, nudge with the arrow keys, and watch the now line creep down the day. Install: `npx shadcn@latest add https://devl.dev/r/calendar-week.json` · Markdown with source: https://devl.dev/screens/calendar-week.md · npm: motion, lucide-react · coss ui: button, calendar, kbd, popover
- [Checkout](https://devl.dev/screens/checkout): A one-page checkout that folds each finished step into a one-line summary: inline validation that clears as you type, delivery choices that re-total the order, a card that flips when you reach the CVC, and a calm confirmation. Install: `npx shadcn@latest add https://devl.dev/r/checkout.json` · Markdown with source: https://devl.dev/screens/checkout.md · npm: lucide-react, motion · coss ui: button, checkbox, input, label, radio-group, select
- [Co-writing Doc](https://devl.dev/screens/co-writing-doc): A document where AI agents write alongside you: coloured cursors with name tags glide between words, an agent types its suggestion letter by letter for you to accept or reject, and comments sit in the margin next to the lines they're about. Install: `npx shadcn@latest add https://devl.dev/r/co-writing-doc.json` · Markdown with source: https://devl.dev/screens/co-writing-doc.md · npm: motion, lucide-react · coss ui: avatar, button, kbd, tooltip
- [Code Review](https://devl.dev/screens/code-review): A pull request review with a file tree, split or unified diffs with word-level highlights, inline threads you can reply to and resolve, Viewed checkboxes that fold files away, and an approve or request-changes panel. Install: `npx shadcn@latest add https://devl.dev/r/code-review.json` · Markdown with source: https://devl.dev/screens/code-review.md · npm: motion, lucide-react, vitest · coss ui: avatar, badge, button, kbd
- [Conductor](https://devl.dev/screens/conductor): Chat with a lead agent while it works: it streams its replies, hands tasks to helpers whose progress ticks along in a side panel and writes what it learns straight into a launch brief you can edit beside the chat. Install: `npx shadcn@latest add https://devl.dev/r/conductor.json` · Markdown with source: https://devl.dev/screens/conductor.md · npm: motion, lucide-react · coss ui: button
- [Connectors](https://devl.dev/screens/connectors): Browse every app your product plugs into, grouped by category in tidy two-up cards, with a sticky search, filters that glide, connect buttons that spin and settle into a quiet connected state, and a slide-over for permissions and settings. Install: `npx shadcn@latest add https://devl.dev/r/connectors.json` · Markdown with source: https://devl.dev/screens/connectors.md · npm: lucide-react, motion · coss ui: badge, button, input, kbd, menu, select, spinner, switch
- [Delivery Tracker](https://devl.dev/screens/delivery-tracker): Live order tracking on a hand-drawn city map: the courier rides the route as the ETA counts down, you can zoom in to follow them, message with quick replies, and rate and tip once it lands. Install: `npx shadcn@latest add https://devl.dev/r/delivery-tracker.json` · Markdown with source: https://devl.dev/screens/delivery-tracker.md · npm: lucide-react, motion · coss ui: avatar, button, input, menu, textarea
- [API Keys & Webhooks](https://devl.dev/screens/developer-settings): Scoped API keys with a show-once secret, roll and revoke, plus webhook endpoints with event picking, a signing secret and a deliveries log where failed sends retry and flip to 200. Install: `npx shadcn@latest add https://devl.dev/r/developer-settings.json` · Markdown with source: https://devl.dev/screens/developer-settings.md · npm: lucide-react, motion · coss ui: alert-dialog, button, checkbox, dialog, input, label, menu, select, spinner, switch
- [Docs Site](https://devl.dev/screens/docs-site): A documentation site with a top nav, collapsible sidebar, code samples whose language choice follows you across the page, a table of contents that tracks your scroll, ⌘K search over pages and headings, and prev and next cards. Install: `npx shadcn@latest add https://devl.dev/r/docs-site.json` · Markdown with source: https://devl.dev/screens/docs-site.md · npm: motion, lucide-react · coss ui: button, kbd
- [Drive](https://devl.dev/screens/drive): A cloud drive home with a sidebar of places and quick access, start-from-template cards, and folders that glide between a card grid and a tidy table when you switch views, with search, sort and stars. Install: `npx shadcn@latest add https://devl.dev/r/drive.json` · Markdown with source: https://devl.dev/screens/drive.md · npm: motion, lucide-react · coss ui: avatar, button, input-group, kbd, menu
- [First Run](https://devl.dev/screens/first-run): A four-step setup for a brand-new AI workspace, with a springy stepper, tools that connect right where they sit, invites as chips, a live preview of your first agent and a calm summary you can jump back from. Install: `npx shadcn@latest add https://devl.dev/r/first-run.json` · Markdown with source: https://devl.dev/screens/first-run.md · npm: lucide-react, motion · coss ui: avatar, badge, button, input, popover, select, spinner, textarea
- [Folder View](https://devl.dev/screens/folder-view): One folder opened inside a drive, with a folder tree in the sidebar, type filters with counts, a grid of file cards with little drawn previews or a dense table, a bulk bar that rises with a rolling count when you pick a few, and ghost files fanning out of an empty sub-folder. Install: `npx shadcn@latest add https://devl.dev/r/folder-view.json` · Markdown with source: https://devl.dev/screens/folder-view.md · npm: motion, lucide-react · coss ui: avatar, button, checkbox, tooltip
- [Forgot Password](https://devl.dev/screens/forgot-password): Ask for a reset link, then a confirmation with the address it went to, a resend countdown and a way back to sign in. Install: `npx shadcn@latest add https://devl.dev/r/forgot-password.json` · Markdown with source: https://devl.dev/screens/forgot-password.md · npm: lucide-react, motion · coss ui: button, input, label
- [Habits](https://devl.dev/screens/habits): A habit tracker that makes ticking things off feel good: checks fill and draw in a beat, counted habits fill like a glass, streaks roll up, and a week grid lets you patch the days you forgot to log. Install: `npx shadcn@latest add https://devl.dev/r/habits.json` · Markdown with source: https://devl.dev/screens/habits.md · npm: lucide-react, motion · coss ui: button, input
- [Hairline Shell](https://devl.dev/screens/hairline-shell): An app frame drawn edge to edge on single hairlines, with header and footer rules running straight across, a marker that slides along the edge to the current page and a dense issue list you can walk with J and K. Install: `npx shadcn@latest add https://devl.dev/r/hairline-shell.json` · Markdown with source: https://devl.dev/screens/hairline-shell.md · npm: motion, lucide-react · coss ui: avatar, button, kbd, menu, tooltip
- [Help Centre](https://devl.dev/screens/help-centre): A support site with a search that suggests articles as you type, topic cards, readable articles with a table of contents that follows you, and a feedback form that asks what went wrong. Install: `npx shadcn@latest add https://devl.dev/r/help-centre.json` · Markdown with source: https://devl.dev/screens/help-centre.md · npm: lucide-react, motion · coss ui: button, input, kbd, textarea
- [Inset Shell](https://devl.dev/screens/inset-shell): The frame an app lives in: a sidebar with workspace switcher, nav, colour-dotted projects and an account menu that folds down to an icon rail, beside a rounded inset page with live breadcrumbs and a floating drawer on phones. Install: `npx shadcn@latest add https://devl.dev/r/inset-shell.json` · Markdown with source: https://devl.dev/screens/inset-shell.md · npm: motion, lucide-react · coss ui: avatar, badge, breadcrumb, button, kbd, menu, tooltip
- [Issue Tracker](https://devl.dev/screens/issue-tracker): An issue list you drive with your hands on the keys: J and K to move, S, P, A and L to change status, priority, assignee and labels, X to multi-select, ⌘K for everything else, and rows glide to their new group when they change. Install: `npx shadcn@latest add https://devl.dev/r/issue-tracker.json` · Markdown with source: https://devl.dev/screens/issue-tracker.md · npm: motion, lucide-react · coss ui: avatar, button, kbd
- [Mail](https://devl.dev/screens/mail): A three-pane mail client you can run from the keyboard: J and K walk the threads, E archives with an undo, R drops you into a quick reply, and the reading pane slides over the list on phones. Install: `npx shadcn@latest add https://devl.dev/r/mail.json` · Markdown with source: https://devl.dev/screens/mail.md · npm: motion, lucide-react · coss ui: avatar, button, kbd, tooltip
- [Money](https://devl.dev/screens/money): A personal finance home: the balance rolls digit by digit as you switch accounts or pay a bill, the payment lands in your transactions, spending donut and budgets at once, and each budget shows if you’re spending ahead of pace. Install: `npx shadcn@latest add https://devl.dev/r/money.json` · Markdown with source: https://devl.dev/screens/money.md · npm: lucide-react, motion · coss ui: avatar, badge, button, input-group
- [Music Player](https://devl.dev/screens/music-player): A music app with gradient cover art that glows into the room, a waveform you can scrub, a drag-to-reorder queue and lyrics that follow the song line by line. Install: `npx shadcn@latest add https://devl.dev/r/music-player.json` · Markdown with source: https://devl.dev/screens/music-player.md · npm: lucide-react, motion · coss ui: button, slider
- [Notes](https://devl.dev/screens/notes): A notes app with folders, pinned notes that glide to the top, search that highlights matches as you type, and an editor where typing “[] ”, “- ” or “# ” turns a line into a checklist, bullet or heading. Install: `npx shadcn@latest add https://devl.dev/r/notes.json` · Markdown with source: https://devl.dev/screens/notes.md · npm: lucide-react, motion · coss ui: button, input-group, menu
- [Notification Settings](https://devl.dev/screens/notification-settings): Channels you can open and tune, per-event email, push and chat toggles grouped under section switches, quiet hours on a small 24-hour track, and a digest line whose item count rolls as you change things. Install: `npx shadcn@latest add https://devl.dev/r/notification-settings.json` · Markdown with source: https://devl.dev/screens/notification-settings.md · npm: lucide-react, motion · coss ui: segmented-control, select, switch, toggle-group
- [Profile](https://devl.dev/screens/profile): A social profile with a painted cover, a Follow button that pinches off a notification bell like a droplet, followers that roll up, and posts, replies and a media grid that opens into a lightbox. Install: `npx shadcn@latest add https://devl.dev/r/profile.json` · Markdown with source: https://devl.dev/screens/profile.md · npm: lucide-react, motion · coss ui: avatar, button, menu
- [Profile Settings](https://devl.dev/screens/profile-settings): Edit your profile: crop a generated photo in a small dialog, claim a username with a live availability check and suggestions, see your local time on a tiny clock, and save from a bar that springs up when something changes. Install: `npx shadcn@latest add https://devl.dev/r/profile-settings.json` · Markdown with source: https://devl.dev/screens/profile-settings.md · npm: lucide-react, motion · coss ui: badge, button, dialog, input, input-group, select, slider, spinner, textarea
- [Prompt Test Bench](https://devl.dev/screens/prompt-test-bench): Check a prompt before it ships, with pass rate by version against the bar it has to clear, a unified or side-by-side diff of what changed, and test cases that re-run live from queued to a rolling score. Install: `npx shadcn@latest add https://devl.dev/r/prompt-test-bench.json` · Markdown with source: https://devl.dev/screens/prompt-test-bench.md · npm: lucide-react, motion · coss ui: avatar, badge, button, select, spinner, tabs, tooltip
- [Revenue Story](https://devl.dev/screens/revenue-overview): A store's revenue told as a story: one big annotated line you can scrub day by day against last period, a plain-sentence summary whose numbers roll, a range switch that morphs the line and moves its notes, and a ranked strip of where the money came from. Install: `npx shadcn@latest add https://devl.dev/r/revenue-overview.json` · Markdown with source: https://devl.dev/screens/revenue-overview.md · npm: lucide-react, motion · coss ui: avatar, button, empty, menu, segmented-control, tooltip
- [Run Replay](https://devl.dev/screens/run-replay): Watch an agent work a task from start to finish: plan steps tick off, tool calls stream into a log, it stops to ask before sending anything, and the draft it's writing fills in beside it. Install: `npx shadcn@latest add https://devl.dev/r/run-replay.json` · Markdown with source: https://devl.dev/screens/run-replay.md · npm: motion, lucide-react · coss ui: badge, button, checkbox, menu, skeleton, tabs
- [Security Settings](https://devl.dev/screens/security-settings): Password, two-factor, passkeys and sessions in grouped rows: a tiny ring counts recommended steps, passkeys are added inline while your device confirms, and signed-out sessions slide off the table one after another. Install: `npx shadcn@latest add https://devl.dev/r/security-settings.json` · Markdown with source: https://devl.dev/screens/security-settings.md · npm: lucide-react, motion · coss ui: badge, button, input, label, menu
- [Settings & Plans](https://devl.dev/screens/settings-and-plans): Workspace, members, API keys and billing in one calm settings screen: grouped rows, an unsaved-changes bar that springs up, invites and role changes, keys shown once, and usage bars that fill when you open Billing. Install: `npx shadcn@latest add https://devl.dev/r/settings-and-plans.json` · Markdown with source: https://devl.dev/screens/settings-and-plans.md · npm: lucide-react, motion · coss ui: alert, alert-dialog, avatar, badge, button, input, input-group, label, menu, select, switch
- [Sign In](https://devl.dev/screens/sign-in): A minimal centred sign-in: passkey and single sign-on side by side, email and password with a show toggle, a gentle shake when the password is wrong and a check when you’re in. Install: `npx shadcn@latest add https://devl.dev/r/sign-in.json` · Markdown with source: https://devl.dev/screens/sign-in.md · npm: lucide-react, motion · coss ui: button, input, input-group, label
- [Sign Up](https://devl.dev/screens/sign-up): A minimal centred sign-up: name, work email and a password whose length hint ticks green as you type, with inline errors and the terms in one quiet line. Install: `npx shadcn@latest add https://devl.dev/r/sign-up.json` · Markdown with source: https://devl.dev/screens/sign-up.md · npm: lucide-react, motion · coss ui: button, input, input-group, label
- [Split Shell](https://devl.dev/screens/split-shell): A frame for working with an agent: tasks on the left, its thread in the middle, and a work panel you can drag or nudge with arrow keys to watch its tool calls tick by, the page it's reading and the sources it will cite. Install: `npx shadcn@latest add https://devl.dev/r/split-shell.json` · Markdown with source: https://devl.dev/screens/split-shell.md · npm: motion, lucide-react · coss ui: avatar, badge, button, checkbox, kbd, tabs, tooltip
- [Status Console](https://devl.dev/screens/status-console): An ops console where an incident plays out live: services with ticking p95 sparklines, a timeline that moves from investigating to resolved, the fix rolling out in recent deploys, and an on-call card you can page from the keyboard. Install: `npx shadcn@latest add https://devl.dev/r/status-console.json` · Markdown with source: https://devl.dev/screens/status-console.md · npm: motion, lucide-react · coss ui: avatar, button, kbd, tooltip
- [Team Chat](https://devl.dev/screens/team-chat): Channels and DMs with grouped messages, reactions that roll their counts, and threads that open in a side panel; send something and a teammate starts typing back. Install: `npx shadcn@latest add https://devl.dev/r/team-chat.json` · Markdown with source: https://devl.dev/screens/team-chat.md · npm: motion, lucide-react · coss ui: avatar, button, kbd, popover, tooltip
- [Members & Roles](https://devl.dev/screens/team-roles): Invite people, manage members and pending invites, and tune a role-by-permission matrix with a locked owner column, live head counts and a duplicate-to-customise role. Install: `npx shadcn@latest add https://devl.dev/r/team-roles.json` · Markdown with source: https://devl.dev/screens/team-roles.md · npm: lucide-react, motion · coss ui: alert-dialog, avatar, button, input, menu, select
- [Verify Email](https://devl.dev/screens/verify-email): The 6-digit code step: a centred code field split 3 + 3, a shake when the code is wrong, a resend timer that counts down and a mail icon that turns into a check. Install: `npx shadcn@latest add https://devl.dev/r/verify-email.json` · Markdown with source: https://devl.dev/screens/verify-email.md · npm: lucide-react, motion · coss ui: button, otp-field
- [Video Call](https://devl.dev/screens/video-call): A video call where the grid reflows as people drop in and out, whoever is talking gets a soft ring and a pulse, reactions float up the stage, and chat and people slide in beside it. Install: `npx shadcn@latest add https://devl.dev/r/video-call.json` · Markdown with source: https://devl.dev/screens/video-call.md · npm: lucide-react, motion · coss ui: avatar, button, input-group, kbd, menu, popover, tooltip

## Motion

- [Blur Rise](https://devl.dev/motion/blur-rise): Text that drifts up and comes into focus a letter or a word at a time as it scrolls into view, quick enough that nobody waits to read it. Install: `npx shadcn@latest add https://devl.dev/r/blur-rise.json` · Markdown with source: https://devl.dev/motion/blur-rise.md · npm: motion
- [Card Deal](https://devl.dev/motion/card-deal): A grid that deals itself out from one point like a hand of cards: each card flies to its slot tilted and settles flat, and a shuffle sweeps them back into the deck and deals a fresh order, even mid-flight. Install: `npx shadcn@latest add https://devl.dev/r/card-deal.json` · Markdown with source: https://devl.dev/motion/card-deal.md · npm: motion
- [Confetti Burst](https://devl.dev/motion/confetti-burst): Confetti that blooms out of the button you pressed, hangs at the top of its arc in the air drag, flutters as each piece turns over and drifts down; reduced motion gets a quick check instead. Install: `npx shadcn@latest add https://devl.dev/r/confetti-burst.json` · Markdown with source: https://devl.dev/motion/confetti-burst.md · npm: lucide-react, motion
- [Drip Loaders](https://devl.dev/motion/drip-loaders): Three loaders made of liquid in whatever colour you like: a comet of drops that stretches and gathers, a bead that drips into a pool, and a dot that splits and flows back together. Install: `npx shadcn@latest add https://devl.dev/r/drip-loaders.json` · Markdown with source: https://devl.dev/motion/drip-loaders.md · npm: motion
- [Elastic List](https://devl.dev/motion/elastic-list): A scrolling list with real rubber-band edges: drag or flick past either end and it stretches with growing resistance, then springs back, pulling down from the top winds up a spinner that snaps when it's ready to refresh, and the wheel hands off to the page once you reach an end. Install: `npx shadcn@latest add https://devl.dev/r/elastic-list.json` · Markdown with source: https://devl.dev/motion/elastic-list.md · npm: motion
- [Flip Clock](https://devl.dev/motion/flip-clock): A split-flap countdown where each changed digit's top flap falls away under gravity, darkening as it turns, and the new lower flap lands with one small rebound. Install: `npx shadcn@latest add https://devl.dev/r/flip-clock.json` · Markdown with source: https://devl.dev/motion/flip-clock.md · npm: motion
- [Highlighter](https://devl.dev/motion/highlighter): A marker pen that sweeps behind your words one line after another, with a chisel tip, slightly ragged edges and ink that pools where each stroke starts and stops; runs when it scrolls into view or when its row is hovered. Install: `npx shadcn@latest add https://devl.dev/r/highlighter.json` · Markdown with source: https://devl.dev/motion/highlighter.md · npm: motion
- [Ink Stamp](https://devl.dev/motion/ink-stamp): A rubber stamp that rises, winds up and slams onto the page with a quick squash and a jolt through the card, lifting away to leave a rough, slightly bled ink impression that comes out a little different every time. Install: `npx shadcn@latest add https://devl.dev/r/ink-stamp.json` · Markdown with source: https://devl.dev/motion/ink-stamp.md · npm: motion
- [Lava Lamp](https://devl.dev/motion/lava-lamp): Warm wax blobs that wander, melt into one another and drift apart behind your content, with one that lazily trails your cursor. Install: `npx shadcn@latest add https://devl.dev/r/lava-lamp.json` · Markdown with source: https://devl.dev/motion/lava-lamp.md · npm: motion
- [Lift to Open](https://devl.dev/motion/lift-to-open): A thumbnail that lifts off the grid and grows into its own detail view as one object, cover and title travelling with it, the details fading in once it lands; Escape or a click outside folds it back into its exact slot. Install: `npx shadcn@latest add https://devl.dev/r/lift-to-open.json` · Markdown with source: https://devl.dev/motion/lift-to-open.md · npm: motion, lucide-react
- [Like Burst](https://devl.dev/motion/like-burst): A heart that squeezes and pops full with a thin ring and a flick of sparks, while the count rolls over digit by digit like an odometer; unliking fades back quietly. Install: `npx shadcn@latest add https://devl.dev/r/like-burst.json` · Markdown with source: https://devl.dev/motion/like-burst.md · npm: lucide-react, motion
- [Liquid Cursor](https://devl.dev/motion/liquid-cursor): Inside its card the pointer becomes a drop of liquid with a short trail; hover a link or button and the drop pours itself into that shape, then pinches free when you move on. Install: `npx shadcn@latest add https://devl.dev/r/liquid-cursor.json` · Markdown with source: https://devl.dev/motion/liquid-cursor.md · npm: motion
- [Liquid FAB](https://devl.dev/motion/liquid-fab): A round action button that squeezes out its actions as droplets: each one stretches away, pinches off into its own button and gets drawn back in when you close it, with labels as tooltips and full keyboard support. Install: `npx shadcn@latest add https://devl.dev/r/liquid-fab.json` · Markdown with source: https://devl.dev/motion/liquid-fab.md · npm: lucide-react, motion · coss ui: tooltip
- [Magnetic](https://devl.dev/motion/magnetic): Buttons and icons lean toward your pointer as it comes near, labels drifting a little further than their buttons, then spring back the moment you move away. Install: `npx shadcn@latest add https://devl.dev/r/magnetic.json` · Markdown with source: https://devl.dev/motion/magnetic.md · npm: motion
- [Margin Notes](https://devl.dev/motion/margin-notes): A reviewer's pen that draws itself onto your text as it scrolls into view: wobbly circles, double underlines, boxes and strike-throughs, then arrows that curve from a handwritten note to the words it means. Install: `npx shadcn@latest add https://devl.dev/r/margin-notes.json` · Markdown with source: https://devl.dev/motion/margin-notes.md · npm: motion
- [Marquee Text](https://devl.dev/motion/marquee-text): An oversized headline that scrolls forever in alternating solid and outlined words, gliding to a halt when you hover instead of freezing mid-word. Install: `npx shadcn@latest add https://devl.dev/r/marquee-text.json` · Markdown with source: https://devl.dev/motion/marquee-text.md · npm: motion
- [Morph Icons](https://devl.dev/motion/morph-icons): Menu to close, play to pause, plus to check, sun to moon: each pair is one set of paths in two poses, so lines rotate and stretch into place on a spring and reverse cleanly mid-way. Install: `npx shadcn@latest add https://devl.dev/r/morph-icons.json` · Markdown with source: https://devl.dev/motion/morph-icons.md · npm: motion
- [Odometer](https://devl.dev/motion/odometer): Digits that turn like a real counter: every place rolls the way the number moved, so 9 ticks over to 0 instead of spinning back, and it counts up the first time you scroll to it. Install: `npx shadcn@latest add https://devl.dev/r/odometer.json` · Markdown with source: https://devl.dev/motion/odometer.md · npm: motion
- [Pour Progress](https://devl.dev/motion/pour-progress): Progress you can watch fill up: a stream pours in from the top, the surface sloshes and settles as the level eases to the value, and hitting 100% sends out a small ripple. Comes as a round vessel or a slim bar. Install: `npx shadcn@latest add https://devl.dev/r/pour-progress.json` · Markdown with source: https://devl.dev/motion/pour-progress.md · npm: motion
- [Press Ripple](https://devl.dev/motion/press-ripple): A quiet wave that spreads from exactly where you pressed, clipped to the element's corners, finishes filling even on a quick tap, and gives Enter and Space the same feedback from the centre. Install: `npx shadcn@latest add https://devl.dev/r/press-ripple.json` · Markdown with source: https://devl.dev/motion/press-ripple.md · npm: motion
- [Rim Light](https://devl.dev/motion/rim-light): A point of light that laps a card's border at a steady pace with a fading tail, tracing rounded corners exactly; every beam on the page shares one clock, so busy cards pulse in step. Install: `npx shadcn@latest add https://devl.dev/r/rim-light.json` · Markdown with source: https://devl.dev/motion/rim-light.md · npm: motion
- [Scramble Text](https://devl.dev/motion/scramble-text): Text that decodes from random glyphs into the real words, sweeping left to right on view, on hover or on demand, with a monospace variant for codes and labels. Install: `npx shadcn@latest add https://devl.dev/r/scramble-text.json` · Markdown with source: https://devl.dev/motion/scramble-text.md · npm: motion
- [Skeleton Sweep](https://devl.dev/motion/skeleton-sweep): Loading placeholders lit by one sweep of light that crosses the whole card at once, with a matching glint for “Drafting…” status lines. Install: `npx shadcn@latest add https://devl.dev/r/skeleton-sweep.json` · Markdown with source: https://devl.dev/motion/skeleton-sweep.md · npm: motion
- [Spotlight Text](https://devl.dev/motion/spotlight-text): Dimmed copy with a soft warm spotlight that trails your pointer, bringing the words underneath to full contrast and uncovering a line that isn't there otherwise; on touch, or once you leave, the light drifts on a slow path of its own. Install: `npx shadcn@latest add https://devl.dev/r/spotlight-text.json` · Markdown with source: https://devl.dev/motion/spotlight-text.md · npm: motion
- [Ticket Tear](https://devl.dev/motion/ticket-tear): A booking ticket that, once confirmed, rips along its perforation: the stub pulls open from the top, comes free and drops away with a lazy spin, and the ticket you keep slides back to centre with its torn edge intact. Install: `npx shadcn@latest add https://devl.dev/r/ticket-tear.json` · Markdown with source: https://devl.dev/motion/ticket-tear.md · npm: motion
- [Torch Grid](https://devl.dev/motion/torch-grid): One soft light follows your pointer across a grid of cards, washing over the one you're on and catching the rims of its neighbours across the gaps. Install: `npx shadcn@latest add https://devl.dev/r/torch-grid.json` · Markdown with source: https://devl.dev/motion/torch-grid.md
- [Typewriter](https://devl.dev/motion/typewriter): Types a phrase with a human rhythm, holds it long enough to read, then backspaces or selects it away and moves on; the caret only blinks while it waits. Install: `npx shadcn@latest add https://devl.dev/r/typewriter.json` · Markdown with source: https://devl.dev/motion/typewriter.md · npm: motion

## Illustrations

- [Bell Quiet](https://devl.dev/illustrations/bell-quiet): Empty-state art for notifications: a sleepy bell breathing out little z's – hover and it startles awake with a tiny ring, then dozes off again. Install: `npx shadcn@latest add https://devl.dev/r/bell-quiet.json` · Markdown with source: https://devl.dev/illustrations/bell-quiet.md · npm: motion
- [Card Stack](https://devl.dev/illustrations/card-stack): Payment cards tucked in a stitched leather wallet – hover and they rise out in a fan, click the front one to lift it clear and flip it, or a peeking one to pull it forward. Install: `npx shadcn@latest add https://devl.dev/r/card-stack.json` · Markdown with source: https://devl.dev/illustrations/card-stack.md · npm: motion
- [Carrier Bird](https://devl.dev/illustrations/carrier-bird): A round little bird hops beside a sealed letter; press send and it hops over, grabs the envelope and flaps off on a dotted trail before a tick confirms it's sent. Install: `npx shadcn@latest add https://devl.dev/r/carrier-bird.json` · Markdown with source: https://devl.dev/illustrations/carrier-bird.md · npm: lucide-react, motion · coss ui: button
- [Desk Bot](https://devl.dev/illustrations/desk-bot): A little desk robot that follows your cursor with glowing eyes, perks its antenna when you come close, and nods off after a few quiet seconds until you tap it awake. Install: `npx shadcn@latest add https://devl.dev/r/desk-bot.json` · Markdown with source: https://devl.dev/illustrations/desk-bot.md · npm: motion
- [Dot Map](https://devl.dev/illustrations/dot-map): A dotted world map drawn from a hand-made land mask, with one region lit up, live sessions pulsing across it and a switcher that moves the spotlight. Install: `npx shadcn@latest add https://devl.dev/r/dot-map.json` · Markdown with source: https://devl.dev/illustrations/dot-map.md · npm: motion · coss ui: segmented-control
- [Droplet Ring](https://devl.dev/illustrations/droplet-ring): Your mark on a liquid disc that buds app tiles out like droplets, springs them into a ring, lets them bob for a moment, then pulls them back in and starts again. Install: `npx shadcn@latest add https://devl.dev/r/droplet-ring.json` · Markdown with source: https://devl.dev/illustrations/droplet-ring.md · npm: motion
- [Empty Bag](https://devl.dev/illustrations/empty-bag): Empty-cart art: a shopping bag slumps and sighs, perks up when a price tag dangles in, and puffs up proudly with a bounce when you add something. Install: `npx shadcn@latest add https://devl.dev/r/empty-bag.json` · Markdown with source: https://devl.dev/illustrations/empty-bag.md · npm: lucide-react, motion · coss ui: button
- [Envelope](https://devl.dev/illustrations/envelope): A kraft envelope that pops its wax seal, swings the flap open and lets a letter spring up – then tucks it back in and reseals itself. Install: `npx shadcn@latest add https://devl.dev/r/envelope.json` · Markdown with source: https://devl.dev/illustrations/envelope.md · npm: motion
- [Gift Box](https://devl.dev/illustrations/gift-box): A referral reward that wobbles with anticipation: the bow unties, the lid pops off and lands beside it, and a credit coupon rises out in a warm glow with a few sparkles. Install: `npx shadcn@latest add https://devl.dev/r/gift-box.json` · Markdown with source: https://devl.dev/illustrations/gift-box.md · npm: lucide-react, motion · coss ui: button
- [Growth Chart](https://devl.dev/illustrations/growth-chart): A record-month moment: a little ball hops up a staircase of bars, each one springing up under it as the total ticks over, and plants a flag on the peak. Install: `npx shadcn@latest add https://devl.dev/r/growth-chart.json` · Markdown with source: https://devl.dev/illustrations/growth-chart.md · npm: lucide-react, motion
- [Inbox Zero](https://devl.dev/illustrations/inbox-zero): A tidy desk for the moment the inbox empties: the last email folds into a paper plane, loops out through the window, the counter rolls to zero and the dusk sky turns to day. Install: `npx shadcn@latest add https://devl.dev/r/inbox-zero.json` · Markdown with source: https://devl.dev/illustrations/inbox-zero.md · npm: motion
- [Keyboard Cat](https://devl.dev/illustrations/keyboard-cat): Loading art with a cat loafing on a laptop: its paws knead the keys so they light up while code types out and the progress bar fills, then it stretches and hops off when the job is done. Install: `npx shadcn@latest add https://devl.dev/r/keyboard-cat.json` · Markdown with source: https://devl.dev/illustrations/keyboard-cat.md · npm: motion
- [Launch Pad](https://devl.dev/illustrations/launch-pad): A little rocket venting steam on its pad – click and it lights up, lifts off on a trail of smoke, then drops back in on a retro burn and lands. Install: `npx shadcn@latest add https://devl.dev/r/launch-pad.json` · Markdown with source: https://devl.dev/illustrations/launch-pad.md · npm: motion
- [Night Owl](https://devl.dev/illustrations/night-owl): An owl on a branch that follows your cursor and tilts its head at you. Wide awake under the moon in dark mode, heavy-lidded and snoozing in light mode. Install: `npx shadcn@latest add https://devl.dev/r/night-owl.json` · Markdown with source: https://devl.dev/illustrations/night-owl.md · npm: motion
- [Plant Progress](https://devl.dev/illustrations/plant-progress): A seedling that grows with your progress value – the stem climbs, a leaf unfurls at each step, and at 100% it flowers. Install: `npx shadcn@latest add https://devl.dev/r/plant-progress.json` · Markdown with source: https://devl.dev/illustrations/plant-progress.md · npm: motion
- [Search Scan](https://devl.dev/illustrations/search-scan): Empty-state art for search: a magnifier reads down a page, zooming the lines under its lens, until it lands on the word you typed and highlights it. Install: `npx shadcn@latest add https://devl.dev/r/search-scan.json` · Markdown with source: https://devl.dev/illustrations/search-scan.md · npm: lucide-react, motion
- [Server Rack](https://devl.dev/illustrations/server-rack): A rack of humming units with blinking status lights – hover one and it slides forward, its bezel gliding off to show the drives inside. Install: `npx shadcn@latest add https://devl.dev/r/server-rack.json` · Markdown with source: https://devl.dev/illustrations/server-rack.md · npm: motion
- [Shield Lock](https://devl.dev/illustrations/shield-lock): A glass shield that fills with liquid as it checks a passkey – the padlock flips colour as the tide rises past it and snaps shut, while a bad key turns the water red and drains it away. Install: `npx shadcn@latest add https://devl.dev/r/shield-lock.json` · Markdown with source: https://devl.dev/illustrations/shield-lock.md · npm: lucide-react, motion
- [Sync Pair](https://devl.dev/illustrations/sync-pair): A laptop and a phone toss a document back and forth along a soft arc; when both edit at once, the two versions meet mid-air and merge into one with a check. Install: `npx shadcn@latest add https://devl.dev/r/sync-pair.json` · Markdown with source: https://devl.dev/illustrations/sync-pair.md · npm: motion
- [Unplugged](https://devl.dev/illustrations/unplugged): Offline empty-state art: a loose plug sways beside its socket and sparks now and then, until Reconnect pushes it home with a click and the status light turns green. Install: `npx shadcn@latest add https://devl.dev/r/unplugged.json` · Markdown with source: https://devl.dev/illustrations/unplugged.md · npm: lucide-react, motion · coss ui: button
- [Upload Cloud](https://devl.dev/illustrations/upload-cloud): Empty-state art for uploads: a soft, breathing goo cloud reaches down, scoops up the file waiting below, fills a ring with a live percentage and lands on a tick. Install: `npx shadcn@latest add https://devl.dev/r/upload-cloud.json` · Markdown with source: https://devl.dev/illustrations/upload-cloud.md · npm: lucide-react, motion
- [Webhook Relay](https://devl.dev/illustrations/webhook-relay): Signed event packets fan out from a relay to three endpoints; one fails, bounces back and retries with a growing backoff until it lands. Hover a node to pause and read it. Install: `npx shadcn@latest add https://devl.dev/r/webhook-relay.json` · Markdown with source: https://devl.dev/illustrations/webhook-relay.md · npm: lucide-react, motion