---
name: "@xevrion"
slug: "xevrion"
description: "A lab of small, crafted interaction experiments for React, built with Tailwind CSS v4 and Motion. Buttons, inputs, cards and playful objects, each with a live demo."
category: "Animated components"
tags: ["3d", "animation", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "editor", "forms", "icons", "loaders", "maps", "media", "navigation", "onboarding", "overlays", "pro-available", "tables", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "xevrion"
website: "https://lab.xevrion.dev"
github: "https://github.com/xevrion/ui-lab"
registry: "https://lab.xevrion.dev/r/registry.json"
pro: true
pro_url: "https://lab.xevrion.dev/lab/pricing-toggle"
github_stars: 76
component_count: 204
generated_at: "2026-10-10T06:32:55.998Z"
---

# @xevrion

A lab of small, crafted interaction experiments for React, built with Tailwind CSS v4 and Motion. Buttons, inputs, cards and playful objects, each with a live demo.

## Links

- Website: https://lab.xevrion.dev
- GitHub: https://github.com/xevrion/ui-lab
- Registry JSON: https://lab.xevrion.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/xevrion
- This file: https://sh4dcn.vercel.app/md/xevrion.md
- Pro / pricing: https://lab.xevrion.dev/lab/pricing-toggle

## Install

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

## Components (204)

| name | type | description | install |
| --- | --- | --- | --- |
| odometer | registry:component | Rolls forward like a mechanical counter and wraps from 999 back to 000. | `npx shadcn@latest add https://lab.xevrion.dev/r/odometer.json` |
| hold-to-delete | registry:component | Fills slowly while you commit to it, snaps back the moment you let go. | `npx shadcn@latest add https://lab.xevrion.dev/r/hold-to-delete.json` |
| segmented-control | registry:component | The pill stretches toward your pick like an inchworm, recoloring each label as its edge crosses. | `npx shadcn@latest add https://lab.xevrion.dev/r/segmented-control.json` |
| tilt-card | registry:component | Leans toward your cursor with a glare that follows the light. | `npx shadcn@latest add https://lab.xevrion.dev/r/tilt-card.json` |
| dock | registry:component | Icons swell as your cursor nears them, and launch with a macOS-style bounce. | `npx shadcn@latest add https://lab.xevrion.dev/r/dock.json` |
| sheet | registry:component | Drag it down or flick it away; pull it up and it pushes back. | `npx shadcn@latest add https://lab.xevrion.dev/r/sheet.json` |
| toast-stack | registry:component | Stacks with depth, fans out on hover, and each toast's edge drains as its timer. | `npx shadcn@latest add https://lab.xevrion.dev/r/toast-stack.json` |
| elastic-slider | registry:component | Stretches like rubber when you drag past the end, then springs back. | `npx shadcn@latest add https://lab.xevrion.dev/r/elastic-slider.json` |
| magnetic-button | registry:component | Stretches toward your cursor like soft rubber on a magnet, then wobbles home. | `npx shadcn@latest add https://lab.xevrion.dev/r/magnetic-button.json` |
| text-scramble | registry:component | Hover a word and a block cursor reads it in, one letter at a time. | `npx shadcn@latest add https://lab.xevrion.dev/r/text-scramble.json` |
| swipe-deck | registry:component | Fling a card away and the rest of the deck steps forward. | `npx shadcn@latest add https://lab.xevrion.dev/r/swipe-deck.json` |
| scroll-reveal | registry:component | Words light up one by one as you scroll through them. | `npx shadcn@latest add https://lab.xevrion.dev/r/scroll-reveal.json` |
| copy-button | registry:component | The two pages merge into one before a check draws itself in. | `npx shadcn@latest add https://lab.xevrion.dev/r/copy-button.json` |
| expanding-search | registry:component | Opens from a circle into a search field, and closes faster than it opens. | `npx shadcn@latest add https://lab.xevrion.dev/r/expanding-search.json` |
| accordion | registry:component | Answers unfold from under their question like a folded flap, and the row you clicked never moves. | `npx shadcn@latest add https://lab.xevrion.dev/r/accordion.json` |
| expanding-card | registry:component | Grows from its slot into a detail view and folds back when you are done. | `npx shadcn@latest add https://lab.xevrion.dev/r/expanding-card.json` |
| otp-input | registry:component | Six slots mirror one real input, so paste and SMS autofill just work. | `npx shadcn@latest add https://lab.xevrion.dev/r/otp-input.json` |
| toggle-switch | registry:component | Leans into the move when pressed, then springs across and squashes on landing. | `npx shadcn@latest add https://lab.xevrion.dev/r/toggle-switch.json` |
| command-palette | registry:component | Opens on ⌘K and filters commands as you type. | `npx shadcn@latest add https://lab.xevrion.dev/r/command-palette.json` |
| marquee | registry:component | Drifts endlessly past a reading lens, and brakes gently when you hover. | `npx shadcn@latest add https://lab.xevrion.dev/r/marquee.json` |
| reorder-list | registry:component | Picks rows up by the handle and slides the rest out of the way. | `npx shadcn@latest add https://lab.xevrion.dev/r/reorder-list.json` |
| compare-slider | registry:component | Drag the line to see what polish actually changes. | `npx shadcn@latest add https://lab.xevrion.dev/r/compare-slider.json` |
| multi-step-form | registry:component | Slides between steps while the card grows around each one. | `npx shadcn@latest add https://lab.xevrion.dev/r/multi-step-form.json` |
| upload-button | registry:component | Shrinks into a progress ring, fills, then checks off. | `npx shadcn@latest add https://lab.xevrion.dev/r/upload-button.json` |
| tooltip-group | registry:component | One tooltip slides from button to button and reshapes around each label. | `npx shadcn@latest add https://lab.xevrion.dev/r/tooltip-group.json` |
| dropdown-menu | registry:component | Grows out of its trigger, and press, drag, release picks an item like a native menu. | `npx shadcn@latest add https://lab.xevrion.dev/r/dropdown-menu.json` |
| dynamic-island | registry:component | Morphs between live states with a springy, Apple-style bounce. | `npx shadcn@latest add https://lab.xevrion.dev/r/dynamic-island.json` |
| scrub-input | registry:component | Drag the label and a tape measure runs under the needle, or just type. | `npx shadcn@latest add https://lab.xevrion.dev/r/scrub-input.json` |
| star-rating | registry:component | Hover to preview, click to commit with a little pop. | `npx shadcn@latest add https://lab.xevrion.dev/r/star-rating.json` |
| like-button | registry:component | Pops, bursts and rolls the count when you like. | `npx shadcn@latest add https://lab.xevrion.dev/r/like-button.json` |
| sliding-tabs | registry:component | An underline stretches toward the tab you pick while a soft pill follows your pointer. | `npx shadcn@latest add https://lab.xevrion.dev/r/sliding-tabs.json` |
| page-dots | registry:component | A pill that inches between pages like a worm and counts down to the next. | `npx shadcn@latest add https://lab.xevrion.dev/r/page-dots.json` |
| collapsible-sidebar | registry:component | Folds down to an icon rail, with labels that step aside before it closes. | `npx shadcn@latest add https://lab.xevrion.dev/r/collapsible-sidebar.json` |
| snap-carousel | registry:component | Snaps cards to center, drags with the mouse, and each card acts out its motion principle. | `npx shadcn@latest add https://lab.xevrion.dev/r/snap-carousel.json` |
| skeleton-loader | registry:component | Holds the exact shape of what is coming, so nothing jumps. | `npx shadcn@latest add https://lab.xevrion.dev/r/skeleton-loader.json` |
| context-menu | registry:component | Opens at your cursor and grows from it. | `npx shadcn@latest add https://lab.xevrion.dev/r/context-menu.json` |
| notification-bell | registry:component | Rings when something new arrives, and the badge rolls up with each one. | `npx shadcn@latest add https://lab.xevrion.dev/r/notification-bell.json` |
| avatar-stack | registry:component | Fans open when you reach for it, with a name above each face. | `npx shadcn@latest add https://lab.xevrion.dev/r/avatar-stack.json` |
| morphing-button | registry:component | Shrinks into a spinner while it saves, then answers with a check or a shake. | `npx shadcn@latest add https://lab.xevrion.dev/r/morphing-button.json` |
| kanban-board | registry:component | Lift a card and the others slide aside to make room for it. | `npx shadcn@latest add https://lab.xevrion.dev/r/kanban-board.json` |
| color-swatches | registry:component | The ring glides to the color you pick and the color floods the preview from that side. | `npx shadcn@latest add https://lab.xevrion.dev/r/color-swatches.json` |
| mini-calendar | registry:component | Months slide past in the direction you travel. | `npx shadcn@latest add https://lab.xevrion.dev/r/mini-calendar.json` |
| floating-label | registry:component | The label peels up letter by letter, and never covers what you wrote. | `npx shadcn@latest add https://lab.xevrion.dev/r/floating-label.json` |
| password-field | registry:component | Reveals the password with a wave of dots turning into letters; the meter fills as it gets stronger. | `npx shadcn@latest add https://lab.xevrion.dev/r/password-field.json` |
| filter-list | registry:component | Rows fade out of the way while the rest slide up to close the gap. | `npx shadcn@latest add https://lab.xevrion.dev/r/filter-list.json` |
| gauge | registry:component | Ticks light up as the value sweeps in, and a peak marker holds where it was before falling. | `npx shadcn@latest add https://lab.xevrion.dev/r/gauge.json` |
| sparkline | registry:component | Draws itself in, then scrubs to the nearest point under your cursor. | `npx shadcn@latest add https://lab.xevrion.dev/r/sparkline.json` |
| bar-chart | registry:component | Grows its bars from the baseline and springs them between two weeks. | `npx shadcn@latest add https://lab.xevrion.dev/r/bar-chart.json` |
| stacked-drawer | registry:component | Stacks iOS sheets that push the page back and drag down to dismiss. | `npx shadcn@latest add https://lab.xevrion.dev/r/stacked-drawer.json` |
| confetti-button | registry:component | A click pops confetti; hold it and the fuse burns until the whole thing blows. | `npx shadcn@latest add https://lab.xevrion.dev/r/confetti-button.json` |
| typewriter | registry:component | Types, pauses and rewrites the last word with a human rhythm. | `npx shadcn@latest add https://lab.xevrion.dev/r/typewriter.json` |
| tag-input | registry:component | Your typed words stay put while a chip forms around them. | `npx shadcn@latest add https://lab.xevrion.dev/r/tag-input.json` |
| range-slider | registry:component | Two thumbs that glide, stop at each other, and show their value as you drag. | `npx shadcn@latest add https://lab.xevrion.dev/r/range-slider.json` |
| number-stepper | registry:component | Rolls each digit the way the count moves, and speeds up the longer you hold. | `npx shadcn@latest add https://lab.xevrion.dev/r/number-stepper.json` |
| select-menu | registry:component | Opens with your current choice sitting exactly on the button, macOS style. | `npx shadcn@latest add https://lab.xevrion.dev/r/select-menu.json` |
| undo-toast | registry:component | Deletes instantly and gives you five seconds to change your mind. | `npx shadcn@latest add https://lab.xevrion.dev/r/undo-toast.json` |
| file-dropzone | registry:component | Its dashed edge marches when a file enters the window and seals solid when it is overhead. | `npx shadcn@latest add https://lab.xevrion.dev/r/file-dropzone.json` |
| chat-thread | registry:component | Replies arrive after a beat of typing, and the thread follows only if you are. | `npx shadcn@latest add https://lab.xevrion.dev/r/chat-thread.json` |
| loader-set | registry:component | Four loaders that each know how to finish: leapfrog dots, an inchworm bar, a ring that closes into a check. | `npx shadcn@latest add https://lab.xevrion.dev/r/loader-set.json` |
| wheel-picker | registry:component | Spins through the hours on a curved drum, just like iOS. | `npx shadcn@latest add https://lab.xevrion.dev/r/wheel-picker.json` |
| slide-to-confirm | registry:component | Drag the knob all the way across to confirm. | `npx shadcn@latest add https://lab.xevrion.dev/r/slide-to-confirm.json` |
| pull-to-refresh | registry:component | Pull the feed down and new posts slide in at the top. | `npx shadcn@latest add https://lab.xevrion.dev/r/pull-to-refresh.json` |
| hover-card | registry:component | One card travels between names as you hover them. | `npx shadcn@latest add https://lab.xevrion.dev/r/hover-card.json` |
| tree-view | registry:component | Folders unfold in place while the selection glides to the file you pick. | `npx shadcn@latest add https://lab.xevrion.dev/r/tree-view.json` |
| pricing-toggle | registry:component | Each digit rolls to its new price on its own, and new digits grow in. | `npx shadcn@latest add https://lab.xevrion.dev/r/pricing-toggle.json` |
| reading-progress | registry:component | A progress bar fills as you read while the time left counts down. | `npx shadcn@latest add https://lab.xevrion.dev/r/reading-progress.json` |
| code-block | registry:component | Switch files with a sliding underline and copy with one click. | `npx shadcn@latest add https://lab.xevrion.dev/r/code-block.json` |
| wave-text | registry:component | Letters rise in a wave that follows your cursor. | `npx shadcn@latest add https://lab.xevrion.dev/r/wave-text.json` |
| dot-grid | registry:component | Dots swell and part around your cursor, and a click sends a shockwave. | `npx shadcn@latest add https://lab.xevrion.dev/r/dot-grid.json` |
| spotlight-card | registry:component | The cursor is a lamp: cards catch its glow and their icons cast shadows away from it. | `npx shadcn@latest add https://lab.xevrion.dev/r/spotlight-card.json` |
| story-progress | registry:component | Tap through stories, hold to pause. | `npx shadcn@latest add https://lab.xevrion.dev/r/story-progress.json` |
| data-table | registry:component | Sorts, selects and bulk-acts on rows without losing its place. | `npx shadcn@latest add https://lab.xevrion.dev/r/data-table.json` |
| combobox | registry:component | The person you pick flies out of the list and into the field. | `npx shadcn@latest add https://lab.xevrion.dev/r/combobox.json` |
| date-range-picker | registry:component | Paints the range as you hover, then commits it on the second click. | `npx shadcn@latest add https://lab.xevrion.dev/r/date-range-picker.json` |
| inline-edit | registry:component | Edits your name and bio in place without moving a pixel. | `npx shadcn@latest add https://lab.xevrion.dev/r/inline-edit.json` |
| dialog | registry:component | Opens a modal over the page, with a confirmation that stacks on top of it. | `npx shadcn@latest add https://lab.xevrion.dev/r/dialog.json` |
| pagination | registry:component | Numbers roll in place like an odometer; the one you click never moves. | `npx shadcn@latest add https://lab.xevrion.dev/r/pagination.json` |
| announcement-banner | registry:component | Dismissing folds the bar away and the page slides up to fill the gap. | `npx shadcn@latest add https://lab.xevrion.dev/r/announcement-banner.json` |
| shortcut-sheet | registry:component | Press ? anywhere to see every shortcut, then press one to watch it light up. | `npx shadcn@latest add https://lab.xevrion.dev/r/shortcut-sheet.json` |
| spring-playground | registry:component | Tune a spring and watch its overshoot and settle, plotted live. | `npx shadcn@latest add https://lab.xevrion.dev/r/spring-playground.json` |
| easing-editor | registry:component | Drag a cubic-bezier into shape and see it move. | `npx shadcn@latest add https://lab.xevrion.dev/r/easing-editor.json` |
| stagger-visualizer | registry:component | Shows what per-item delay actually does to a list entrance. | `npx shadcn@latest add https://lab.xevrion.dev/r/stagger-visualizer.json` |
| onboarding-checklist | registry:component | A setup checklist that counts up as you go and celebrates the finish. | `npx shadcn@latest add https://lab.xevrion.dev/r/onboarding-checklist.json` |
| flip-card | registry:component | Turns over in 3D to show what is on the back. | `npx shadcn@latest add https://lab.xevrion.dev/r/flip-card.json` |
| icon-morph | registry:component | Icons reshape themselves between states instead of swapping. | `npx shadcn@latest add https://lab.xevrion.dev/r/icon-morph.json` |
| sticky-stack | registry:component | Cards pile up and sink back as you scroll. | `npx shadcn@latest add https://lab.xevrion.dev/r/sticky-stack.json` |
| infinite-canvas | registry:component | Pan, pinch and zoom around a board of notes. | `npx shadcn@latest add https://lab.xevrion.dev/r/infinite-canvas.json` |
| drag-select | registry:component | Draw a box across files to select them, like the desktop. | `npx shadcn@latest add https://lab.xevrion.dev/r/drag-select.json` |
| sortable-grid | registry:component | Drag an app tile and the others slide out of its way. | `npx shadcn@latest add https://lab.xevrion.dev/r/sortable-grid.json` |
| magnet-lines | registry:component | Lines turn toward your cursor like iron filings near a magnet. | `npx shadcn@latest add https://lab.xevrion.dev/r/magnet-lines.json` |
| morphing-nav | registry:component | One dropdown panel reshapes and slides as you move between menu items. | `npx shadcn@latest add https://lab.xevrion.dev/r/morphing-nav.json` |
| color-picker | registry:component | Drag a color out of the square, then fine-tune hue and opacity. | `npx shadcn@latest add https://lab.xevrion.dev/r/color-picker.json` |
| card-input | registry:component | Formats as you type, spots the card brand, and flips to show the CVC. | `npx shadcn@latest add https://lab.xevrion.dev/r/card-input.json` |
| radio-cards | registry:component | The selection ring glides to the plan you pick. | `npx shadcn@latest add https://lab.xevrion.dev/r/radio-cards.json` |
| checkbox-group | registry:component | Check marks draw themselves in, and Shift-click fills a range. | `npx shadcn@latest add https://lab.xevrion.dev/r/checkbox-group.json` |
| progress-stepper | registry:component | Fills the line toward the next step and unfills it in reverse. | `npx shadcn@latest add https://lab.xevrion.dev/r/progress-stepper.json` |
| promise-toast | registry:component | One toast that morphs from saving to saved, or to an error with retry. | `npx shadcn@latest add https://lab.xevrion.dev/r/promise-toast.json` |
| confirm-popover | registry:component | Asks before deleting, from a popover that grows out of the button. | `npx shadcn@latest add https://lab.xevrion.dev/r/confirm-popover.json` |
| activity-timeline | registry:component | New events slide in at the top as the line grows to meet them. | `npx shadcn@latest add https://lab.xevrion.dev/r/activity-timeline.json` |
| breadcrumbs | registry:component | Folds the middle of a deep path into a menu when space runs out. | `npx shadcn@latest add https://lab.xevrion.dev/r/breadcrumbs.json` |
| overflow-tabs | registry:component | Scrolls a long row of tabs, fading whichever edge still hides more. | `npx shadcn@latest add https://lab.xevrion.dev/r/overflow-tabs.json` |
| tab-bar | registry:component | A phone tab bar whose pill slides over and fills in the icon it lands on. | `npx shadcn@latest add https://lab.xevrion.dev/r/tab-bar.json` |
| selection-toolbar | registry:component | A formatting toolbar that grows out of whatever text you select. | `npx shadcn@latest add https://lab.xevrion.dev/r/selection-toolbar.json` |
| carousel-3d | registry:component | Spin a ring of cards and flick it to land on the one you were aiming for. | `npx shadcn@latest add https://lab.xevrion.dev/r/carousel-3d.json` |
| lens-reveal | registry:component | A lens follows your cursor and shows the specs hidden under a card. | `npx shadcn@latest add https://lab.xevrion.dev/r/lens-reveal.json` |
| elastic-string | registry:component | Pull a string and let go to watch it ring back to rest. | `npx shadcn@latest add https://lab.xevrion.dev/r/elastic-string.json` |
| particle-text | registry:component | A word made of dots that part around your cursor and burst when clicked. | `npx shadcn@latest add https://lab.xevrion.dev/r/particle-text.json` |
| theme-toggle | registry:component | A sun that folds its rays away and turns into a crescent moon. | `npx shadcn@latest add https://lab.xevrion.dev/r/theme-toggle.json` |
| bookmark-button | registry:component | Fills from the bottom up and lands with a small squash. | `npx shadcn@latest add https://lab.xevrion.dev/r/bookmark-button.json` |
| send-button | registry:component | The plane takes off along a curve, and a check lands in its place. | `npx shadcn@latest add https://lab.xevrion.dev/r/send-button.json` |
| download-button | registry:component | The arrow drops into the tray while the button fills with progress. | `npx shadcn@latest add https://lab.xevrion.dev/r/download-button.json` |
| contribution-heatmap | registry:component | A year of activity at a glance, sweeping in week by week. | `npx shadcn@latest add https://lab.xevrion.dev/r/contribution-heatmap.json` |
| donut-chart | registry:component | Draws itself in, then lifts whichever slice you point at. | `npx shadcn@latest add https://lab.xevrion.dev/r/donut-chart.json` |
| stat-counter | registry:component | Numbers count up to their value; scrub a sparkline and the figure rolls back through its history. | `npx shadcn@latest add https://lab.xevrion.dev/r/stat-counter.json` |
| leaderboard | registry:component | Players glide past each other to their new ranks. | `npx shadcn@latest add https://lab.xevrion.dev/r/leaderboard.json` |
| rotary-dial | registry:component | Drag a hole to the finger stop and each digit lands as the disc unwinds. | `npx shadcn@latest add https://lab.xevrion.dev/r/rotary-dial.json` |
| tape-measure | registry:component | Pull the blade out to measure; release the lock and it reels itself back in. | `npx shadcn@latest add https://lab.xevrion.dev/r/tape-measure.json` |
| pull-cord-switch | registry:component | Pull the ball chain to switch the site's lights; light pours from the bulb as a cone. | `npx shadcn@latest add https://lab.xevrion.dev/r/pull-cord-switch.json` |
| combination-lock | registry:component | Spin right, left, right to fill each number, then turn the handle to open. | `npx shadcn@latest add https://lab.xevrion.dev/r/combination-lock.json` |
| rubber-stamp | registry:component | Stamps a document approved or rejected, with ink that looks pressed in. | `npx shadcn@latest add https://lab.xevrion.dev/r/rubber-stamp.json` |
| sticky-note-peel | registry:component | Peel the top reminder off by its corner to mark it done. | `npx shadcn@latest add https://lab.xevrion.dev/r/sticky-note-peel.json` |
| receipt-printer | registry:component | Feeds a receipt out of the slot line by line; twist it against the cutter to tear it off. | `npx shadcn@latest add https://lab.xevrion.dev/r/receipt-printer.json` |
| tear-off-calendar | registry:component | Tear a day off to move forward, pull one back to go back. | `npx shadcn@latest add https://lab.xevrion.dev/r/tear-off-calendar.json` |
| balance-scale | registry:component | Weighs your pros against your cons on a balance that tips and slowly settles. | `npx shadcn@latest add https://lab.xevrion.dev/r/balance-scale.json` |
| tally-counter | registry:component | Counts in hand-drawn tally marks, one pen stroke at a time. | `npx shadcn@latest add https://lab.xevrion.dev/r/tally-counter.json` |
| ink-well | registry:component | Drains a glass inkwell as you spend your character limit. | `npx shadcn@latest add https://lab.xevrion.dev/r/ink-well.json` |
| typing-seismograph | registry:component | Records the rhythm of your typing on a scrolling seismograph. | `npx shadcn@latest add https://lab.xevrion.dev/r/typing-seismograph.json` |
| envelope-send | registry:component | Folds your note into an envelope, seals it and sends it off. | `npx shadcn@latest add https://lab.xevrion.dev/r/envelope-send.json` |
| paper-shredder | registry:component | Drag a file into the shredder and it comes out in strips. | `npx shadcn@latest add https://lab.xevrion.dev/r/paper-shredder.json` |
| tip-jar | registry:component | Coins drop into a glass jar and pile up as the total counts. | `npx shadcn@latest add https://lab.xevrion.dev/r/tip-jar.json` |
| zipper-reveal | registry:component | Unzip the pouch to reveal the code inside. | `npx shadcn@latest add https://lab.xevrion.dev/r/zipper-reveal.json` |
| cassette-scrubber | registry:component | Scrub audio by dragging the tape, with reels that spin like the real thing. | `npx shadcn@latest add https://lab.xevrion.dev/r/cassette-scrubber.json` |
| bubble-wrap | registry:component | Pop every bubble to clear the list, one click or one long swipe. | `npx shadcn@latest add https://lab.xevrion.dev/r/bubble-wrap.json` |
| sundial-picker | registry:component | Pick a time by dragging the sun across the sky. | `npx shadcn@latest add https://lab.xevrion.dev/r/sundial-picker.json` |
| folded-map | registry:component | An itinerary that unfolds panel by panel like a paper road map, recentring as it opens. | `npx shadcn@latest add https://lab.xevrion.dev/r/folded-map.json` |
| scroll-spine | registry:component | Maps the article as a spine of bands, each as long as its section, filling in as you read. | `npx shadcn@latest add https://lab.xevrion.dev/r/scroll-spine.json` |
| availability-badge | registry:component | Shows when the owner is working, and when that overlaps with your day. | `npx shadcn@latest add https://lab.xevrion.dev/r/availability-badge.json` |
| sidenotes | registry:component | Slides footnotes into the margin beside their sentence, and folds them inline on narrow screens. | `npx shadcn@latest add https://lab.xevrion.dev/r/sidenotes.json` |
| footer-signature | registry:component | Signs the footer by hand when it scrolls into view, slowing through every loop. | `npx shadcn@latest add https://lab.xevrion.dev/r/footer-signature.json` |
| changelog-stack | registry:component | Files each release card behind the stack like a hand riffling index cards. | `npx shadcn@latest add https://lab.xevrion.dev/r/changelog-stack.json` |
| pricing-calculator | registry:component | Itemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold. | `npx shadcn@latest add https://lab.xevrion.dev/r/pricing-calculator.json` |
| feature-spotlight | registry:component | A camera zooms into the part of the product screenshot each feature describes as you scroll past it. | `npx shadcn@latest add https://lab.xevrion.dev/r/feature-spotlight.json` |
| testimonial-highlight | registry:component | Swipes a highlighter across the line that sold the customer, one line at a time. | `npx shadcn@latest add https://lab.xevrion.dev/r/testimonial-highlight.json` |
| waitlist-join | registry:component | Drops your face into a real queue and rolls out your place in line. | `npx shadcn@latest add https://lab.xevrion.dev/r/waitlist-join.json` |
| cookie-consent | registry:component | Bakes a bite back into the cookie for every category you allow. | `npx shadcn@latest add https://lab.xevrion.dev/r/cookie-consent.json` |
| email-typo-fix | registry:component | Catches gmial.com and fixes it by moving only the letters that were wrong. | `npx shadcn@latest add https://lab.xevrion.dev/r/email-typo-fix.json` |
| coupon-code | registry:component | Stamps your promo code onto the order and strikes out the price it beat. | `npx shadcn@latest add https://lab.xevrion.dev/r/coupon-code.json` |
| code-morph | registry:component | Glides every surviving token to its new spot as a tutorial moves to the next step. | `npx shadcn@latest add https://lab.xevrion.dev/r/code-morph.json` |
| image-hotspots | registry:component | Draws a leader line to one label card that travels between a watch's features, never covering the product. | `npx shadcn@latest add https://lab.xevrion.dev/r/image-hotspots.json` |
| quote-share | registry:component | Lifts the words you select out of the paragraph and into a shareable quote card. | `npx shadcn@latest add https://lab.xevrion.dev/r/quote-share.json` |
| waveform-player | registry:component | Inks in a podcast's waveform, with chapter markers and a ghost playhead. | `npx shadcn@latest add https://lab.xevrion.dev/r/waveform-player.json` |
| size-picker | registry:component | Pulls a tee over a body outline so you see the fit before you pick the size. | `npx shadcn@latest add https://lab.xevrion.dev/r/size-picker.json` |
| order-tracker | registry:component | Drives a parcel across a street map to your door and stamps each stop as it arrives. | `npx shadcn@latest add https://lab.xevrion.dev/r/order-tracker.json` |
| gift-wrap | registry:component | Folds kraft paper over the cart item, ties a ribbon and bow, and asks who it's for. | `npx shadcn@latest add https://lab.xevrion.dev/r/gift-wrap.json` |
| store-hours | registry:component | Draws the week's hours on a 24-hour scale and can redraw them in your own time zone. | `npx shadcn@latest add https://lab.xevrion.dev/r/store-hours.json` |
| word-rotator | registry:component | Keeps the letters two words share and glides them into place as the rest trade out. | `npx shadcn@latest add https://lab.xevrion.dev/r/word-rotator.json` |
| keycap-hint | registry:component | Keycaps that sink when you press the real keys. | `npx shadcn@latest add https://lab.xevrion.dev/r/keycap-hint.json` |
| caps-lock-warning | registry:component | A small caps lock key with its light on slides into the field when caps is on. | `npx shadcn@latest add https://lab.xevrion.dev/r/caps-lock-warning.json` |
| eye-toggle | registry:component | The eye shuts when your password is hidden and watches while you type. | `npx shadcn@latest add https://lab.xevrion.dev/r/eye-toggle.json` |
| relative-time | registry:component | Says "4 min ago" and changes only at the moment the words would change. | `npx shadcn@latest add https://lab.xevrion.dev/r/relative-time.json` |
| copy-email | registry:component | Click the address and its letters flip, one by one, into "Copied to clipboard". | `npx shadcn@latest add https://lab.xevrion.dev/r/copy-email.json` |
| directional-underline | registry:component | The underline comes in from the side your cursor entered and leaves toward the side it left. | `npx shadcn@latest add https://lab.xevrion.dev/r/directional-underline.json` |
| hover-preview-link | registry:component | Hover a link to get a preview card that trails your cursor and leans as it moves. | `npx shadcn@latest add https://lab.xevrion.dev/r/hover-preview-link.json` |
| scribble-checkbox | registry:component | Checks itself off with a quick pen stroke and strikes the words through. | `npx shadcn@latest add https://lab.xevrion.dev/r/scribble-checkbox.json` |
| focus-paragraph | registry:component | Brings the sentence you're reading forward and lets the rest step back. | `npx shadcn@latest add https://lab.xevrion.dev/r/focus-paragraph.json` |
| text-progress | registry:component | Fills the label itself with ink as the upload runs. | `npx shadcn@latest add https://lab.xevrion.dev/r/text-progress.json` |
| spoiler-text | registry:component | Hides a spoiler under shimmering grain that blows away from your click. | `npx shadcn@latest add https://lab.xevrion.dev/r/spoiler-text.json` |
| badge-counter | registry:component | Rolls its digits the way the count moved and bumps each time it changes. | `npx shadcn@latest add https://lab.xevrion.dev/r/badge-counter.json` |
| star-button | registry:component | Spins once and throws off tiny sparks when starred, then rolls the count. | `npx shadcn@latest add https://lab.xevrion.dev/r/star-button.json` |
| follow-button | registry:component | Turns its plus into a check as you follow, and warns before you unfollow. | `npx shadcn@latest add https://lab.xevrion.dev/r/follow-button.json` |
| live-indicator | registry:component | Breathes while live, lets the viewer count drift, and blinks hollow while reconnecting. | `npx shadcn@latest add https://lab.xevrion.dev/r/live-indicator.json` |
| mini-clock | registry:component | A tiny analog clock that sweeps in its city's time and turns dark after sundown. | `npx shadcn@latest add https://lab.xevrion.dev/r/mini-clock.json` |
| pixel-loader | registry:component | A tiny pixel grid that cycles spiral, snake, pulse and checker, then draws a check when done. | `npx shadcn@latest add https://lab.xevrion.dev/r/pixel-loader.json` |
| greeting | registry:component | Greets by time of day, with a sun or moon that rises into place along an arc. | `npx shadcn@latest add https://lab.xevrion.dev/r/greeting.json` |
| arrow-callout | registry:component | A handwritten note whose arrow draws itself to whatever it points at. | `npx shadcn@latest add https://lab.xevrion.dev/r/arrow-callout.json` |
| voice-orb | registry:component | A glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks. | `npx shadcn@latest add https://lab.xevrion.dev/r/voice-orb.json` |
| call-widget | registry:component | Accept turns into hang-up as the call controls unfold out of it, one by one. | `npx shadcn@latest add https://lab.xevrion.dev/r/call-widget.json` |
| logo-orbit | registry:component | Logos orbit a heading on tilted rings, passing behind it, and brake to a stop when you point. | `npx shadcn@latest add https://lab.xevrion.dev/r/logo-orbit.json` |
| now-playing | registry:component | A listening-to pill whose record slides out from behind the cover and spins while it plays. | `npx shadcn@latest add https://lab.xevrion.dev/r/now-playing.json` |
| uptime-bar | registry:component | Point at any day and the row's own caption tells you what happened. | `npx shadcn@latest add https://lab.xevrion.dev/r/uptime-bar.json` |
| helpful-prompt | registry:component | Asks if the page helped, and on a no opens into a field right where the question was. | `npx shadcn@latest add https://lab.xevrion.dev/r/helpful-prompt.json` |
| back-to-top | registry:component | Fills its ring as you read, and when you press it the arrow lifts off while the page glides back up. | `npx shadcn@latest add https://lab.xevrion.dev/r/back-to-top.json` |
| share-button | registry:component | Opens in place into copy, X and email, and the link turns into a check when it is copied. | `npx shadcn@latest add https://lab.xevrion.dev/r/share-button.json` |
| autosave-status | registry:component | A dot for unsaved changes splits into three while saving, then gathers into a check. | `npx shadcn@latest add https://lab.xevrion.dev/r/autosave-status.json` |
| reactions | registry:component | Tap a reaction to add yours, or pick one and watch it fly into its pill as the count rolls. | `npx shadcn@latest add https://lab.xevrion.dev/r/reactions.json` |
| shortcut-recorder | registry:component | Press keys to set a shortcut: keycaps appear as you hold them, and it tells you when a combo is taken. | `npx shadcn@latest add https://lab.xevrion.dev/r/shortcut-recorder.json` |
| storage-meter | registry:component | Point at any slice to read its size, then clear the cache and watch the total count down. | `npx shadcn@latest add https://lab.xevrion.dev/r/storage-meter.json` |
| status-picker | registry:component | Pick a status and the badge on your avatar turns into its shape: a dot, a moon, a stop sign or a ring. | `npx shadcn@latest add https://lab.xevrion.dev/r/status-picker.json` |
| mood-slider | registry:component | The thumb is a face that frowns, grins and leans into the drag as you rate your day. | `npx shadcn@latest add https://lab.xevrion.dev/r/mood-slider.json` |
| signature-pad | registry:component | Ink that swells where you slow down, and wipes away the way you wrote it. | `npx shadcn@latest add https://lab.xevrion.dev/r/signature-pad.json` |
| card-number-reveal | registry:component | Rolls the hidden digits in when you press the eye, then hides them again when the ring runs out. | `npx shadcn@latest add https://lab.xevrion.dev/r/card-number-reveal.json` |
| sidebar-highlight | registry:component | A dot travels to whatever you pick and takes on its section colour, which then wipes across the label. | `npx shadcn@latest add https://lab.xevrion.dev/r/sidebar-highlight.json` |
| payment-card | registry:component | Floods with the card network's colours from the corner the moment the first digits give it away. | `npx shadcn@latest add https://lab.xevrion.dev/r/payment-card.json` |
| sidebar-submenu | registry:component | Opens one section at a time and lights the branch from the title down to the item you are on. | `npx shadcn@latest add https://lab.xevrion.dev/r/sidebar-submenu.json` |
| floating-action-menu | registry:component | The plus folds away and its actions unfold upward out of the spot it sat in, over a frosted screen. | `npx shadcn@latest add https://lab.xevrion.dev/r/floating-action-menu.json` |
| push-lock-button | registry:component | Bottoms out while you hold it, catches halfway when you let go and lights the lamp, and springs back on the next press. | `npx shadcn@latest add https://lab.xevrion.dev/r/push-lock-button.json` |
| qr-reveal | registry:component | The code leaves the button as a cloud of ink dust that billows up and settles, grain by grain, into a QR you can scan. | `npx shadcn@latest add https://lab.xevrion.dev/r/qr-reveal.json` |
| wallet-cards | registry:component | Tap the cards peeking out of the home screen and the front one lifts into a carousel as the page changes around it; close it and it drops back into the stack. | `npx shadcn@latest add https://lab.xevrion.dev/r/wallet-cards.json` |
| clock-field | registry:component | A field of clocks whose hands turn as one, melting between a wave, a vortex, rings and a funnel; they look at your pointer, and a click sends a ripple through … | `npx shadcn@latest add https://lab.xevrion.dev/r/clock-field.json` |
| x-walkers | registry:component | X marks crawl across a field of dots, reaching their arms to the next dot and dragging themselves over; they keep away from your pointer, and a click sets down… | `npx shadcn@latest add https://lab.xevrion.dev/r/x-walkers.json` |
| glass-lens | registry:component | A ball of glass rides over the words and magnifies whatever it passes; press and the whole paragraph shivers and flushes indigo. | `npx shadcn@latest add https://lab.xevrion.dev/r/glass-lens.json` |
| orbit-gallery | registry:component | Small photographs turn slowly round a name; hover one and the ring stops and makes room, click it and it grows into the middle while the rest bloom outward. | `npx shadcn@latest add https://lab.xevrion.dev/r/orbit-gallery.json` |
| binary-year | registry:component | A year written in binary; reach for it and a wave runs in from the right, the leading digits fade to zeros and the year you know types itself in. | `npx shadcn@latest add https://lab.xevrion.dev/r/binary-year.json` |
| gooey-menu | registry:component | One small button that opens three ways, all made of the same liquid: a menu that pulls free, a button that swells into one, and a dial that bubbles out. | `npx shadcn@latest add https://lab.xevrion.dev/r/gooey-menu.json` |

## For AI agents

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