UI Lab components

UI components I'm building to learn interaction design

Components: 204
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 75
Source: https://github.com/xevrion/ui-lab
Website: https://lab.xevrion.dev
Install: npx shadcn@latest add https://lab.xevrion.dev/r/{name}.json

All UI Lab components

Accordion: Answers unfold from under their question like a folded flap, and the row you clicked never moves.
Activity Timeline: New events slide in at the top as the line grows to meet them.
Announcement Banner: Dismissing folds the bar away and the page slides up to fill the gap.
Arrow Callout: A handwritten note whose arrow draws itself to whatever it points at.
Autosave Status: A dot for unsaved changes splits into three while saving, then gathers into a check.
Availability Badge: Shows when the owner is working, and when that overlaps with your day.
Avatar Stack: Fans open when you reach for it, with a name above each face.
Back To Top: Fills its ring as you read, and when you press it the arrow lifts off while the page glides back up.
Badge Counter: Rolls its digits the way the count moved and bumps each time it changes.
Balance Scale: Weighs your pros against your cons on a balance that tips and slowly settles.
Bar Chart: Grows its bars from the baseline and springs them between two weeks.
Binary Year
Bookmark Button: Fills from the bottom up and lands with a small squash.
Breadcrumbs: Folds the middle of a deep path into a menu when space runs out.
Bubble Wrap: Pop every bubble to clear the list, one click or one long swipe.
Call Widget: Accept turns into hang-up as the call controls unfold out of it, one by one.
Caps Lock Warning: A small caps lock key with its light on slides into the field when caps is on.
Card Input: Formats as you type, spots the card brand, and flips to show the CVC.
Card Number Reveal
Carousel 3D: Spin a ring of cards and flick it to land on the one you were aiming for.
Cassette Scrubber: Scrub audio by dragging the tape, with reels that spin like the real thing.
Changelog Stack: Files each release card behind the stack like a hand riffling index cards.
Chat Thread: Replies arrive after a beat of typing, and the thread follows only if you are.
Checkbox Group: Check marks draw themselves in, and Shift-click fills a range.
Clock Field
Code Block: Switch files with a sliding underline and copy with one click.
Code Morph: Glides every surviving token to its new spot as a tutorial moves to the next step.
Collapsible Sidebar: Folds down to an icon rail, with labels that step aside before it closes.
Color Picker: Drag a color out of the square, then fine-tune hue and opacity.
Color Swatches: The ring glides to the color you pick and the color floods the preview from that side.
Combination Lock: Spin right, left, right to fill each number, then turn the handle to open.
Combobox: The person you pick flies out of the list and into the field.
Command Palette: Opens on ⌘K and filters commands as you type.
Compare Slider: Drag the line to see what polish actually changes.
Confetti Button: A click pops confetti; hold it and the fuse burns until the whole thing blows.
Confirm Popover: Asks before deleting, from a popover that grows out of the button.
Context Menu: Opens at your cursor and grows from it.
Contribution Heatmap: A year of activity at a glance, sweeping in week by week.
Cookie Consent: Bakes a bite back into the cookie for every category you allow.
Copy Button: The two pages merge into one before a check draws itself in.
Copy Email: Click the address and its letters flip, one by one, into \
Coupon Code: Stamps your promo code onto the order and strikes out the price it beat.
Data Table: Sorts, selects and bulk-acts on rows without losing its place.
Date Range Picker: Paints the range as you hover, then commits it on the second click.
Dialog: Opens a modal over the page, with a confirmation that stacks on top of it.
Directional Underline: The underline comes in from the side your cursor entered and leaves toward the side it left.
Dock: Icons swell as your cursor nears them, and launch with a macOS-style bounce.
Donut Chart: Draws itself in, then lifts whichever slice you point at.
Dot Grid: Dots swell and part around your cursor, and a click sends a shockwave.
Download Button: The arrow drops into the tray while the button fills with progress.
Drag Select: Draw a box across files to select them, like the desktop.
Dropdown Menu: Grows out of its trigger, and press, drag, release picks an item like a native menu.
Dynamic Island: Morphs between live states with a springy, Apple-style bounce.
Easing Editor: Drag a cubic-bezier into shape and see it move.
Elastic Slider: Stretches like rubber when you drag past the end, then springs back.
Elastic String: Pull a string and let go to watch it ring back to rest.
Email Typo Fix: Catches gmial.com and fixes it by moving only the letters that were wrong.
Envelope Send: Folds your note into an envelope, seals it and sends it off.
Expanding Card: Grows from its slot into a detail view and folds back when you are done.
Expanding Search: Opens from a circle into a search field, and closes faster than it opens.
Eye Toggle: The eye shuts when your password is hidden and watches while you type.
Feature Spotlight: A camera zooms into the part of the product screenshot each feature describes as you scroll past it.
File Dropzone: Its dashed edge marches when a file enters the window and seals solid when it is overhead.
Filter List: Rows fade out of the way while the rest slide up to close the gap.
Flip Card: Turns over in 3D to show what is on the back.
Floating Action Menu
Floating Label: The label peels up letter by letter, and never covers what you wrote.
Focus Paragraph: Brings the sentence you're reading forward and lets the rest step back.
Folded Map: An itinerary that unfolds panel by panel like a paper road map, recentring as it opens.
Follow Button: Turns its plus into a check as you follow, and warns before you unfollow.
Footer Signature: Signs the footer by hand when it scrolls into view, slowing through every loop.
Gauge: Ticks light up as the value sweeps in, and a peak marker holds where it was before falling.
Gift Wrap: Folds kraft paper over the cart item, ties a ribbon and bow, and asks who it's for.
Glass Lens
Gooey Menu
Greeting: Greets by time of day, with a sun or moon that rises into place along an arc.
Helpful Prompt: Asks if the page helped, and on a no opens into a field right where the question was.
Hold To Delete: Fills slowly while you commit to it, snaps back the moment you let go.
Hover Card: One card travels between names as you hover them.
Hover Preview Link: Hover a link to get a preview card that trails your cursor and leans as it moves.
Icon Morph: Icons reshape themselves between states instead of swapping.
Image Hotspots: Draws a leader line to one label card that travels between a watch's features, never covering the product.
Infinite Canvas: Pan, pinch and zoom around a board of notes.
Ink Well: Drains a glass inkwell as you spend your character limit.
Inline Edit: Edits your name and bio in place without moving a pixel.
Kanban Board: Lift a card and the others slide aside to make room for it.
Keycap Hint: Keycaps that sink when you press the real keys.
Leaderboard: Players glide past each other to their new ranks.
Lens Reveal: A lens follows your cursor and shows the specs hidden under a card.
Like Button: Pops, bursts and rolls the count when you like.
Live Indicator: Breathes while live, lets the viewer count drift, and blinks hollow while reconnecting.
Loader Set: Four loaders that each know how to finish: leapfrog dots, an inchworm bar, a ring that closes into a check.
Logo Orbit: Logos orbit a heading on tilted rings, passing behind it, and brake to a stop when you point.
Magnet Lines: Lines turn toward your cursor like iron filings near a magnet.
Magnetic Button: Stretches toward your cursor like soft rubber on a magnet, then wobbles home.
Marquee: Drifts endlessly past a reading lens, and brakes gently when you hover.
Mini Calendar: Months slide past in the direction you travel.
Mini Clock: A tiny analog clock that sweeps in its city's time and turns dark after sundown.
Mood Slider: The thumb is a face that frowns, grins and leans into the drag as you rate your day.
Morphing Button: Shrinks into a spinner while it saves, then answers with a check or a shake.
Morphing Nav: One dropdown panel reshapes and slides as you move between menu items.
Multi Step Form: Slides between steps while the card grows around each one.
Notification Bell: Rings when something new arrives, and the badge rolls up with each one.
Now Playing: A listening-to pill whose record slides out from behind the cover and spins while it plays.
Number Stepper: Rolls each digit the way the count moves, and speeds up the longer you hold.
Odometer: Rolls forward like a mechanical counter and wraps from 999 back to 000.
Onboarding Checklist: A setup checklist that counts up as you go and celebrates the finish.
Orbit Gallery
Order Tracker: Drives a parcel across a street map to your door and stamps each stop as it arrives.
Otp Input: Six slots mirror one real input, so paste and SMS autofill just work.
Overflow Tabs: Scrolls a long row of tabs, fading whichever edge still hides more.
Page Dots: A pill that inches between pages like a worm and counts down to the next.
Pagination: Numbers roll in place like an odometer; the one you click never moves.
Paper Shredder: Drag a file into the shredder and it comes out in strips.
Particle Text: A word made of dots that part around your cursor and burst when clicked.
Password Field: Reveals the password with a wave of dots turning into letters; the meter fills as it gets stronger.
Payment Card
Pixel Loader: A tiny pixel grid that cycles spiral, snake, pulse and checker, then draws a check when done.
Pricing Calculator: Itemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
Pricing Toggle: Each digit rolls to its new price on its own, and new digits grow in.
Progress Stepper: Fills the line toward the next step and unfills it in reverse.
Promise Toast: One toast that morphs from saving to saved, or to an error with retry.
Pull Cord Switch: Pull the ball chain to switch the site's lights; light pours from the bulb as a cone.
Pull To Refresh: Pull the feed down and new posts slide in at the top.
Push Lock Button
Qr Reveal
Quote Share: Lifts the words you select out of the paragraph and into a shareable quote card.
Radio Cards: The selection ring glides to the plan you pick.
Range Slider: Two thumbs that glide, stop at each other, and show their value as you drag.
Reactions: Tap a reaction to add yours, or pick one and watch it fly into its pill as the count rolls.
Reading Progress: A progress bar fills as you read while the time left counts down.
Receipt Printer: Feeds a receipt out of the slot line by line; twist it against the cutter to tear it off.
Relative Time
Reorder List: Picks rows up by the handle and slides the rest out of the way.
Rotary Dial: Drag a hole to the finger stop and each digit lands as the disc unwinds.
Rubber Stamp: Stamps a document approved or rejected, with ink that looks pressed in.
Scribble Checkbox: Checks itself off with a quick pen stroke and strikes the words through.
Scroll Reveal: Words light up one by one as you scroll through them.
Scroll Spine: Maps the article as a spine of bands, each as long as its section, filling in as you read.
Scrub Input: Drag the label and a tape measure runs under the needle, or just type.
Segmented Control: The pill stretches toward your pick like an inchworm, recoloring each label as its edge crosses.
Select Menu: Opens with your current choice sitting exactly on the button, macOS style.
Selection Toolbar: A formatting toolbar that grows out of whatever text you select.
Send Button: The plane takes off along a curve, and a check lands in its place.
Share Button: Opens in place into copy, X and email, and the link turns into a check when it is copied.
Sheet: Drag it down or flick it away; pull it up and it pushes back.
Shortcut Recorder: Press keys to set a shortcut: keycaps appear as you hold them, and it tells you when a combo is taken.
Shortcut Sheet: Press ? anywhere to see every shortcut, then press one to watch it light up.
Sidebar Highlight
Sidebar Submenu
Sidenotes: Slides footnotes into the margin beside their sentence, and folds them inline on narrow screens.
Signature Pad: Ink that swells where you slow down, and wipes away the way you wrote it.
Size Picker: Pulls a tee over a body outline so you see the fit before you pick the size.
Skeleton Loader: Holds the exact shape of what is coming, so nothing jumps.
Slide To Confirm: Drag the knob all the way across to confirm.
Sliding Tabs: An underline stretches toward the tab you pick while a soft pill follows your pointer.
Snap Carousel: Snaps cards to center, drags with the mouse, and each card acts out its motion principle.
Sortable Grid: Drag an app tile and the others slide out of its way.
Sparkline: Draws itself in, then scrubs to the nearest point under your cursor.
Spoiler Text: Hides a spoiler under shimmering grain that blows away from your click.
Spotlight Card: The cursor is a lamp: cards catch its glow and their icons cast shadows away from it.
Spring Playground: Tune a spring and watch its overshoot and settle, plotted live.
Stacked Drawer: Stacks iOS sheets that push the page back and drag down to dismiss.
Stagger Visualizer: Shows what per-item delay actually does to a list entrance.
Star Button: Spins once and throws off tiny sparks when starred, then rolls the count.
Star Rating: Hover to preview, click to commit with a little pop.
Stat Counter: Numbers count up to their value; scrub a sparkline and the figure rolls back through its history.
Status Picker: Pick a status and the badge on your avatar turns into its shape: a dot, a moon, a stop sign or a ring.
Sticky Note Peel: Peel the top reminder off by its corner to mark it done.
Sticky Stack: Cards pile up and sink back as you scroll.
Storage Meter: Point at any slice to read its size, then clear the cache and watch the total count down.
Store Hours: Draws the week's hours on a 24-hour scale and can redraw them in your own time zone.
Story Progress: Tap through stories, hold to pause.
Sundial Picker: Pick a time by dragging the sun across the sky.
Swipe Deck: Fling a card away and the rest of the deck steps forward.
Tab Bar: A phone tab bar whose pill slides over and fills in the icon it lands on.
Tag Input: Your typed words stay put while a chip forms around them.
Tally Counter: Counts in hand-drawn tally marks, one pen stroke at a time.
Tape Measure: Pull the blade out to measure; release the lock and it reels itself back in.
Tear Off Calendar: Tear a day off to move forward, pull one back to go back.
Testimonial Highlight: Swipes a highlighter across the line that sold the customer, one line at a time.
Text Progress: Fills the label itself with ink as the upload runs.
Text Scramble: Hover a word and a block cursor reads it in, one letter at a time.
Theme Toggle: A sun that folds its rays away and turns into a crescent moon.
Tilt Card: Leans toward your cursor with a glare that follows the light.
Tip Jar: Coins drop into a glass jar and pile up as the total counts.
Toast Stack: Stacks with depth, fans out on hover, and each toast's edge drains as its timer.
Toggle Switch: Leans into the move when pressed, then springs across and squashes on landing.
Tooltip Group: One tooltip slides from button to button and reshapes around each label.
Tree View: Folders unfold in place while the selection glides to the file you pick.
Typewriter: Types, pauses and rewrites the last word with a human rhythm.
Typing Seismograph: Records the rhythm of your typing on a scrolling seismograph.
Undo Toast: Deletes instantly and gives you five seconds to change your mind.
Upload Button: Shrinks into a progress ring, fills, then checks off.
Uptime Bar: Point at any day and the row's own caption tells you what happened.
Voice Orb: A glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks.
Waitlist Join: Drops your face into a real queue and rolls out your place in line.
Wallet Cards
Wave Text: Letters rise in a wave that follows your cursor.
Waveform Player: Inks in a podcast's waveform, with chapter markers and a ghost playhead.
Wheel Picker: Spins through the hours on a curved drum, just like iOS.
Word Rotator: Keeps the letters two words share and glides them into place as the rest trade out.
X Walkers
Zipper Reveal: Unzip the pouch to reveal the code inside.

UI Lab components

All UI Lab components

Browse by category