Auxalia UI — auxalia-ui-kit

A modern, accessible React component library built with TypeScript, Radix UI, and Tailwind CSS v4.

Overview

auxalia-ui-kit is a design system library for React apps. It ships a Tailwind v4 preset, component primitives, and runtime design tokens for light/dark theming.

Docs

This repository stores the source documentation in docs/:

• docs/CODE_RULES.md
• docs/MAKING_CHANGES.md
• docs/TABLE_SETUP.md

For component usage and design token guidance, consult the Storybook and source files.

Installation

npm install auxalia-ui-kit

Quick Start

Import the library styles and use components in your React app:

/* app.css */
@import 'auxalia-ui-kit/styles.css';

import { Button } from 'auxalia-ui-kit';

export default function App() {
  return <Button variant="default">Click me</Button>;
}

Development

npm install
npm run storybook
npm run build-storybook

License

ISC — Auxalia

Tailwind Preset

The preset includes the full Auxalia brand token system:

import auxaliaPreset from 'auxalia-ui-kit/tailwind.preset';

export default {
  presets: [auxaliaPreset],
};

Brand colors available in Tailwind utilities:

| Token | Value | Usage | | ------------------ | ------------ | ----------------------- | | primary | #A7D500 | Auxalia Green | | secondary | #3e6897 | Auxalia Blue | | accent | #0f868b | Auxalia Petrol | | destructive | #dc2626 | Errors / danger | | auxalia-green-* | 50–900 scale | Extended green palette | | auxalia-blue-* | 50–900 scale | Extended blue palette | | auxalia-petrol-* | 50–900 scale | Extended petrol palette |

Dark mode: configured via the dark class on the root element.

Design Tokens

Tokens are exposed as CSS custom properties and can be used independently:

@import 'auxalia-ui-kit/tokens.css';

/* Example usage in your CSS */
.my-element {
  color: rgb(var(--color-primary));
  background: rgb(var(--color-surface));
}