Everything you need to ship with Lumenite

Lumenite components are built for Next.js with the App Router, styled with Tailwind CSS v4, and animated with Framer Motion. They’ll also work in any React project with Tailwind configured — Next.js is just what we build and test against.

Install the small set of dependencies most components rely on:

npm i framer-motion clsx tailwind-merge lucide-react

If your project doesn’t already have Tailwind CSS v4 set up, follow the official Tailwind installation guide first — Lumenitecomponents assume Tailwind utility classes are available and use v4’s @theme token system for color and font variables.

Nearly every component uses a small cn() helper to merge Tailwind class names safely, so conditional classes and consumer-supplied classNameprops don’t collide. Add this once to your project at lib/utils.ts:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Every Lumenite component snippet imports this from @/lib/utils — adjust the import path if your project structure differs.

There’s no package to add to your package.json and no black-box dependency to upgrade later. Instead:

1. Browse the /components gallery and preview components live, in both light and dark mode where relevant.
2. Click a component to open its detail page and copy the full source code with one click.
3. Paste it into your project — typically as a new file under components/ui/— and import it wherever you need it.
4. Edit it. It’s your code now: rename props, restyle with your own tokens, strip out what you don’t need.

Pro components follow the exact same workflow — the only difference is that the source is hidden behind your license until you unlock it. See the Licensepage for what you can and can’t do with copied code.

Components are written against a small set of semantic Tailwind tokens rather than hard-coded hex values, so re-theming your whole app means editing your globals.css @theme block once, not every component individually.

Swap the underlying color values in your @theme block and every copied component picks up your brand automatically — no find-and-replace across files.