Public betaReact + CSS

Getting started

Axonyx UI is a dark-first Foundry design system. Start with the framework-agnostic CSS package, then add React wrappers when building in Next.js.

Beta API

Axonyx UI is in public beta. Components and package structure may change before 1.0.

React package is live

The quickest path today is React: install the packages, import the CSS once, then use server-safe components from@axonyx/react. See the focused React quickstart.

Overview

@axonyx/ui

CSS tokens, themes, component styles, and tiny JS islands.

@axonyx/react

Thin React wrappers that map to the same CSS contract.

React quickstart

If you are using Next.js, start with the React wrapper package. It keeps the familiar component model while Foundry CSS remains the visual source of truth.

import "@axonyx/ui/css/index.css";
import { Alert, Button, Card } from "@axonyx/react";
import { ReactIcon } from "@axonyx/react/icons";

Open React guide npm package

Install

npm install @axonyx/ui @axonyx/react

Next.js setup

Import the stylesheet once in your root layout.

import "@axonyx/ui/css/index.css";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="silver">
      <body>{children}</body>
    </html>
  );
}

Use components

Ready

You are using Axonyx components in React.

Themes

Set the theme on the html element.

<html data-theme="silver">
<html data-theme="bronze">
<html data-theme="gold">