luminescent.
A new chapter for Luminescent

A little light.
A lot of possibility.

Thoughtfully crafted React components for interfaces that feel a little more human. Beautiful by default. Yours in every detail.

Start building Explore components
npm install luminescentReact 18 + 19
TypeScript Open source Made for your theme
REAL COMPONENTS. GO AHEAD, TRY THEM.

Your creative space

Good things start with a little intention.

Live
WORKSPACE

Studio Luminescent

Make some room for focus

A calmer space for your next big idea.

72%
Find your light
Built with Luminescent
<YourNextIdea />
34 considered components Keyboard first interactions CSS variable themes Tree shakeable modules
FAMILIAR BUILDING BLOCKS. A DIFFERENT KIND OF LIGHT.

The details make the difference.

From the first click to the finishing touch, a visual language that holds together.

All components
A bright beginning

Actions with intention

Buttons, toggles, and thoughtful states.

Peach sunset⌄

Every choice, considered

Native controls. A softer presence.

A reassuring little signal

Feedback that feels clear and human.

YOUR BRAND. YOUR KIND OF GLOW.

Beautiful defaults.
Room to make it yours.

A theme is more than a color switch. Configure semantic tokens, dial back the glow, and give every component a place in your design system.

Dark, light, and system themes Independently themed trees Reduced motion built in
Find your light in the playground
One provider. Your visual language.React + CSS
tsx
import { LuminescentProvider, Button } from "luminescent";
import "luminescent/style.css";


<LuminescentProvider
  theme="dark"
  accent="peach"
  glow="subtle"
>
  <Button>Make it yours</Button>
</LuminescentProvider>
peachvioletbluemint
THE GLOW IS ONLY THE BEGINNING

Thoughtful on the inside, too.

Accessible by design

Native form controls, visible focus, and established focus management for complex overlays.

Made to fit your stack

Typed APIs, ESM and CommonJS, and clear boundaries for Next.js and server rendering.

A system, not a collection

Shared semantic tokens connect color, space, typography, glow, and motion.

FROM IDEA TO INTERFACE

Your next bright idea starts here.

Install the package, import the stylesheet, and make something worth using.

Read the quick start
bash
npm install luminescent


# Then import your first component:
# import { Button } from "luminescent";
# import "luminescent/style.css";
✳

A little care goes a long way.
Build something that feels like you.