UI

A design system for Anephenix.

Installation

npm i @anephenix/ui --save

Dependencies

• Node.js (24+)
• React (19+)

Usage

Import the components and the stylesheet in your project:

import { Button, Input, NavBar } from '@anephenix/ui';
import '@anephenix/ui/dist/index.css';

The stylesheet must be imported once at the root of your app. See the full Get Started guide for framework-specific setup (Next.js App Router, Vite, Pages Router), token customisation, and layout utilities.

Components

35+ accessible, themeable React components grouped by category — forms, layout, display, overlays, and navigation.

Full API reference: COMPONENTS.md

Design System

The library ships a set of CSS custom properties for colours, spacing, typography, and grid that all components consume. Override any token in your own stylesheet to theme the system without touching component code.

| Token group | Variables | Docs | |-------------|-----------|------| | Colours | --primary-colour, --blue-one-colour, … | Colours | | Spacing | --spacer-one … --spacer-five | Grid | | Typography | --font-size-base, --font-weight-bold, … | Typography | | Layout | .page, .container, .withSidePadding | Layout |

Tests

npm t

This package is part of the anephenix/ui monorepo. The docs site, component previews, and screenshot tooling live in apps/docs there — see the repo root README.

License and credits

©2026 Anephenix Ltd. UI is licenced under the MIT Licence.