@lexicon_design/react

The lexicon design system as React components. Early release (0.1.0).

Install

npm i @lexicon_design/react react react-dom

Use — drop-in CSS (simplest)

Import the precompiled stylesheet once, wrap your app in LexiconProvider, and use components:

import '@lexicon_design/react/styles.css';
import { LexiconProvider, Button, Dialog } from '@lexicon_design/react';

export function App() {
  return (
    <LexiconProvider theme="dark">
      <Button variant="primary">Save</Button>
    </LexiconProvider>
  );
}

LexiconProvider renders the .lexicon-root scope that the design tokens and portaled overlays depend on. styles.css ships the token variables, the component utility classes, and the --tw-* initializers — but no CSS reset, so it won't clobber your global styles.

Use — Tailwind preset (if you already use Tailwind)

// tailwind.config.js
module.exports = {
  presets: [require('@lexicon_design/react/tailwind-preset')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@lexicon_design/react/**/*.js',
  ],
};

import '@lexicon_design/react/tokens.css'; // token variable definitions
import { LexiconProvider, Button } from '@lexicon_design/react';

The preset maps lexicon's token scale (colors, type, spacing, radius, motion, z-index) onto Tailwind's theme; tokens.css provides the CSS variables the preset's utilities reference. Your own @tailwind base supplies the --tw-* initializers in this mode.

CLI

The package ships a branded command line. Run it without installing anything extra:

npx @lexicon_design/react

That first run shows the lexicon wordmark, your installed version, activation status, and license state. Commands:

| command | what it does | | --- | --- | | lexicon | welcome screen, or your status dashboard once activated | | lexicon activate [key] | unlock lexicon with the license key from your purchase portal | | lexicon doctor | full diagnostic: environment, project wiring, connection, token conformance | | lexicon pull [asset] | list or download premium assets (figma library, templates, recipes) | | lexicon outdated | show available updates for pulled assets | | lexicon figma | open your figma access in the browser | | lexicon help | command reference |

doctor checks your node version, react/typescript/tailwind wiring, styles.css/tokens.css imports, LexiconProvider, git state, and connection latency — then scans your repo's source with the lexicon conformance rules (hardcoded colours, off-token values). Every warning carries a fix-it hint. Use --json in CI: exit code 0 means no failures.

Flags: --json · --verbose · --no-color. The CLI honours NO_COLOR and degrades to plain output on non-TTY streams, so logs and CI stay readable. License keys are stored at ~/.config/lexicon/credentials.json (mode 600) and re-verified quietly at most once a week — going offline never locks you out.

Notes

• Scope: React only at 0.1.0.
• Fonts: components reference --font-sans / --font-mono with system fallbacks. Install the matching @fontsource families if you want the exact lexicon typefaces.
• Tree-shaking: components are emitted as per-module ESM, so unused components drop out of your bundle.