Codexa UI

React component library and design tokens for Codexa products.

Library

Build the distributable package locally:

npm run build:lib

The package output is generated in dist/library with ESM, CommonJS, CSS and TypeScript declarations.

Use the public component API from another React project:

import { Button, Card, Input } from '@mateus.desenv/codexa-ui'
import '@mateus.desenv/codexa-ui/styles.css'

export function Example() {
  return (
    <Card padding="medium">
      <Input label="Nome" placeholder="Digite seu nome" />
      <Button>Continuar</Button>
    </Card>
  )
}

The library exports the components from src/components/index.ts and the token objects from src/tokens/index.ts.

Application

Run the documentation app locally:

npm run dev

The app is built separately with npm run build and is written to dist/app.

This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the Oxlint configuration

If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:

{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "typescript", "oxc"],
  "options": {
    "typeAware": true
  },
  "rules": {
    "react/rules-of-hooks": "error",
    "react/only-export-components": ["warn", { "allowConstantExport": true }]
  }
}

See the Oxlint rules documentation for the full list of rules and categories.