# Setup per platform

## Install (any JavaScript project)

Enma is public on npm (MIT). No token or registry setup; in the project:

```sh
pnpm add enma-design
```

Imports: `enma-design/css`, `enma-design/react`, `enma-design/native`, `enma-design/tokens`, `enma-design/fonts/<theme>`, `enma-design/tailwind.css`. To install one focused package instead: `pnpm add @enma-design/css`.

## Next.js (App Router)

```tsx
// app/layout.tsx
import 'enma-design/css';
import 'enma-design/fonts/graphite';
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-enma="graphite" data-theme="dark">
      <body className="e-canvas">{children}</body>
    </html>
  );
}
```

Set `data-enma` and `data-theme` on the server so the first paint is right (no flash). Components that use browser APIs are already `'use client'`. With a light/dark toggle, run a tiny script first in `<head>` that reads the saved mode and sets `data-theme` before paint.

## Vite (React)

```html
<!-- index.html -->
<html lang="en" data-enma="ember" data-theme="dark">
  <body class="e-canvas">
    <div id="root"></div>
  </body>
</html>
```

```tsx
// src/main.tsx
import 'enma-design/css';
import 'enma-design/fonts/ember';
import { createRoot } from 'react-dom/client';
import { App } from './App';

createRoot(document.getElementById('root')!).render(<App />);
```

## Tailwind CSS v4

```css
@import 'tailwindcss';
@import 'enma-design/css';
@import 'enma-design/tailwind.css';
```

Utilities then follow the active theme: `bg-surface text-ink rounded-lg font-display`. Never Tailwind's built-in palette.

## React Native and Expo

```sh
pnpm add enma-design react-native-reanimated expo-haptics @expo-google-fonts/geist expo-font
```

```tsx
import { EnmaProvider } from 'enma-design/native';
import { Geist_400Regular } from '@expo-google-fonts/geist/400Regular';
import { Geist_600SemiBold } from '@expo-google-fonts/geist/600SemiBold';
import { useFonts } from 'expo-font';

export default function App() {
  const [loaded] = useFonts({ Geist_400Regular, Geist_600SemiBold });
  if (!loaded) return null;
  return (
    <EnmaProvider theme="ember">
      <RootNavigator />
    </EnmaProvider>
  );
}
```

Set the status bar and navigation theme from `useEnma().color` (`bg`, `surface`, `ink`, `line`). Every rounded view uses `borderCurve: 'continuous'`; depth uses the theme's `shadow.card` as `boxShadow`.

## Chrome extension (MV3)

- Popup and options: import `@enma-design/css` and `@enma-design/css/fonts/graphite.css` in the page's entry; Vite bundles the font files into the extension, so nothing loads from the network.
- Set `data-theme` from `matchMedia('(prefers-color-scheme: dark)')` and listen for changes.
- Content scripts: attach a shadow root, put Enma's CSS inside it and set `data-enma` and `data-theme` on a wrapper in the shadow root. Fonts must be declared in the page (fonts don't load from inside a shadow root), so inject the `@font-face` rules into `document.head` with `chrome.runtime.getURL` paths, listed in `web_accessible_resources`.

## VS Code webview

```html
<link rel="stylesheet" href="${webview.asWebviewUri(enmaCss)}" />
<link rel="stylesheet" href="${webview.asWebviewUri(vscodeCss)}" />
<body data-enma="graphite" class="e-canvas"></body>
```

Set `data-theme` from the body class VS Code adds (`vscode-dark`, `vscode-light`, `vscode-high-contrast`); allow `font-src ${webview.cspSource}` in the Content Security Policy.

## Plain HTML and Claude artifacts

Inline `enma.css` in a `<style>` (or link it), set `<html data-enma="paper" data-theme="light">` and `<body class="e-canvas">`, then use the class recipes from the `enma-design` skill. In a Claude artifact, read `https://enma.manishmandal.com/enma.md` first and name the theme.

## CLI

One accent color for the single most important thing; secondary text dim; numbers right-aligned with units; status as a word or symbol plus color ("✔ Done"); respect `NO_COLOR`, plain output when not a TTY, `--json` for scripts; verbs first, sentence case, no exclamation marks.