Components

182 live, copy-paste React components. Free ones are yours forever, Pro ones unlock with a license.

React components

Motion that feels engineered

Drop-in cards, heroes, and effects tuned to sixty frames a second. Ship the interface and skip the design review.

Free and Pro tiersExplore
PRO
3D Pincards

A card that tilts back in 3D on hover while a glowing pin and label rise above it.

Depth on demand

Every element inside this card sits at its own depth, so the whole thing tilts like it has real dimension.

3D Tilt Cardcards

A card with 3D perspective tilt that follows the cursor, with inner elements floating at different depths.

Contribution activity

9-day best streak

603
contributions
AugSepOctNovDecMonWedFri
LessMore
Activity Heatmapgrids

A contribution-style heatmap with intensity-tinted cells, a legend, and a brightening wave.

PRO
Animated Checkbox Groupforms

Checkboxes with a springy check draw and selected chips.

Now shipping v2.0

Design that flows

A slow, continuous gradient sweep, restrained enough for a headline, rich enough to notice.

Animated Gradient Texttext

Text with a smooth flowing multi-stop gradient and an optional shimmer chip.

Animated Grid Pattern

A quiet lattice with cells that breathe light at random, like a server room at 3am.

Animated Grid Patternbackgrounds

A subtle grid where random cells softly illuminate and fade, masked with a radial glow.

Waiting for activity…
Animated Listsections

A vertical activity feed where gradient-tile notification cards slide and stack in one by one on a loop.

Animated Modaleffects

A modal that springs in over a blurred backdrop, auto-cycling open and closed in the demo.

Animated Tabsnavigation

Tabs with a sliding pill indicator powered by layoutId.

Lumenitecutourbuildtimeinhalf,everycomponentjustworks,outofthebox.

AV
Ava Chen
Product Lead, Northstar
Animated Testimonialstestimonials

A rotating testimonial card with a gradient avatar stack and word-stagger quote reveal.

The people behind it

Built by a small, obsessive team

+12

Hover a face to meet them.

Animated Tooltipeffects

Overlapping avatars that spring up a tilting name-and-role tooltip on hover.

API keys

Authenticate requests to the Lumenite API.

NameSecret keyActions
Production serverProduction

Last used 4 hours ago

sk_live_••••••••••••4056
Edge functionsProduction

Last used 2 days ago

sk_live_••••••••••••5f28
CI pipelineDevelopment

Last used just now

sk_test_••••••••••••4b65
Full secrets appear only at creation. Rotate keys regularly and never commit them.
PRO
API Key Managerforms

A settings table of API keys with masked reveal, copy-to-check, created dates, and revoke.

Aurora Background

A soft, animated gradient glow drifting behind your content.

Aurora Backgroundbackgrounds

An animated aurora gradient backdrop that drifts softly behind content.

Profile
Choose your avatar
Auto
Nebula
Generated gradient
Avatar Pickerforms

An avatar picker with a morphing preview and a selection ring that springs into place.

Loved by builders

The team you would want on speed dial

+12
Trusted by 2,000+ teams/See the wall
Avatar Stackeffects

Overlapping avatars with a +N overflow chip that lift and label on hover.

Background Beams

Curved light beams tracing paths through the dark.

Background Beamsbackgrounds

SVG animated light beams tracing curved paths across a dark canvas.

Interactive backdrop

Interfaces that light
up when you do

Sweep your cursor across the grid, every cell it touches flashes and fades on a trail. A living backdrop for heroes, docs, and dashboards.

Background Boxesbackgrounds

A grid-of-boxes hero background where cells light up under the cursor, with a soft idle shimmer.

Lumenite Studio

Light that moves
with you

A living gradient backdrop for heroes, launch pages, and dashboards. Soft, gooey, and always in motion.

Background Gradient Animationbackgrounds

Soft gooey gradient blobs drifting and morphing behind content, with a cursor-following blob.

Notifications
01 / 04
Realtime is now liveUpdate

Collaborative editing ships to every workspace today. Invite your team and build together in the same canvas.

Banner Alertsections

Info, success, warning, and error banners with an action and a dismiss that collapses.

Ambient background

Collisions, rendered in light

Thin beams descend from the top and scatter into sparks the moment they land. Continuous, seeded, and quietly efficient.

PRO
Beams Collisionbackgrounds

Light beams fall and burst into sparks at the bottom on a continuous, staggered loop.

Realtime sync engine

Every change propagates instantly across sessions with no manual refresh.

Fast

Sub-100ms edge reads.

🔒

Secure

Row-level isolation.

Composable

Drop it into any layout without fighting the grid.

Bento Gridgrids

A responsive bento grid with hover-lift cells and a large feature cell.

Design thatmoves withintention.
Blur Fade Headingtext

Staggered blur-to-sharp entrance animation for hero headlines.

A beam that never stops

A soft light traces the border continuously, giving the panel a quiet, always-alive presence.

Border Beambackgrounds

A card with a soft light beam that travels continuously around its border.

Settings

Saved

Manage how your workspace builds, previews, and ships components.

WorkspaceLumenite
Default themeLiquid Dark
Preview branchmain
Breadcrumbsnavigation

An animated breadcrumb trail with chevron separators and a hover underline slide.

March2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Mar 12 → Mar 16
4 nights
PRO
Calendar Widgetforms

A clean month calendar with a highlighted today, selected day pill, and event dots.

Live

Observability

See every request, live

Trace latency, errors, and cold starts across every edge region, streamed to your dashboard in under 200ms.

Canvas Revealeffects

A card that reveals a colored dot-matrix on hover, with a slow dot pulse at rest.

Realtime analytics
Pro

Pulse

See every signup, event, and dollar the moment it lands.

$18/ month
Details

Inside Pulse Pro

Everything in Free, and then some.

Live event stream, no five minute delay
Funnels and retention, ready out of the box
Slack alerts the moment a metric moves
Unlimited seats for the whole team

No card required. Cancel anytime.

Card Flipcards

A 3D flip card revealing details on the back, auto-flipping on a gentle loop.

Platform

Everything you need to ship

Edge deploys

Push to production and go live on 300+ edge nodes in seconds.

Zero-trust auth

Signed, scoped requests audited automatically on every call.

Live analytics

Sub-second metrics streamed straight from real production traffic.

Preview branches

Every pull request spins up an isolated, shareable environment.

Composable infra

Functions, queues, and cron in one declarative pipeline.

AI copilots

Refactor and review changes without ever leaving your editor.

Card Hover Effectcards

A feature grid where a soft highlight block glides behind the hovered card.

Design

Systemized tokens, consistent spacing, effortless theming.

Motion

Spring-based transitions that feel alive, not decorative.

Speed

Copy, paste, ship. No wiring, no boilerplate.

Scale

From a landing page to a full product suite.

PRO
Card Stackcards

An auto-cycling stack of cards that spring-shuffle to the front.

01Rendering

Composited on the GPU

Every frame is layered off the main thread, so scroll and motion stay locked to your display's native refresh.

02Delivery

Served from the edge

Static output resolves from the region closest to each visitor, keeping first paint under forty milliseconds.

03Theming

Tokens, end to end

One config drives color, type, and spacing across every component, with no drift between light and dark.

04Motion

Physics, not keyframes

Spring curves are tuned per interaction, so transitions feel weighted instead of mechanically timed.

05Deploy

Ship straight from main

Merge a pull request and the build promotes to production on its own, usually inside of a minute.

01 / 05
Carouseleffects

A snap carousel of gradient slides with dot indicators and auto-advance.

Your cart

Lumen Vial, 10ml

$68.00

1

BAC Water, 3ml

$14.00

1

Sterile Vial Kit

$22.00

1
Subtotal$104.00
PRO
Cart Drawercommerce

Slide-in cart with line items, quantity steppers and a live subtotal, spring-animated.

v2.4.0newJul 12, 2026

Magnetic buttons & grain textures

New CTA primitives with physics-based magnetic hover.

v2.3.1improvedJul 3, 2026

Faster spotlight rendering

Reduced repaint cost on hover-tracked gradients by 40%.

v2.3.0fixedJun 22, 2026

Fixed marquee jitter on Safari

Resolved a sub-pixel rounding issue in looped marquees.

Changelog Feedsections

Vertical release feed with version badges, dates and an animated left-border progress line.

PRO
Chat Bubblesections

Floating chat button that expands into a mini chat panel with a typing indicator.

MR

Maya Rivera

Active now

Message Maya
PRO
Chat Threadsections

A messaging thread with alternating bubbles, avatars, and a typing indicator that resolves on a loop.

card.tsx, before
1·function Card({ title }) {
2· return (
3 <div className="card">
4· <h3>{title}</h3>
5 </div>
6· );
7·}
card.tsx, after
1·function Card({ title }) {
2· return (
3+ <div className="rounded-2xl border
4+ border-line bg-panel p-6 shadow-lg">
5· <h3>{title}</h3>
6 </div>
7· );
8·}
PRO
Code Comparisoncards

A before/after diff view with red and green line highlights, line numbers, and filename tab headers over realistic React code.

Accent color
#7C6CFF124 108 255
PRO
Color Pickerforms

A saturation square, hue slider, hex readout, and preset swatches that ease through colors.

Lumenite UI

Design something yours.

A headline that never sits still, each letter drifts through a cool, tasteful spectrum with a soft blur-and-scale wave.

Colourful Texttext

A headline whose letters cycle through a tasteful multi-hue gradient with a subtle wave.

In stock
Ambient Lighting4.9·128

Halo Aurora Lamp

A hand-blown glass orb that drifts your room through slow aurora light. App-tuned scenes, 16M colors, USB-C.

$189$249
PRO
Comet Cardcards

A 3D tilt card with a comet-like aurora sheen sweeping across its glossy surface.

Search commands, files, and actions
Suggestions
New deployment
D
Invite teammate
I
Navigation
Go to Dashboard
GH
Open Documentation
GD
Actions
Toggle appearance
T
Open settings
,
NavigateOpen
Command Menu
PRO
Command Palettenavigation

A Cmd-K palette with grouped results, lucide icons, keyboard hints, and an auto-advancing selection.

Enhanced
Original
PRO
Compare Slidereffects

A draggable before/after comparison slider between two styled panels.

Compare plans
Everything scales with you
Free$0
RecommendedPro$19 / mo
EnterpriseCustom
Workspace
Projects
3
Unlimited
Unlimited
Team seats
1
10
Unlimited
Storage
2 GB
100 GB
1 TB
Collaboration
Realtime sync
Version history
30 days
Unlimited
Security
SSO and SAML
Audit log
PRO
Comparison Tablesections

A three-column feature comparison with a highlighted Pro column and a sweeping row highlight.

Confetti Buttonbuttons

A button that bursts a seeded canvas confetti spray on click, with tasteful theme-matched colors and a springy press state.

Lumenite UI

Builddashboardsfaster.

One component, endless variations. The container springs to fit every word, no layout jank, no blinking.

Container Text Fliptext

A word flips through options while its pill container smoothly resizes to fit.

right click me
A native-feeling menu that springs from the cursor
PRO
Context Menunavigation

A right-click context menu with icons, a submenu row, and shortcuts, springing from the click point.

We use cookies

We use cookies to improve your experience and analyze site traffic. Choose what works for you.

Cookie Consentsections

Polished corner cookie-consent card that springs in on mount and collapses on choice.

Quickstartbash

Add the component

npx lumenite add copy-button
1 file, 0 dependencies
Copy Buttonbuttons

A copy-to-clipboard button whose icon morphs to a check with a ripple, then reverts.

Lumenite UI

Ship your next launch faster

Drop in production-grade animated components and skip the weeks of polish work.

CTA Bannersections

Full-width gradient CTA banner with grain texture, floating orbs and a magnetic button.

Send money abroad

No hidden spread. You always get the mid-market rate.

You send
$0
Recipient gets
0.00EUR
Mid-market rate·1 USD = 0.9217 EUR
Rate locked for 30 seconds at checkout.
Currency Inputforms

A currency amount field with a selector, thousands separators, and a conversion line.

Hero
Realtime canvas
MDPK
Maya
Devon
Priya
Kai
Cursor Presenceeffects

Multiplayer live cursors with name tags gliding around a panel, like Figma or Linear.

app.lumenite.dev/analytics

Weekly revenue

$48,210

+12.4%
Praetorian order #4821
now
New subscriber, Halo tier
now
Payout processed
now
PRO
Device Mockupcards

A rounded browser window with a URL bar containing a tiny animated dashboard — growing chart bars and live activity rows.

Aurora

Northern Lights preset

Hover from any edge

Aurora

Northern Lights preset

Twelve layered gradients tuned for dark dashboards. The overlay enters from whichever edge your cursor crosses.

Open collection
PRO
Direction Aware Hovercards

An overlay slides in from whichever edge the cursor entered.

🏠Home
🔍Search
💬Chat
🎵Music
🖼️Photos
⚙️Settings
Dock Menunavigation

A macOS-style dock with icon magnification that follows the cursor.

Dot Pattern Glow

Move your cursor across the field, a soft light warms the dots beneath it.

Dot Pattern Glowbackgrounds

A field of dots with a soft light that follows the cursor, warming nearby dots.

Live signal
+24.8%7d

Momentum across 1,204 sessions this week.

Weekly reportOpen
Drag me around
Draggable Cardcards

A card you can drag and throw with momentum, rotating toward the throw, floating at rest.

Dropdown Menunavigation

A frosted dropdown with grouped items, icons, keyboard hints, and a gliding highlight.

The 2026 collection

Formulated for clarity.

Every batch is documented, tested, and traceable, a research standard built for people who read the certificate before the label.

Editorial Heroheroes

Centered editorial hero with an oversized serif headline, thin rules and a fade-up stagger.

No documents yet

Create your first document, or import an existing file. Everything you add lands right here, ready when you need it.

Empty Statesections

A tasteful empty state with a floating CSS illustration, copy, and primary and secondary actions.

FKPTX14689998640XTOJEAFKPUY14789998630WSNJDBGLQUY24789998630WSNIDBGLQUY2579999753ZVRMHCCHMRVZ2579999752ZVRMHCCIMRVZ3579999752YUQLGBDINSW0368
lumenite.dev
PRO
Evervault Cardcards

Hover reveals a moving matrix of characters under a radial mask.

What ships in every component

Tap a row to expand the details

Live
PRO
Expandable Cardcards

Click a card to expand it into a centered modal with a shared layout transition.

Yes, every free and pro component ships with a license that covers unlimited commercial projects.

FAQ Accordiongrids

A smooth height-animated accordion with a rotating chevron indicator.

Help center8 results
Search components, tokens, licensing
FAQ Searchsections

A searchable FAQ that types a query, filters, highlights the match, and expands answers.

Polished by default

Every element ships with motion and depth baked in.

Instant feedback

Hover states respond in under a frame, no lag.

Type-safe props

Strict TypeScript interfaces across every component.

Composable layers

Stack primitives together without fighting specificity.

Works anywhere

Framework agnostic patterns, React-first execution.

Lightweight runtime

No heavy deps, just framer-motion doing the work.

Feature Gridgrids

A hover-highlighted feature grid with icon glow and border illumination on the active cell.

Platform

Built to run at scale

Live

Instant deploys. Every push builds, tests, and promotes to production in under a second, with no queue between commit and live.

PRO
Feature Spotlightsections

A spotlight that moves to highlight the active feature while the others dim, auto-advancing.

Platform

Ship with confidence

pr-482.lumenite.app
Preview ready
Built in 11.4s
Feature Tabssections

Vertical feature tabs that crossfade a matching preview panel, auto-advancing.

Drop files to upload

PNG, PDF, MP4 or ZIP up to 200 MB

or
brand-guidelines.pdf8.2 MB
hero-poster.png46%
product-reel.mp418%
PRO
File Dropzoneforms

A drag-and-drop upload zone with an animated border and file chips that fill with progress.

LUMENITE BACKGROUNDS

A quiet grid that never sits still

Thousands of cells breathe on their own timing, tinted violet and blue. Calm from across the room, alive when you lean in.

Flickering Gridbackgrounds

A fine grid of squares that softly flicker on and off with a brand tint, radial-masked.

Ship yourlanding pagefaster.

Flip Wordstext

One word in a sentence flips through alternatives with a 3D rotation.

Lumenite

scroll up and down to see the navbar react

Floating Navbarnavigation

A navbar that hides on scroll down and reappears floating and condensed on scroll up.

Featured collection

Chromatic Studies

Focus Cardscards

A row of cards where hovering one keeps it sharp while the others blur and dim.

Q3 launch canvas
Shared workspace · updated just now
4 live
Maya Rodriguez
Devin Park
Iris Kaan
Move your cursor to join the room
You
Following Pointereffects

A custom animated pointer and name tag that spring-follows the cursor.

You're $75 away from free shipping
Free Shipping Metercommerce

Animated progress meter that fills toward a free-shipping threshold and celebrates at 100%.

System performance
Live
Needs work
0
Performance score
Baseline
68
Target
90
PRO
Gaugegrids

An animated gauge with a gradient arc and a value that eases to its reading on a loop.

lumenite/main
1,284commits+1
AC
feat: add SSE reconnect fallback
e4a91c2
AC
merge: feat/streaming into main
1c4f8a2
AC
feat: chunked token streaming
7d09e15
SW
feat: backpressure guard for slow clients
a3b6c40
MD
refactor: extract lane solver
5e2f9d7
PN
merge: fix/telemetry into main
0b8a1c6
PN
fix: clamp retry backoff to 30s
c94d720
MD
chore: bump framer-motion to 12.4
63f0ae9
PRO
Git Grapheffects

A commit graph with colored branches, merge curves, and a new commit drawing in on a loop.

Holographic sheen

A light sweep glides across the surface as your cursor moves, mimicking a foil trading card.

Glare Cardcards

A holographic glare sweep that plays across the card on hover.

Glass Buttonglass

A frosted-glass pill button with a bright top sheen and a shimmer that sweeps across on hover.

PRO
Glass Dockglass

A macOS-style liquid glass dock whose icons magnify toward the cursor with a spring.

PRO
Glass Navglass

A floating glass navigation bar with a sliding liquid pill indicator behind the active link.

PRO
Globe Dotseffects

A rotating dotted globe illusion built in pure SVG with orbiting connection arcs.

Glow Buttonbuttons

A gradient glow that intensifies and scales on hover and press.

Glow Orbs

Slow, blurred gradient orbs drifting behind your hero content.

Glow Orbsbackgrounds

Slow-drifting, blurred gradient orbs floating behind your content.

Sub-40ms responses

Cold starts eliminated. Every request runs at the region closest to your user.

SOC 2 by default

Encryption, audit logs, and scoped access controls enabled from the first deploy.

A preview per branch

Each push gets an isolated URL with full production parity, ready in seconds.

Traces, not guesses

Span-level observability across every function, query, and downstream call.

Glowing Effectcards

A card grid where a bright border glow rides toward the cursor, sweeping on a loop at rest.

Live navigation

Your workspace at a glance

Signals, activity, and health across every project in one calm view.

Gooey Navnavigation

A nav whose active indicator is a gooey liquid blob that stretches between items.

Build beautiful interfaces

Gradient Headingtext

Animated moving gradient text for bold headlines.

Grid Beam Background

A faint grid with glowing beams traveling along its lines.

Grid Beam Backgroundbackgrounds

A dot/grid background with a traveling glow beam along its lines.

Lumenite UI · v2.0

Ship interfaces that feel alive,straight from copy & paste.

A component library for teams obsessed with the details. Move your cursor, the light follows you.

Trusted by 4,000+ product teams
Hero Highlightbackgrounds

A dot-grid hero with a cursor-following spotlight and an animated gradient highlight on a key phrase.

Everything you ship, in one place

A living wall of products, drifting in 3D.

Aurora
Design system
Nimbus
Analytics
Pulse
Realtime sync
Halo
Auth
Vault
Storage
Aurora
Design system
Nimbus
Analytics
Pulse
Realtime sync
Halo
Auth
Vault
Storage
Vertex
Edge network
Prism
Billing
Flux
Workflows
Orbit
Scheduling
Relay
Messaging
Vertex
Edge network
Prism
Billing
Flux
Workflows
Orbit
Scheduling
Relay
Messaging
Atlas
Search
Beacon
Monitoring
Cinder
Logs
Drift
CDN
Ember
Queues
Atlas
Search
Beacon
Monitoring
Cinder
Logs
Drift
CDN
Ember
Queues
PRO
Hero Parallax Gridheroes

Scroll-driven parallax rows of gradient product cards that tilt in 3D as you scroll.

Hero Video Dialogsections

A video thumbnail with a pulsing play button that opens into a centered player dialog on a loop.

Platform roadmap

Shipping through 2026

0 / 5 shipped
Q1 2025Design tokens APITyped variables sync from Figma to code.
Q2 2025Realtime canvasLive cursors and comments on every board.
Q3 2025Usage analyticsAdoption, drift, and coverage per team.
Q4 2025Self-hosted runtimeRun the engine inside your own network.
Q1 2026Review agentAutomated a11y checks on every pull request.
Horizontal Timelinegrids

A horizontal milestone timeline with a progress fill that activates each card as it passes.

A living gradient border

A soft arc of light traces the card's edge on a loop, then brightens and glows when you hover.

Hover Border Gradientcards

An animated rotating conic gradient border revealed on hover.

1

Connect

Link your workspace in seconds, no config needed.

2

Customize

Tune the theme tokens to match your brand.

3

Launch

Ship a polished experience your users will love.

How It Workssections

Three-step process section with a line that draws between steps as they enter the viewport.

Cursor field

Every movement leaves a trace

Drift across the panel and tiles bloom along your path, then dissolve. Leave it be and it keeps drawing its own.

Move your cursor across the surface
Image Traileffects

Gradient tiles trail and fade behind the cursor, driven by a seeded path at rest.

This shaved days off our build. It just feels right.

M
Mara Ling
Design Lead, Vantage

The polish is unreal, clients think we hired a studio.

T
Theo Brandt
Founder, Northbeam

Every component drops in and just works.

P
Priya Nadar
Engineer, Fable

Our landing page conversions jumped after the redesign.

S
Sam Okafor
Growth, Loomstate

This shaved days off our build. It just feels right.

M
Mara Ling
Design Lead, Vantage

The polish is unreal, clients think we hired a studio.

T
Theo Brandt
Founder, Northbeam

Every component drops in and just works.

P
Priya Nadar
Engineer, Fable

Our landing page conversions jumped after the redesign.

S
Sam Okafor
Growth, Loomstate

This shaved days off our build. It just feels right.

M
Mara Ling
Design Lead, Vantage

The polish is unreal, clients think we hired a studio.

T
Theo Brandt
Founder, Northbeam

Every component drops in and just works.

P
Priya Nadar
Engineer, Fable

Our landing page conversions jumped after the redesign.

S
Sam Okafor
Growth, Loomstate

This shaved days off our build. It just feels right.

M
Mara Ling
Design Lead, Vantage

The polish is unreal, clients think we hired a studio.

T
Theo Brandt
Founder, Northbeam

Every component drops in and just works.

P
Priya Nadar
Engineer, Fable

Our landing page conversions jumped after the redesign.

S
Sam Okafor
Growth, Loomstate
Infinite Moving Cardscards

A seamless horizontal marquee of testimonial cards.

Platform Sprint
Cycle 24 · 6 tasks
Auto flow
Todo3
BackendENG-241
Refactor auth token refresh
41
AK
InfraINF-088
Rate limit the API gateway
22
TN
DesignDSN-153
Empty states for the inbox
60
SO
In Progress2
FrontendWEB-317
Fix layout shift on pricing
31
JMAK
BackendENG-198
Migrate analytics to Segment
52
RL
Done1
InfraINF-072
Optimize the image pipeline
11
TNRL
PRO
Kanban Boardsections

A compact three-column board where a task card animates between columns on a loop.

Keyboard shortcuts

Every action, one keystroke away.

Command menu
K
Search files
P
Save changes
S
Toggle sidebar
B
Format document
F
RunningCommand menu
Keyboard Keystext

Realistic 3D keycaps that depress on a loop to type out a keyboard shortcut.

Keyboard Shortcutseffects

A shortcuts cheat-sheet modal with grouped rows, realistic keycaps, and a search field.

Build something luminous

A cone of light draws every eye straight to your headline, just like Linear.

Lamp Heroheroes

An Aceternity-style lamp: a glowing horizontal light bar with a conic gradient cone illuminating a headline.

Auto-touring the gridHover to explore
PRO
Layout Gridgrids

A bento grid whose tiles morph into a large detail card on click, auto-cycling in the demo.

LUMEN RIDGE42.361° N · 071.058° W · ELEV 1240m
LUMEN RIDGE42.361° N · 071.058° W · ELEV 1240m
Optical loupe
1.9×
PRO
Lenseffects

A circular magnifying lens that enlarges whatever it drifts over, following the cursor on hover.

Lumenite ships a growing set of motion primitives for React. Browse the component library
CL
lumenite.dev/components
Component Library
Forty plus copy paste components, fully typed and themed for dark UIs.
, compose your interactions with the motion primitives, or follow every release in the changelog.
PRO
Link Preview Hovernavigation

An inline link that reveals a floating animated preview card on hover.

Liquid Glass
Apple-style material

Real backdrop refraction, a specular edge, and a highlight that tracks your cursor. Move over the card to see it bend the light behind it.

Liquid Glass Cardglass

An Apple-style translucent glass panel with backdrop refraction, a specular edge, and a cursor-tracked highlight.

Realtime traffic

All properties, last 60 seconds

Live
02.4%

active visitors right now

AK
KO
ML
RP
SA
+128
New York and 132 others
browsing right now
Sessions per minute0 /min
Peak today
1,402
Avg. session
3m 12s
Countries
47
Live Visitor Countsections

A live analytics widget with a pulsing dot, count-up, visitor avatars, and a scrolling sparkline.

Loading states

Four restrained, brand-tinted loaders

Live
Ring spinner
Bouncing dots
Signal bars
Orbiting dot
Loaderseffects

A tasteful set of loaders: spinning ring, bouncing dots, animated bars, and an orbiting dot.

VertexNorthstarKindredFluentHalcyonPrismVertexNorthstarKindredFluentHalcyonPrism
OrbitalCascadeMeridianLatticeAnchorageSolaceOrbitalCascadeMeridianLatticeAnchorageSolace
Logo Marqueetestimonials

A dual-row infinite logo marquee with opposite-direction rows and edge fade masks.

Magnetic Buttonbuttons

A button that magnetically pulls toward the cursor with a spring release.

Lumenite UI

Aceternity-grade components for teams who ship fast.

Product

Resources

Company

© 2026 Lumenite UI. All rights reserved.

Mega Footersections

Large footer with a newsletter row, link columns, social icons and a top border glow.

Platform
Building blocks
NewEdge runtime v2

Ship globally with 40ms cold starts.

Read the changelog
PRO
Mega Menunavigation

A nav item that drops a rich mega-menu panel of icon links and a featured promo tile.

Meteor shower

Streaks of light fall across the night, each with a glowing head and a tapering tail.

Meteorseffects

A meteor shower of diagonal light streaks falling across a card.

Performance

Realtime overview, updated continuously

Live
Net revenue
+14.2%
$0
vs. previous 7 days
Active users
+6.1%
0
vs. previous 7 days
Conversion
+0.8%
0.00%
vs. previous 7 days
Trial signups
-3.1%
0
vs. previous 7 days
PRO
Metric Cardsgrids

A row of KPI cards with count-up values, trend chips, and sparklines that draw in.

Performance

Store metrics, updated live

24h7d30d
Revenue
$0.0k12.4%
Live
MTWTFSS
Sessions+8.2%
0
Conversion
0%of 3.6k visits
PRO
Mini Chartsgrids

A dashboard card with an animated line chart, growing bars, and a sweeping donut.

Moving Border Buttonbuttons

A glowing dot travels continuously around the button border.

Deploying to production
0/5
Provisioning workspaceworking
Installing dependencies
Warming edge cache
Running migrations
Ready
Multi Step Loadereffects

A loading overlay that steps through status messages, checking each off as it completes.

Step 1 of 3Account

Let's create your account.

PRO
Multi-Step Formforms

A 3-step animated form with a progress bar and slide transitions.

Stay in the loop

Product updates, no spam, unsubscribe anytime.

Newsletter Signupforms

A polished email capture row with an animated success state.

Noise Gradient

A grainy gradient backdrop using an SVG turbulence filter.

Noise Gradientbackgrounds

A grainy gradient hero backdrop using an SVG turbulence filter.

Console

Workspace activity

PRO
Notification Centersections

A bell with an unread count that opens a sliding feed and a mark-all-read action.

$0

Revenue

0+

Users

Number Tickertext

Animated spring-driven count-up numbers, formatted with commas.

Getting started

Finish these steps to launch your first deploy.

0%
complete
Create project
Name your workspace and choose a region.
Invite team
Add teammates by email or a shared link.
Connect repository
Link a GitHub repo to sync changes.
Deploy
Push to main and ship to production.
0 of 4 steps doneOpen dashboard
Onboarding Checklistsections

A getting-started checklist with a progress bar that checks off steps with a spring.

Orbiting Logoseffects

A central brand tile with integration icon chips orbiting at three radii and speeds, built from pure transforms.

Verify it's you

Code sent to a•••n@lumenite.dev

Didn't get it?in 0:24
OTP Inputforms

A one-time-code input with a glowing active box, springy digit pops, and a success state.

Enter passcode
Autoplaying · tap the keys to try
OTP Keypadforms

A numeric PIN keypad with press ripples that types a code and flashes an unlock success.

Featured collection
Page 1 of 6
01
Dashboard

Nebula Analytics

Realtime product metrics with cohort retention baked in.

Paginationnavigation

Numbered pagination with a sliding active pill and prev/next controls, auto-advancing.

Canvas field

Points in motion

A deterministic constellation that drifts on its own and parts around your cursor. Move across it to break the threads.

Particlesbackgrounds

A canvas constellation of drifting glowing dots that connect nearby and repel the cursor.

Add your phone

We'll text a code to confirm it's really you.

(000) 000-0000
Standard carrier rates may apply. Never shared.
Phone Inputforms

An international phone field with a country selector and formatted number, animated on a loop.

The Lumenite way

Design that feels
effortless.

Motion, spacing, and type, tuned until nothing on the page feels accidental.

Pointer Highlighttext

A hand-drawn rectangle draws itself around a word as a small pointer moves to it.

Starter

$0/mo

For side projects and prototypes.

  • 5 components/mo
  • Community support
  • Basic themes
Most Popular

Pro

$29/mo

For teams shipping real products.

  • Unlimited components
  • Priority support
  • All pro themes
  • Figma files

Enterprise

$99/mo

For scaled orgs with custom needs.

  • Everything in Pro
  • SSO & audit logs
  • Dedicated Slack channel
Pricing Cardscards

A three-tier pricing layout with a highlighted middle tier, hover lift, and popular badge.

Pro

For teams shipping every day.

$01234567890123456789/mo

Billed monthly, cancel anytime

  • Unlimited projects and seats
  • Advanced usage analytics
  • Priority support, 4h response
Pricing Toggleforms

A monthly/annual billing toggle whose price rolls between values with a save chip.

Lumen Vial, 10ml

$68.00
Product Cardcommerce

Premium product card with CSS-art visual, hover lift, rating stars and an animated add-to-cart button.

PRO
Product Quick Viewcommerce

Product card that morphs into a quick-view modal with gallery dots, specs and add-to-cart.

Resource usage
Current billing period
Live
0%
Storage
184 GB of 256
0%
Bandwidth
5.4 TB of 12
0%
Seats
22 of 25 active
0%
Compute
Cluster load
Updated moments ago4 of 4 within limits
Progress Ringsgrids

A row of gradient circular progress rings that sweep to their values with center readouts.

Free shipping on orders over $75

A cycling announcement bar for promos, restocks, and shipping thresholds.

Promo Barcommerce

Top announcement bar that cycles through offers with vertical slide transitions and a dismiss button.

Monthly budget

Set your plan spend

Growth
$280/ month
$280
$20$500
Included credits
11,200
Range Sliderforms

A gradient-filled range slider with a glossy thumb and a value tooltip above it.

Retro Grid

A synthwave horizon, receding forever, scrolling toward you.

PRO
Retro Gridbackgrounds

A synthwave perspective grid receding to a glowing horizon, scrolling toward the viewer.

Ripple Grid

Rings pulse outward from a single point of light, endlessly.

Ripple Grideffects

Concentric rings expanding outward from a central point over a dotted field.

Decoder
Live

Hover the headline to re-run the decode. At rest it keeps a faint flicker, so the panel never reads as static.

cipher aes-256latency 12ms
PRO
Scramble Texttext

Hover-triggered character scramble decode effect.

Field notes

The quiet mechanics of a good scroll

Ilya Renner6 min read

Progress should be felt before it is read. A thin line travelling across the top of the page does most of the work, because the eye follows its motion without any effort at all.

The dial in the corner is for the pause, the moment a reader glances up and wonders how far along they are. It answers in a single number, then steps back out of the way.

Neither element asks for attention. They report, quietly and continuously, and let the writing stay the thing you actually came here to read.

Get the pacing right and no one will notice the instrument. They will only notice that the page felt easy to finish.

0%
Scroll Progressnavigation

A gradient reading-progress bar with a circular percentage indicator over an article layout.

Revenue
Live
$28,940
vs last week
14.6%
Segmented Controlnavigation

An Apple-style segmented control with a sliding frosted thumb and crossfading content.

Shimmer Buttonbuttons

A dark button with a traveling shimmer highlight.

Light that traces the edge

A single specular highlight travels the border, thin and bright. It stays clipped to the radius, so the corners never catch or poke.

Continuous loop, runs on GPU transform
Shine Bordercards

A card with a thin, bright shine traveling continuously around its border.

Shooting Stars

A quiet starfield punctuated by the occasional shooting star.

PRO
Shooting Starsbackgrounds

A canvas starfield with periodic shooting stars streaking by.

MV
Mara Vance
mara@lumenite.io
PRO
Sidebar Navnavigation

An app sidebar with grouped icon items, a sliding active indicator, workspace switcher and user chip.

PRO
Sidebar Revealnavigation

A collapsible icon sidebar that expands on hover, sliding labels into view.

AF
Aria Fontaine
Design systems lead
Case study

Northwind analytics rebuild

A ground-up refresh of the reporting suite with a faster charting engine and a calmer visual language across every dashboard.

Open project
12
Skeleton Loadereffects

Shimmering placeholder blocks that crossfade into loaded content, then loop back.

Sparkles

A drifting field of twinkling particles rendered on canvas.

Sparkleseffects

A canvas particle field of twinkling sparkles.

Lumenite UI

Make it sparkle

Motion primitives and micro-interactions for interfaces that feel considered, not generated.

Sparkles Texttext

A gradient headline with small star sparkles popping and fading around the letters.

Spinning Texttext

Text laid around a continuously rotating circle with a mark in the center.

Deployments

One default action, a menu of the rest. The library cycles picks so you can feel the motion.

Default actionDeploy to Production
Split Buttonbuttons

A primary action plus a chevron menu of alternates that updates the primary with a spring.

New

Ship interfaces people remember.

A component system that turns a plain page into something considered. Copy, paste, and launch in an afternoon.

Split Heroheroes

Left-aligned split hero with dual CTAs and a floating, glowing product visual with mouse parallax.

Hero spotlight

Light that moves the way
attention does

Two wide beams drift across a fine grid, breathing on a slow loop. A clean, oversized backdrop for launches and landing heroes.

Spotlightbackgrounds

A refined hero with two large soft light beams sweeping in over a dark grid.

Spotlight that follows you

Move your cursor across this card. A soft radial spotlight tracks it, giving every panel a premium, tactile feel.

Spotlight Cardcards

A card with a radial spotlight that follows the cursor.

Platform capabilities
Move across the grid to bring it into focus.
Live
Edge runtime
Cold starts under 40ms in every region.
SOC 2 Type II
Audited controls, encrypted at rest.
Preview deploys
A fresh URL for every pull request.
Live metrics
p99 latency streamed as it happens.
Secrets vault
Rotating keys, scoped per environment.
Global routing
Anycast across 30 points of presence.
Spotlight Cursoreffects

A soft circular spotlight that brightens dimmed content as it follows the cursor or drifts.

Introducing Lumenite

Build interfaces that glow

A sweeping spotlight animation that gives any hero section instant depth and drama.

Spotlight Heroheroes

A hero section with a large angled SVG spotlight sweeping in behind the headline.

Request early access

No password required. We email you a secure sign-in link.

Trusted by 2,400 teams. No credit card to start.

Spotlight Inputforms

An input with a focus glow ring and an animated floating label.

Customer reviewsVerified
4.8
from 2,120 reviews
5
86%
4
9%
3
3%
2
1%
1
1%
How would you rate it?
Greatyour rating is saved
Star Ratingforms

An interactive 5-star rating with springy fill on hover and a live average.

0+
Components
0+
Teams shipping
0%
Avg. build time saved
0+
GitHub stars
Stats Gridgrids

Stat tiles that animate a count-up once they scroll into view.

System status
99.98% uptime over 90 days
All systems operational
  • API latency recovered
    Resolved·9:42 AM

    p99 back to 184ms after a pool resize.

  • Elevated 5xx in eu-west-1
    Degraded·9:35 AM

    1.4% of writes returning 503 at the edge.

  • Replica failover completed
    Operational·9:28 AM

    Streaming replication caught up in 40s.

  • Webhook delivery delayed
    Investigating·9:21 AM

    Events worker backlog is draining now.

Status Timelinesections

A status-page timeline with colored status dots and entries that slide in on a loop.

Onboarding

Set up your workspace

Step 1 of 4
0% complete
1
Account
Your details
2
Plan
Pick a tier
3
Payment
Billing info
4
Done
All set
Create your account

Add your name and work email to get started. We will send a verification link before the next step.

Stepperforms

A multi-step progress stepper with an animated connecting line and spring checks.

01 / 03
Compose
Scroll to step through
How it works

Three steps from blank file to shipped.

01

Compose from primitives

Start with typed, headless building blocks. Every prop autocompletes and carries its own inline documentation.

02

Tune one motion curve

A single spring drives every transition, so menus, sheets, and overlays all move like one coherent product.

03

Own the source

Copy each component straight into your repo. No runtime dependency, no version lock, no surprises at build time.

PRO
Sticky Scroll Revealgrids

Left content stays sticky while right-side entries scroll and activate in sequence.

Project stack
reactnext.jstypescriptmotion
addremove
4 / 12
Suggested
Tag Inputforms

A chip input that types and springs new tags in on a loop, with removable chips.

AC

Ava Chen

Founder & CEO

MR

Marcus Reed

Head of Design

SL

Sofia Lima

Lead Engineer

JP

Jonah Park

Growth

Team Gridsections

Team member grid with gradient-initial avatars and a role reveal that slides up on hover.

zsh, lumenite
Terminalcards

A macOS-style terminal window that types out a realistic install command with colored output and a blinking cursor, looping on a clean cycle.

We rebuilt our billing dashboard on Lumenite and shipped it two sprints early. The spring defaults are tuned so well that our designers signed off without a single revision.
DO
Daniel Osei
Head of Design, Cadence
Testimonial Carouseltestimonials

A single-testimonial carousel that auto-rotates quotes with avatars, ratings, and dots.

We shipped our landing page in a single afternoon. The polish is unreal.

AC

Ava Chen

Founder, Nimbus

Every component feels art-directed. Our design team stopped asking for custom builds.

MR

Marcus Reed

CTO, Fjord

The animations are subtle enough to feel premium, not gimmicky.

SL

Sofia Lima

PM, Orbital

Best component library we've used for fast, credible-looking MVPs.

JP

Jonah Park

Design Lead, Vessel

Dropped this straight into production. Zero rework needed.

PN

Priya Nair

Founder, Kindle Labs

Tailwind tokens made re-theming trivial across our whole app.

EC

Elliot Cross

Eng, Northstar

PRO
Testimonial Walltestimonials

Masonry-style wall of testimonial cards with staggered entrance and hover highlight.

Wordsthatfadeandsharpenintoexistenceasifamindwerecomposingthemlive.
Text Generatetext

Words fade and blur in one by one, like AI generating text live.

Interactive typography

Lightthatfollowsthewords

Hover any character to pull it toward the light. At rest, a slow glow drifts across the line.

Text Hover Glowtext

Per-letter lift and glow on hover across a headline.

Text reveal

Move across the panel to wipe the surface away. Leave it be and the seam sweeps on its own.

Move to reveal
Runs deep
Looks simple
PRO
Text Reveal Cardcards

Move across the card to wipe a mask and reveal a hidden phrase, with an auto-sweep at rest.

Design principles
Webelievesoftwareshouldfeelcalm.Everyinteractionearnsitsmotion,everysurfaceholdsitslight,andnothingmoveswithoutareason.Thatisthebarwebuildtoward.
Scroll to lock each line in place.
Text Reveal On Scrolltext

Words brighten from dim to bright as you scroll through a passage.

2023

Foundations

Started building the design token system from scratch.

2024

Public beta

Opened the component library to early adopters.

2025

v2 launch

Rebuilt animations on Framer Motion 12 with springs.

2026

Ecosystem

Grew into a full premium UI ecosystem for teams.

Timelinegrids

A vertical timeline with a scroll-progress line that fills as entries fade in.

Autosave
Toast Promisesections

A toast that moves from loading to success or error and dismisses, on a loop.

Realtime activity
Toast Stacksections

Notification toasts that slide in with status icons and an auto-dismiss progress bar.

Account settings

Manage security and alerts.

2 of 3 on

Two-factor authentication

Require a login code on new devices.

Email notifications

Weekly digest and security alerts.

Usage analytics

Share anonymized product usage.

Toggle Switchforms

Premium settings toggles with a spring-animated thumb and a soft glow when on.

lumenite-ui
main
components
ui
button.tsx
PRO
Tree Viewnavigation

A file-tree explorer with expand/collapse folders, type icons, and an auto-moving selection.

0.0%Purity, verified
0%Third-party tested
0hrAverage dispatch
0+Researchers served
Trust Stats Barcommerce

Horizontal band of trust stats with count-up on view and subtle icon glow.

ML
Marcus Lin
@marcuslin

Swapped our dashboard cards for Lumenite's, shipped a screenshot-worthy UI in an afternoon. The spotlight card alone got 40k impressions.

24
9
Tweet Cardtestimonials

A polished embedded-social-post card with a gradient avatar, verified badge, and a heart that fills and ticks up its count on click.

Building

Typewritertext

Classic typewriter effect with a blinking cursor cycling through phrases.

Uploading to workspace
4 files · 352.4 MB
0%
product-photography.zip
0%
0.0 MB of 86.4 MB
launch-film-master.mp4
0%
0.0 MB of 212.7 MB
brand-guidelines.pdf
0%
0.0 MB of 9.1 MB
warehouse-snapshot.sql
0%
0.0 MB of 44.2 MB
Upload Progressforms

File upload rows with type icons, filling progress bars, and a spring check when complete.

What should we build?

Type a prompt, hit enter, watch it scatter into light.

Summarize the Q3 revenue report…
PressEnterto send
PRO
Vanishing Inputforms

An input with a rotating placeholder whose text dissolves into particles on submit.

We rebuilt our marketing site in a weekend. The motion presets saved us days of fiddling.

Elena Ross
Frontend Lead, Northwind

Every component feels considered. Nothing here looks like a template.

Marcus Bailey
Design Engineer, Cobalt

The dark defaults are gorgeous. We shipped without touching a single color.

Sana Malik
Staff Engineer, Meridian

We rebuilt our marketing site in a weekend. The motion presets saved us days of fiddling.

Elena Ross
Frontend Lead, Northwind

Every component feels considered. Nothing here looks like a template.

Marcus Bailey
Design Engineer, Cobalt

The dark defaults are gorgeous. We shipped without touching a single color.

Sana Malik
Staff Engineer, Meridian

Our pricing page conversion climbed the week we dropped these in.

Priya Nair
Head of Growth, Halcyon

Finally a library where the live demos match the code you actually copy.

Diego Alvarez
Product Engineer, Sable

Accessibility was already handled. That basically never happens.

Grace Whitman
Eng Manager, Vantage

Our pricing page conversion climbed the week we dropped these in.

Priya Nair
Head of Growth, Halcyon

Finally a library where the live demos match the code you actually copy.

Diego Alvarez
Product Engineer, Sable

Accessibility was already handled. That basically never happens.

Grace Whitman
Eng Manager, Vantage

The attention to detail on the edges and glows is genuinely unreal.

Noah Kim
Product Designer, Orbit

Cut our component backlog in half during the first sprint.

Ava Bennett
CTO, Kindred

My designers stopped fighting the framework and started shipping.

Tom Fischer
Founder, Beacon

The attention to detail on the edges and glows is genuinely unreal.

Noah Kim
Product Designer, Orbit

Cut our component backlog in half during the first sprint.

Ava Bennett
CTO, Kindred

My designers stopped fighting the framework and started shipping.

Tom Fischer
Founder, Beacon
Vertical Marqueetestimonials

Columns of cards scrolling vertically at different speeds with top and bottom fades.

Platform
01Ship

Deploy every push in seconds

Every commit builds, previews, and promotes on its own. Instant rollbacks keep production one click from a known good release.

  • Immutable preview URL for every pull request
  • Atomic promotions with zero downtime
  • One-click rollback to any prior build
12s
median build to live
Vertical Tabsnavigation

Vertical tabs with a sliding indicator and icons that crossfade a matching content panel.

Warp Background

Thin panels flow outward from the center, like slipping past lightspeed.

PRO
Warp Backgroundbackgrounds

Thin panels flow outward from the center in perspective, giving a warp-speed feel.

Wavy Background

Layered flowing wave blobs animate gently behind your content.

PRO
Wavy Backgroundbackgrounds

Layered, animated flowing wave blobs rendered on canvas.

Depth on every surface

The panel leans toward your cursor, then keeps a slow living drift when you step away. One spring, no textures, no images.

Live at restspring physics
Wobble Cardcards

A card that translates and skews subtly with the cursor for a jelly feel.

San FranciscoNew YorkLondonDubaiSingaporeTokyoSydneySão PauloLagos
Live network

Traffic routed in real time

Anycast edge across nine regions, every request lands on the closest node, then fans out worldwide.

42ms
median
9
regions
1.2M
req / s
PRO
World Mapeffects

A dotted world map with glowing connection arcs traveling between city points on a loop.