Getting Started

Two ways to use the design system: registry (recommended) or npm package.

1. Prerequisites

Node.js
>= 22.15.0
React
>= 18
Tailwind CSS
^4.0.0
shadcn CLI
>= 2.4.0

2. Install Peer Dependencies

Install required dependencies once in your host app.

3. Configure components.json

Add the @lumin namespace to your components.json:

components.json

4. Install Components

Use the shadcn CLI to add components to your project:

5. Wire Up Tailwind + Theme + Tokens

Import the Lumin DS theme in your global CSS file (e.g., app/globals.css):

app/globals.css

Important: Only ONE @import "tailwindcss" in your app. Do NOT import @luminpdf/ds/app/globals.css — that's for DS internal use only.

6. Use in your app