Luma

Living Interfaces

Components Pricing Documentation About Get Access

✦ 65 living interfaces

The only component library that isn't locked to React.

Edit live, works anywhere, always up to date.

Works in

ReactVueWordPressWebflowPlain HTML

Live previewrunning

Color

Speed

Drag to edit — no code, no export.

Same component, two ways

One you paste and pray. One stays alive.

Copy-paste — the old way

import { motion } from "framer-motion"
<motion.button
whileHover={'{{'} x: mx {'}}'}
>Magnetic</motion.button>

⚠ Framer Motion 11 → broken

Luma — livelive

Color

Speed

Components

Any

Stack it runs in

Live

Edit in the browser

Files to maintain

Living, not static

Ship it once. It keeps getting better.

Every component stays live in your project. When we ship a fix, an accessibility pass, or a browser-compat patch, it's already there — no re-copying, no version drift, no maintenance on your side.

1 · Edit it live

shipping: a11y patch ✓

2 · We ship an update

Magnetic Button

Button · Updated

✓ Up to date

3 · Already in your project

Updates with zero effort Zero compat maintenance Works in any stack

65 components · 7 categories

Components, composed
with care.

Pick a category, preview the motion, and edit it live on Luma — or get an AI prompt to customize the component's behavior, no files needed.

Pricing

Start free. Upgrade when ready.

Monthly or yearly. Cancel anytime.

Free

Start building, free forever

^$0

13 production-ready components. No credit card.

✓13 production-ready components
✓Live in-browser editor
✓Works in any stack
✕Pro & Studio components
✕Commercial license

Most popular

Pro

Everything you need to ship fast

^$19/mo

Billed monthly · cancel anytime

✓34 components, every category
✓Commercial license included
✓Live visual editor
✓Core category updates
✓Always up to date

Studio

The full library. Every pattern.

^$39/mo

Billed monthly · cancel anytime

✓Everything in Pro
✓All 65 + premium patterns
✓First access to new drops
✓Multi-project license
✓Priority support

“Why can't I export the code?”

Because the moment you export it, it stops being maintained — by us or by you. Every component in Luma stays live: when we ship a fix, an accessibility improvement, or a new browser-compat patch, it's already in your project. No re-copying, no version drift, no “which version do I have” guesswork. You get an editor, not a snapshot.

↻

Updates with zero effort

Every fix and improvement lands in your project automatically — nothing to re-copy or track by hand.

⊘

No compat maintenance

No dependency upgrade ever quietly breaks a snippet you pasted months ago. Your components just keep working.

◐

Real visual editing

Tune colors, timing and motion with live controls — not a block of code you paste and pray.

Secure checkout

Instant access

Always up to date

4.9 average rating

Why can't I export the code?+

Is it monthly or yearly?+

Either. Pick monthly for flexibility, or save ~20% on a yearly plan. You can change or cancel anytime — no lock-in, no renewal surprises.

Can I use components in client projects?+

Free is for personal and learning use. Pro includes a commercial license for your own products. Studio adds a multi-project license for unlimited client work.

How do I access everything after subscribing?+

There's nothing to download — and that's the point. The moment you subscribe, your full library unlocks inside the editor. Sign in from any device and everything's there, always current.

Start with 5 free components.

Drop your email. Get 5 production-ready components + prompts, free.

Something went wrong — try again

Check your inbox ✦

Component

Free

✦

Notification

Detail

The only component library that isn't locked to React.

Ship it once. It keeps getting better.

Stop shipping ugly UI.