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 'codexa-ui'
import '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.

Logo assets

The npm package includes every Codexa logo variation from the official asset pack and the Atlas subproduct family. Atlas preserves the Codexa symbol and changes only the wordmark.

import logo from 'codexa-ui/logos/logos-fundo-transparente/primary-logo.png'
import icon from 'codexa-ui/logos/logo-variations/app-icon-transparent.png'
import atlasLogo from 'codexa-ui/logos/atlas-logo-variations/horizontal-primary-transparent.svg'

Available folders are logos, logos-fundo-transparente, logo-variations and atlas-logo-variations. The complete Codexa pack is also available at codexa-ui/logos/codexa-logo-pack.zip.

Releases

Releases are automated through GitHub Actions and npm Trusted Publishing. Use Conventional Commits so the release workflow can calculate the next version:

• fix: creates a patch release;
• feat: creates a minor release;
• BREAKING CHANGE: creates a major release.

The workflow opens a release PR, updates package.json and the changelog, and publishes to npm after that PR is merged into main.

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.