LunarCSS

Installation

Install LunarCSS and its peer dependencies.

Install

pnpm add @lunar-kit/css
# or
npm install @lunar-kit/css
# or
yarn add @lunar-kit/css

Peer dependencies

PackageRequiredWhen
react >=18YesAlways
react-native >=0.73OptionalNative targets only
postcss >=8.4OptionalWeb (Next.js / Vite) targets only

These are already present in any Expo, React Native, or Next.js project — no separate install needed.

TypeScript types

Add LunarCSS's className augmentations to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@lunar-kit/css/types"]
  }
}

The lunar-css init CLI does this automatically. If you're adding manually, append "@lunar-kit/css/types" to the existing types array.

What gets installed

@lunar-kit/css/               ← core package
  dist/
    index.js            ← mobile runtime (resolveClassList, tw())
    index.web.js        ← web passthrough stub
    metro/
      config.js         ← withLunarCSS() Metro wrapper
      transformer.js    ← AST className → __lcssTw() transform
    web/
      plugin.js         ← PostCSS plugin
    cli/
      index.js          ← npx lunar-css init
    runtime/
      tw.js             ← __lcssTw() runtime helper
    __theme__.js        ← empty stub (populated by Metro at build time)
    types/
      index.d.ts        ← RN component className augmentations

Node version

Node >=18 is required for the Metro transformer and CLI. The browser runtime has no Node requirement.

On this page