A design system for Anephenix.
npm i @anephenix/ui --save
- Node.js (24+)
- React (19+)
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.
35+ accessible, themeable React components grouped by category — forms, layout, display, overlays, and navigation.
Full API reference: COMPONENTS.md
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 |
npm t
Screenshots of each component are stored in public/screenshots/ and displayed on the docs overview page. Two scripts manage them.
npm run compute-clips
Visits every component's preview page at the configured viewport size (set in scripts/screenshot-config.json), measures each component element's bounding box via Puppeteer, adds padding, enforces a minimum size, and writes a "clip" entry for every component back into the config. Run this whenever a new component is added or an existing preview layout changes.
npm run screenshots
Reads scripts/screenshot-config.json, boots the Astro dev server, and captures a screenshot for each component using the configured strategy:
| Strategy | Behaviour |
|---|---|
"clip" |
Crops to the { x, y, width, height } region |
"element" |
Crops to the bounding box of a CSS selector |
"full" |
Captures the full viewport |
The output files are saved to public/screenshots/<ComponentName>.png.
Open the preview page for a component in your browser:
http://localhost:4321/preview?component=Button
A Crop Tool panel appears in the bottom-right corner. Click Draw crop, drag a rectangle over the component, then click Copy config snippet to copy a ready-to-paste entry for scripts/screenshot-config.json. After saving the config, re-run npm run screenshots to regenerate.
- Add the component preview to
site/components/PreviewPage.jsx - Run
npm run compute-clipsto auto-measure the clip region - Run
npm run screenshotsto generate the screenshot - Optionally open the preview page, use the Crop Tool to fine-tune, update the config, and re-run
npm run screenshots
©2026 Anephenix Ltd. UI is licenced under the MIT Licence.