Installation

Lucent ships as ESM. React 18 or 19 is a peer dependency; Radix UI is a regular dependency kept external so your app dedupes a single copy.

Two names, one library

Lucent is published under two npm names — pick whichever you like:

• @orionshub/lucent — the scoped package
• vitreui — a shorter, unscoped mirror

They share the same version and API. Every example below works with either — just swap the package name in the import. This guide uses @orionshub/lucent.

Install

pnpm

pnpm add @orionshub/lucent
# or the short name:
pnpm add vitreui

npm

npm install @orionshub/lucent
# or the short name:
npm install vitreui

yarn

yarn add @orionshub/lucent
# or the short name:
yarn add vitreui

Peer dependencies (you almost certainly already have these):

pnpm add react react-dom

Import the stylesheet once

Components are unstyled until you import the compiled CSS once at your app root:

import '@orionshub/lucent/styles.css'

See CSS Import for the full list of optional stylesheets (glass-only, fonts, theme panel, Tailwind preset).

Use a component

import { Button } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css'

export function App() {
  return <Button variant="solid">Hello Lucent</Button>
}

Optional: the theming provider

LucentProvider seeds the initial theme axes and enables useLucent(), but it is optional — components read their defaults straight from :root. Add it when you want SSR no-flash, a persisted theme, or the useLucent hook.

import { LucentProvider } from '@orionshub/lucent'

export function App({ children }) {
  return <LucentProvider>{children}</LucentProvider>
}

Continue to Theming & Runtime Controls.