Docs

Getting started

Set up Lunia DS once per app, then add components by name. You need Tailwind CSS v4.

Set up with the CLI

The CLI copies the component files into your app. You own the code and can change it. Pick your framework:

Create a Next.js app with Tailwind CSS v4, or use your own.
```
$ npx create-next-app@latest my-app --typescript --tailwind --app
```
Set up Lunia DS.
This writes lunia.json, the tokens file styles/lunia.css and the cn() helper, and imports the tokens in app/globals.css.
```
$ npx @ganisigit/lunia-ds init
```
Add a component.
```
$ npx @ganisigit/lunia-ds add button
```

Use it.

app/page.tsx

import { Button } from '@/components/lunia/button/button';

export default function Page() {
  return <Button>Save</Button>;
}

Use shadcn or shadcn-vue

Lunia publishes every component in the shadcn registry format. If your app already uses shadcn (React) or shadcn-vue (Vue), you can add a component by its URL.

Add the item by URL.
Run this in an app that already has a shadcn components.json. React apps use the shadcn CLI, and Vue apps use shadcn-vue. The tokens and the cn() helper come along as dependencies.
```
$ npx shadcn@latest add https://luniads.ganisigit.com/r/react/button.json
```
```
$ npx shadcn-vue@latest add https://luniads.ganisigit.com/r/vue/button.json
```
Import the tokens after Tailwind.
The shadcn CLI writes the tokens file but does not import it. Add this line to your main CSS file:
globals.css
```
@import "tailwindcss";
@import "../styles/lunia.css";
```

Copy the files yourself

You do not need a CLI. The registry files are plain JSON with the source code inside.

Install the class helpers.
Terminal
```
npm install clsx tailwind-merge
```
Copy the tokens and import them after Tailwind.
Download https://luniads.ganisigit.com/r/react/lunia-tokens.json and save its file content as styles/lunia.css. Then import it right after @import "tailwindcss";.
Copy the cn() helper.
Save the content of lunia-utils.json as lib/lunia-utils.ts.
Copy the component files.
Each component page lists its files under Installation, Manual.

Tailwind theme

The Lunia theme replaces the Tailwind defaults that have the same name. If your app uses these classes, they now give the Lunia value. Numbered spacing such as p-4 keeps its usual size.

Classes	What changes
rounded-*	Radius names such as rounded-md and rounded-xl use the Lunia radius scale.
shadow-*	Shadow names such as shadow-md and shadow-xl use the Lunia shadows.
text-xs to text-xl, text-display-*	Text sizes come with their own line height and letter spacing.
ease-out, ease-*	ease-out is the Lunia curve, not the Tailwind one. ease-throw and ease-settle are new.
duration-*	Named durations such as duration-sm and duration-xl are new. Numbers such as duration-300 still work.
blur-*	Blur sizes use the Lunia values.
max-w-, w-, container	max-w-md is 560px, not 28rem. Container sizes follow the Lunia widths.
Color palettes	Names such as gray-500 keep the same values. New names such as bg-primary and text-secondary are added.

If you want to keep a Tailwind default in the same app, use an arbitrary value, for example rounded-[0.375rem]. See the Tokens page for every name.

Dark mode

Light is the default. Add the dark class or data-theme="dark" to the html element, or to any part of the page. Every token then gives its dark value.

To keep one part light inside a dark page, add the light class or data-theme="light" to it.

app/layout.tsx

<html lang="en" className={isDark ? "dark" : undefined}>

Reduced motion

Every component follows the system setting prefers-reduced-motion. The state still changes, but nothing moves.

To force it for one part of the page, for example in a preview, add data-motion="reduce" to that part. The motion-reduce: classes follow both.

CLI options

--registry <url or folder> reads components from another registry. The default is LUNIA_REGISTRY_URL or https://luniads.ganisigit.com.
--overwrite replaces files that differ. Without it, the CLI never changes your edits.
--no-install lists the npm packages instead of installing them.