React-ready100+ npm downloads

Axonyx for React

Use Axonyx UI in Next.js and React today through thin wrappers over the same Foundry CSS contract that native Axonyx pages already use.

Packages live

Install @axonyx/ui for CSS and assets, then use @axonyx/react for React components and @axonyx/react/icons for the Foundry icon set.

Package model

@axonyx/ui

CSS tokens, themes, component styles, public assets, and small behavior scripts. This is the visual source of truth.

@axonyx/react

Server-safe React wrappers, optional client components, and icons that map to the UI contract.

Install

npm install @axonyx/ui @axonyx/react

@axonyx/react on npm @axonyx/ui on npm

Next.js setup

Import the stylesheet once in your root layout and choose a Foundry theme on the document root.

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

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

Imports

The default React entry is server-safe. Use the client entry only for interactive components.

import { Alert, Button, Card, Stack } from "@axonyx/react";
import { ThemeSwitcher } from "@axonyx/react/client";
import { AxonyxIcon, ReactIcon } from "@axonyx/react/icons";

Server component friendly

Static UI can stay in React Server Components. Interactive pieces opt into the client entry.

Client behavior

The package ThemeSwitcher changes data-theme. When using the opt-in Foundry styles, also synchronize data-foundry with that palette; data-foundry-style independently selects classic, alloy, or forge.

Axonyx keeps JavaScript small by default. Theme switching, dialogs, drawers, tabs, and copy actions can be added as focused client components instead of turning the whole page into a client app.

"use client";

import { ThemeSwitcher } from "@axonyx/react/client";

export function Toolbar() {
  return <ThemeSwitcher />;
}