78 components, each one live on this page. Hover the cards, open the dialogs, drag your cursor through the docks — then copy one command to install the source.
The core set. Every demo below is the real component, live.
Three shared springs keep every panel, hover, and reveal moving as one body.
A stack of disclosure rows whose panels ease open to their natural height and back to zero, the chevron rotating with the state.
npx lumora-ui@latest add accordionPhase three is live
Sync interrupted
Hovers and presses. Fast settle, no wobble.
Tabs where the active pill slides between triggers as a shared element and the panel cross-fades with a small drift.
npx lumora-ui@latest add animated-tabsOverlapping avatar row where the tooltip leans with your cursor: its tilt and horizontal shift follow where you are over the avatar, so the card feels balanced on your fingertip.
npx lumora-ui@latest add animated-tooltipSlim top banner that slides down on mount and, when dismissed, collapses its height and fades away.
npx lumora-ui@latest add announcementThree blurred lumen blobs, drifting slowly.
Section wrapper bathed in three huge, heavily blurred lumen blobs that drift on very slow loops behind the content, finished with a faint grain and vignette so the glow reads quiet rather than loud.
npx lumora-ui@latest add aurora-backgroundIdentity disc with a graceful fallback: if the image errors, initials crossfade in so the swap never flashes.
npx lumora-ui@latest add avatarStatus chip: a quiet pill whose optional dot can breathe a slow expanding ring to mark live state.
npx lumora-ui@latest add badgeBeams travel the grid lines on long loops.
A faint line grid where occasional beams of lumen travel along random grid lines — horizontal beams slide right, vertical beams fall — on long, staggered loops.
npx lumora-ui@latest add beam-gridA lumen head with a fading tail laps the border ring once every six seconds — only the ring ever lights up.
Wraps its child with a luminous beam endlessly traveling around the border: a rotating conic gradient (bright head, transparent tail) is masked down to the border ring via the padding-box/border-box mask composite trick, so only the ring ever lights up.
npx lumora-ui@latest add border-beamPath trail where hovering a link slides a soft lumen underline in from the left.
npx lumora-ui@latest add breadcrumbsSnap
Fast settle, no wobble.
Drift
One gentle breath.
Glide
Long, weighty, deliberate.
Drag-to-snap carousel: the track follows your pointer with elastic edges and settles on the nearest slide when released.
npx lumora-ui@latest add carouselAccessible checkbox: checking fills the box with the lumen, pops it with a tiny scale breath, and draws the check stroke in along its path; the `indeterminate` state shows a dash instead.
npx lumora-ui@latest add checkboxSweep your cursor across this surface.
A container whose pointer movement leaves a trail of small image cards: every `threshold` px of travel a card pops in at the cursor with a spring and a slight deterministic rotation, then fades and shrinks away ~700ms later.
npx lumora-ui@latest add cursor-trailModal dialog: the page dims behind a blurred overlay while the panel breathes in from 96% scale with a slight upward drift.
npx lumora-ui@latest add dialogA bottom dock whose items swell as the cursor nears them — each item's size is a transform of the cursor's distance from its center.
npx lumora-ui@latest add dockSide panel: it glides in from its edge over a blurred overlay and can be dragged back out — release past 30% of its size (or with a flick) and it dismisses.
npx lumora-ui@latest add drawerAnchored action menu: it drifts open with a slight scale while items cascade in at 12ms intervals, flipping above the trigger when the viewport runs out.
npx lumora-ui@latest add dropdown-menuSnap
Fast settle, no wobble.
A fanned deck where only the top card is draggable: pull it sideways against elastic constraints — release beyond `threshold` and it flings off with your velocity, then glides back in at the rear while the rest shuffle one step forward; release short of it and it snaps home.
npx lumora-ui@latest add elastic-stackDrop zone whose dashed border brightens into a soft lumen glow while a file hovers over it, the upload glyph nudging upward in anticipation.
npx lumora-ui@latest add file-dropzoneBuilt to launch.
Cycles words by flipping them around the X axis: the current word's characters tip away (rotateX → -90°) while the next word's tip in (90° → 0°) under shared perspective, each character 18ms behind the last, and the container's width glides between word widths.
npx lumora-ui@latest add flip-textAn interactive folder drawn from CSS shapes: hovering tilts the front lid open on its bottom hinge while up to three items rise out of the slot with a stagger and a slight fan; clicking toggles it held open (button semantics with aria-expanded).
npx lumora-ui@latest add folderSIGNAL RESTORED
Hover the words — they tear for 350ms, then settle clean.
Text that rests perfectly clean, then glitches for ~350ms when hovered (or on a loop): two aria-hidden copies tinted lumen and dusk flicker in with small horizontal offsets and sliced clip-paths, then everything settles.
npx lumora-ui@latest add glitch-textInterfaces that glow
Inline text painted by a slow lumen gradient that sweeps left to right on a seamless loop — accent into foreground and back.
npx lumora-ui@latest add gradient-textFloating-label text input: the label sits where a placeholder would, then rises and shrinks once the field is focused or filled, while a 1px accent underline draws in from the left.
npx lumora-ui@latest add inputPress the real combo — the cap sinks with it.
Wrap anything to make it magnetic: while the cursor is within `radius` px of the zone's center the child leans toward it, then snaps back home on leave.
npx lumora-ui@latest add magnetic-buttonA seamless infinite belt of content: children are duplicated (the copy is `aria-hidden`) and the track translates exactly one copy's width per loop, so the seam never shows.
npx lumora-ui@latest add marqueeDesigned for clarity
Cycles words by dissolving: the outgoing word blurs and fades while the incoming one sharpens out of the same blur with a subtle tracking widen, the two overlapping for ~40% of the transition.
npx lumora-ui@latest add morph-text0+
installs
0.0%
frames kept
A number that counts up on a spring once it scrolls into view, settling on `value`.
npx lumora-ui@latest add number-tickerType or paste any 4 digits.
One-time-code entry: one cell per digit, each popping on a snappy spring as it fills while the accent ring tracks the active cell.
npx lumora-ui@latest add otp-inputThe pill glides between numbers; long ranges fold into ellipses.
Page switcher: the active pill glides between numbers as a shared element on `springs.snap`, and the prev/next arrows nudge outward on hover.
npx lumora-ui@latest add paginationAnchored floating panel: opens from its trigger with a drift-and-scale breath out of the anchor side, flipping to the opposite side when the viewport is too tight.
npx lumora-ui@latest add popoverProgress bar: the determinate fill glides to each new value on a weighty spring; `indeterminate` sends a soft lumen segment traveling the track on a slow loop (a static mid-fill under reduced motion).
npx lumora-ui@latest add progressRadio group: selecting an item pops the inner dot in on a snappy spring while a soft lumen ring expands outward once and fades.
npx lumora-ui@latest add radio-group3.5 of 5 — hover sweeps, halves count.
Star rating with slider semantics: hovering previews the fill sweeping up to the pointer with a tiny per-star stagger, clicking commits with a pop on the chosen star, and arrow keys adjust the value in steps (halves with `allowHalf`).
npx lumora-ui@latest add ratingEditorial list of large rows: hovering a row summons a floating preview image that trails the cursor on a lagging spring and crossfades as you move between rows, while the other rows dim back.
npx lumora-ui@latest add reveal-listScroll the page — the bar above fills with it, smoothed by the glide spring.
A fixed 2px accent bar that fills as the page scrolls, smoothed by a spring so the fill glides rather than jitters.
npx lumora-ui@latest add scroll-progressPill segment switcher: the raised pill glides between segments as a shared element on a snappy spring.
npx lumora-ui@latest add segmented-controlSingle-select listbox: the menu drifts open with a slight scale while options cascade in at 15ms intervals; the chosen option carries a check glyph.
npx lumora-ui@latest add selectBoth ends fade to nothing,
so the rule never cuts a hard edge.
A chip label can sit at the center.
A quiet rule that fades to transparent at both ends, so it never cuts a hard edge into the layout.
npx lumora-ui@latest add separatorLoading placeholder: a soft surface block with a slow light sweep gliding across on a 1.8s loop.
npx lumora-ui@latest add skeletonGlow intensity — 40%. Drag and the bubble rides the thumb.
Range slider: the accent-filled track follows a thumb that swells on a snappy spring while dragged, with an optional value bubble floating above it.
npx lumora-ui@latest add sliderMove your cursor across this surface.
Full-section pointer spotlight: a soft circle of lumen trails the cursor on a spring, fading in on entry and out on exit, like a hand-held light passing over the content.
npx lumora-ui@latest add spotlightThe border brightens and a radial lumen glow trails your cursor across the card.
A surface card whose border lights up and a soft radial lumen glow trails the cursor; the glow fades in on enter and out on leave.
npx lumora-ui@latest add spotlight-cardStep indicator whose connector lines fill with the lumen as steps complete, numbers crossfading into a drawn-in check.
npx lumora-ui@latest add stepperAccessible toggle: the knob slides across the track on a snappy spring (layout animation) while the track crossfades to the accent.
npx lumora-ui@latest add switch| Motion | Spring | |
|---|---|---|
| Aurora wash | Drift | 412 |
| Dock magnify | Snap | 388 |
| Drawer glide | Glide | 351 |
| Toast settle | Snap | 274 |
Quiet data table: hairline borders, a surface-toned header, and rows that brighten gently under the pointer.
npx lumora-ui@latest add tableScrollandeachwordsharpensoutofafaintblur,sothesentencecomesintofocusasyouread.
Scroll-linked paragraph reveal: as the text crosses a band of the viewport, each word brightens from faint to full foreground and sheds a slight blur, so the sentence appears to come into focus as you read.
npx lumora-ui@latest add text-revealType a few lines — the field grows with you, capped at five rows.
Floating-label textarea: the label rests where a placeholder would, then rises and shrinks once the field is focused or filled while a 1px accent underline draws in from the left.
npx lumora-ui@latest add textareaThe card tilts toward your cursor in 3D and drifts flat on leave.
A card that tilts in 3D toward the cursor and drifts flat again on leave.
npx lumora-ui@latest add tilt-cardVertical event list: the spine draws itself downward as the list scrolls into view, while each node pops and its content drifts in the first time it enters the viewport.
npx lumora-ui@latest add timelineFire a toast from anywhere — components, event handlers, async code.
npx lumora-ui@latest add toastPressed-button group: in single mode a raised backplate glides between pressed items as a shared element on `springs.snap`; in multiple mode each item simply latches.
npx lumora-ui@latest add toggle-groupAnchored tooltip that waits `delay` ms, then drifts in with a slight rise toward its anchor.
npx lumora-ui@latest add tooltipSprings that snap.
Types each word character by character beside a blinking caret, holds, deletes, and moves to the next.
npx lumora-ui@latest add typewriterFull landing sections that take arrays in and ship polish out.
Two-column FAQ: the heading stays pinned on the left while disclosures open on the right, each answer unfolding to its natural height as the chevron turns over.
npx lumora-ui@latest add faqAsymmetric bento grid: one large anchor card and a constellation of small ones.
npx lumora-ui@latest add featuresQuiet closing footer: four link columns beside the brand, links resting at the faintest type tone and brightening on hover, with an optional inline newsletter form and a small-print baseline.
npx lumora-ui@latest add footerSticky top navigation that rides transparent over the hero, then settles onto a blurred overlay with a hairline border once you scroll past the threshold.
npx lumora-ui@latest add navbarThree-tier pricing with a segmented billing toggle: a single pill slides between monthly and yearly while every price crossfades to its new value.
npx lumora-ui@latest add pricingTwo rows of quote cards drift past each other in opposite directions on a seamless loop, pausing under the cursor with soft fades at either edge.
npx lumora-ui@latest add testimonialsCommand menus, chat, and selection surfaces — AI as a first-class citizen.
The launcher pins to its corner with a slow lumen pulse, then springs open into the panel. Replies stream chunk by chunk.
Floating chat launcher (bottom-right, with a slow lumen pulse) that springs open into a panel from its own corner.
npx lumora-ui@latest add chat-widgetOwns the open state of a `CommandMenu` and binds the global ⌘K / Ctrl-K toggle.
npx lumora-ui@latest add command-menuSelect any stretch of this paragraph and a pill toolbar floats in above your selection, anchored to its exact rectangle. It scales in with one soft breath and leaves when the selection collapses.
Try selecting the text above.
Wraps content and floats a pill toolbar above any text the user selects inside it — the pill scales in with one soft drift breath, anchored to the selection rect.
npx lumora-ui@latest add selection-toolbar