Getting started with Luma

Luma is a library of living interfaces — beautifully crafted, production-ready UI components with motion baked in. This guide walks you through installing and using them.

Installation

Luma components are framework-agnostic. There's nothing to npm install — you copy the code you need directly into your project. This keeps your bundle lean and gives you full control over every component.

Using a component

Every component on Luma comes with three tabs: HTML, CSS, and JS. Click any component tile to open the code drawer, copy what you need, and paste it into your project.

HTML / CSS

For static sites and vanilla projects, copy all three tabs into your page:

<!-- 1. Paste the HTML -->
<button class="mag">Hover me</button>

/* 2. Paste the CSS in your stylesheet */
.mag { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

// 3. Paste the JS before </body>
const btn = document.querySelector('.mag');

React

Pro members get React versions of every component, written with hooks and the Motion library:

import { motion } from 'framer-motion';

export function MagneticButton({ children }) {
  return (
    <motion.button whileHover={{ scale: 1.05 }}>
      {children}
    </motion.button>
  );
}

Vue

Vue 3 single-file components are also included in the Pro plan, fully typed and ready to drop into your project.

Theming

Luma components use CSS custom properties for every color, so theming is as simple as overriding a few variables:

/* Your brand colors */
:root {
  --accent: #e8552f;
  --ink: #1a1814;
  --paper: #f4f1ea;
}

License

The Pro and Studio plans include a license to use components in unlimited personal and commercial projects. You may not resell or redistribute the components as a competing product.

Support

Pro members get access to our community. Studio members get priority support. Found a bug or have a request? We'd love to hear from you.