sh4dcnv2 · atlas
← libraries

@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.

204 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://lab.xevrion.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://lab.xevrion.dev/r/registry.json
bun bunx shadcn@latest add https://lab.xevrion.dev/r/registry.json
fetch registry curl -s https://lab.xevrion.dev/r/registry.json

Components

204 total
Odometer 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 component

Opens on ⌘K and filters commands as you type.

npx shadcn@latest add https://lab.xevrion.dev/r/command-palette.json
Marquee 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 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 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 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 component

Shrinks into a progress ring, fills, then checks off.

npx shadcn@latest add https://lab.xevrion.dev/r/upload-button.json
Tooltip group 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 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 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 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 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 component

Pops, bursts and rolls the count when you like.

npx shadcn@latest add https://lab.xevrion.dev/r/like-button.json
Sliding tabs 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 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 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 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 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 component

Opens at your cursor and grows from it.

npx shadcn@latest add https://lab.xevrion.dev/r/context-menu.json
Notification bell 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 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 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 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 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 component

Months slide past in the direction you travel.

npx shadcn@latest add https://lab.xevrion.dev/r/mini-calendar.json
Floating label 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 component

One card travels between names as you hover them.

npx shadcn@latest add https://lab.xevrion.dev/r/hover-card.json
Tree view 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 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 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 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 component

Letters rise in a wave that follows your cursor.

npx shadcn@latest add https://lab.xevrion.dev/r/wave-text.json
Dot grid 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 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 component

Tap through stories, hold to pause.

npx shadcn@latest add https://lab.xevrion.dev/r/story-progress.json
Data table 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 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 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 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 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 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 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 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 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 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 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 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 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 component

Icons reshape themselves between states instead of swapping.

npx shadcn@latest add https://lab.xevrion.dev/r/icon-morph.json
Sticky stack component

Cards pile up and sink back as you scroll.

npx shadcn@latest add https://lab.xevrion.dev/r/sticky-stack.json
Infinite canvas component

Pan, pinch and zoom around a board of notes.

npx shadcn@latest add https://lab.xevrion.dev/r/infinite-canvas.json
Drag select 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 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 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 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 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 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 component

The selection ring glides to the plan you pick.

npx shadcn@latest add https://lab.xevrion.dev/r/radio-cards.json
Checkbox group 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 component

Players glide past each other to their new ranks.

npx shadcn@latest add https://lab.xevrion.dev/r/leaderboard.json
Rotary dial 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 component

Unzip the pouch to reveal the code inside.

npx shadcn@latest add https://lab.xevrion.dev/r/zipper-reveal.json
Cassette scrubber 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 sub-menu 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 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 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 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 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 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 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 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 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 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 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