Auxalia UI — auxalia-ui-kit

A modern, accessible React component library built with TypeScript, Radix UI, and Tailwind CSS v4. Designed for seamless integration into large-scale projects.

Table of Contents

• Features
• Requirements
• Installation
• Setup
• Components
• Tailwind Preset
• Design Tokens
• Development
• License

Features

• Customizable — CVA-powered variants for predictable, type-safe styling
• Accessible — Built on Radix UI primitives, WCAG compliant
• Tree-Shakeable — ESM + CJS dual output for optimal bundle size
• Type-Safe — Full TypeScript with strict types
• Dark Mode — All components support light/dark themes via CSS class
• Tailwind v4 — Ships a Tailwind preset with Auxalia brand tokens
• Storybook — Interactive component explorer included

Requirements

| Dependency | Version | |-------------|----------| | React | ^19.2.0 | | react-dom | ^19.2.0 | | tailwindcss | ^4.0.0 |

Installation

npm install auxalia-ui-kit

Setup

1. Import styles

In your app's entry CSS file:

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

Or import the design tokens separately:

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

2. Configure Tailwind v4

In your CSS config file (e.g. app.css):

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

Or use the Tailwind preset in your tailwind.config.ts:

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

export default {
  presets: [auxaliaPreset],
};

3. Use components

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

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

Components

Button

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

<Button variant="default" color="primary" size="default">Save</Button>
<Button variant="outline" color="secondary">Cancel</Button>
<Button variant="ghost" color="destructive" size="sm">Delete</Button>

| Prop | Type | Default | |-----------|--------------------------------------------------------|-------------| | variant | 'default' \| 'outline' \| 'ghost' \| 'link' | 'default' | | color | 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'destructive' | 'primary' | | size | 'sm' \| 'default' \| 'lg' \| 'icon' | 'default' | | asChild | boolean | false |

Card

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

<Card variant="default">Content</Card>
<Card variant="elevated">Elevated</Card>
<Card variant="outlined">Outlined</Card>

| Prop | Type | Default | |-----------|----------------------------------------------------------------------------|-------------| | variant | 'default' \| 'outlined' \| 'elevated' \| 'success' \| 'accent' \| 'secondary' | 'default' |

Input

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

<Input placeholder="Enter text..." />
<Input size="lg" variant="error" />

| Prop | Type | Default | |-----------|----------------------------|-------------| | variant | 'default' \| 'error' | 'default' | | size | 'sm' \| 'md' \| 'lg' | 'md' |

Select

import {
  Select, SelectTrigger, SelectValue,
  SelectContent, SelectItem
} from 'auxalia-ui-kit';

<Select>
  <SelectTrigger variant="primary" size="md">
    <SelectValue placeholder="Pick one" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
    <SelectItem value="b">Option B</SelectItem>
  </SelectContent>
</Select>

SelectTrigger variants: 'default' | 'primary' | 'secondary' | 'accent' | 'destructive' | 'error'

SelectTrigger sizes: 'sm' | 'md' | 'lg'

SelectItem variants: 'default' | 'primary' | 'secondary' | 'accent' | 'destructive'

DropdownMenu

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel
} from 'auxalia-ui-kit';

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="default">Edit</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

DropdownMenuItem variants: 'default' | 'primary' | 'secondary' | 'accent' | 'destructive'

Also exports: DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuShortcut, DropdownMenuPortal

Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'auxalia-ui-kit';

const [tab, setTab] = useState('overview');

<Tabs value={tab} onValueChange={setTab}>
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Text

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

<Text size="xl" align="center">Hello World</Text>

| Prop | Type | Default | |---------|---------------------------------------------|----------| | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' | 'md' | | align | 'left' \| 'center' \| 'right' | 'left' |

Field (Form Wrapper)

import {
  Field, FieldLabel, FieldDescription, FieldError
} from 'auxalia-ui-kit';

<Field orientation="vertical">
  <FieldLabel>Email</FieldLabel>
  <Input type="email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
  <FieldError errors={['Email is required']} />
</Field>

Orientation: 'vertical' (default) | 'horizontal' | 'responsive'

Also exports: FieldContent, FieldGroup, FieldSet, FieldLegend, FieldSeparator, FieldTitle

Tooltip

import { Tooltip, TooltipTrigger, TooltipContent } from 'auxalia-ui-kit';

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>Helpful hint</TooltipContent>
</Tooltip>

Also exports: TooltipProvider

Popover

import { Popover, PopoverTrigger, PopoverContent } from 'auxalia-ui-kit';

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Popover content here</PopoverContent>
</Popover>

Also exports: PopoverAnchor

Pagination

import {
  Pagination, PaginationContent, PaginationItem,
  PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis
} from 'auxalia-ui-kit';

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

Collapsible

import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'auxalia-ui-kit';

<CollapsibleRoot>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</CollapsibleRoot>

Label

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

<Label htmlFor="email">Email address</Label>

TableView

A full-featured controlled data table with sorting, filtering, pagination, and search.

import { TableView } from 'auxalia-ui-kit';
import type { TableField, TableConfig } from 'auxalia-ui-kit';

const fields: TableField[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email' },
];

<TableView
  data={rows}
  fields={fields}
  config={config}
  queryParams={queryParams}
  onQueryChange={setQueryParams}
/>

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));
}

Development

# Install dependencies
npm install

# Run Storybook (port 6006)
npm run storybook

# Build static Storybook
npm run build-storybook

License

ISC — Auxalia