lucentia-ui

A React UI design token and component library based on neumorphism, featuring both light and dark color themes.

日本語版はこちら → README.ja.md

Installation

Using npm:

npm install lucentia-ui

Using yarn:

yarn add lucentia-ui

Requirements

• React 18+
• Environment that supports CSS Modules(Next.js / Vite / CRA, etc.)

Usage

Import global styles (required)

Important: Importing global styles is required when using lucentia-ui.

import "lucentia-ui/styles";

lucentia-ui components are designed around CSS Variables (Design Tokens).

:root {
  --color-background: #ffffff;
  --color-text: #111111;
}

By importing import "lucentia-ui/styles";

• the following are enabled:
• Design token definitions
• Base styles

Default component appearance

For Next.js, import this in app/layout.tsx or pages/_app.tsx.

2.Use components

import { Button, Checkbox, Radio } from "lucentia-ui";

export default function Example() {
  return (
    <>
      <Button variant="primary">Save</Button>
      <Checkbox label="Accept terms" />
      <Radio label="Option A" />
    </>
  );
}

• No additional CSS imports are required
• The light theme is applied by default

Dark Theme

Use ThemeProvider only when enabling dark mode or theme switching.

Theme example

import { ThemeProvider } from "lucentia-ui";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultTheme="dark">
      {children}
    </ThemeProvider>
  );
}

Component Design Policy

• Respect native HTML elements
• props extends HTMLAttributes
• Props extend standard HTML attributes
• No Tailwind CSS or inline styles

Versioning

lucentia-ui follows Semantic Versioning. Breaking changes are released as major versions.

License

MIT