React wrappers for Axonyx UI Foundry - an industrial, dark-first design system for product UI, developer tools, dashboards, and docs.
Website: https://axonyx.dev
@axonyx/react does not own the visual system. It maps React components to the shared CSS/data-attribute contract from @axonyx/ui.
@axonyx/ui = CSS tokens, themes, component styles, small JS islands
@axonyx/react = React wrappers around the same Axonyx UI contractnpm install @axonyx/ui @axonyx/reactImport the CSS once in app/layout.tsx:
import "@axonyx/ui/css/index.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" data-theme="silver">
<body>{children}</body>
</html>
);
}Available themes:
<html data-theme="silver">
<html data-theme="bronze">
<html data-theme="gold">import { Alert, Button, Card, Cluster, Stack } from "@axonyx/react";
export default function Page() {
return (
<main style={{ padding: "3rem" }}>
<Card surface="forged" border="forged">
<Stack gap="md">
<Alert tone="success" title="Axonyx is live">
@axonyx/ui and @axonyx/react are installed from npm.
</Alert>
<Cluster gap="sm">
<Button variant="primary" surface="forged">
Deploy
</Button>
<Button variant="ghost">Open docs</Button>
</Cluster>
</Stack>
</Card>
</main>
);
}Current server-safe React wrappers:
ContainerGridSectionButtonLinkButtonIconButtonCardBadgeAlertStackClusterNavbar,NavbarBrand,NavbarLinks,NavLinkFooter,FooterLinksFieldInputTextareaSelectOptionCheckboxRadio,RadioGroupSwitchBreadcrumbsButtonGroupCodeBlockPropsTableTooltip
Icons:
- Import icons from
@axonyx/react/icons - Includes
AxonyxIcon,BoltIcon,BookIcon,BoxIcon,CheckIcon,ChevronDownIcon,CodeIcon,CopyIcon,ExternalLinkIcon,GitHubIcon,GridIcon,HomeIcon,LayersIcon,LinkIcon,MenuIcon,MoonIcon,PackageIcon,SearchIcon,SettingsIcon,SparkIcon,TerminalIcon,XIcon
Client-only wrappers:
Tabs,TabList,TabTrigger,TabPanelfrom@axonyx/react/clientDialog,DialogHeader,DialogTitle,DialogContentfrom@axonyx/react/clientAccordion,AccordionItemfrom@axonyx/react/clientDropdownMenu,DropdownTrigger,DropdownContent,DropdownItemfrom@axonyx/react/clientThemeSwitcherfrom@axonyx/react/client
<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button surface="forged" variant="primary">Forged Primary</Button>
<Button border="forged">Rivet Button</Button><Card>Default panel</Card>
<Card surface="brushed">Brushed panel</Card>
<Card surface="forged" border="forged">Forged panel</Card>
<Card surface="inset">Inset panel</Card>import { Field, Input, Option, Select, Textarea } from "@axonyx/react";
export function SettingsForm() {
return (
<Stack gap="md">
<Field label="Project name" hint="Used for build output and metadata.">
<Input placeholder="axonyx-ui" />
</Field>
<Field label="API key" error="Invalid key format.">
<Input invalid placeholder="******" />
</Field>
<Field label="Environment">
<Select>
<Option>Development</Option>
<Option>Staging</Option>
<Option>Production</Option>
</Select>
</Field>
<Field label="Description">
<Textarea placeholder="Describe your module..." />
</Field>
</Stack>
);
}import { Breadcrumbs, Button, ButtonGroup } from "@axonyx/react";
import { BookIcon, CodeIcon } from "@axonyx/react/icons";
export function Toolbar() {
return (
<>
<Breadcrumbs
items={[
{ label: "Docs", href: "/docs/getting-started" },
{ label: "Components" },
]}
/>
<ButtonGroup aria-label="View mode">
<Button variant="primary">
<BookIcon /> Guide
</Button>
<Button>
<CodeIcon /> API
</Button>
</ButtonGroup>
</>
);
}Tabs are React-native and state-based. Import them from the client entry:
"use client";
import { Tabs, TabList, TabPanel, TabTrigger } from "@axonyx/react/client";
export function ExampleTabs() {
return (
<Tabs defaultValue="preview">
<TabList>
<TabTrigger value="preview">Preview</TabTrigger>
<TabTrigger value="code">Code</TabTrigger>
</TabList>
<TabPanel value="preview">Preview content</TabPanel>
<TabPanel value="code">Code content</TabPanel>
</Tabs>
);
}Dialog is controlled by React state. Import it from the client entry:
"use client";
import { useState } from "react";
import { Button } from "@axonyx/react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@axonyx/react/client";
export function ConfirmDialog() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open dialog</Button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogHeader>
<DialogTitle>Confirm deploy</DialogTitle>
</DialogHeader>
<DialogContent>
Are you sure you want to deploy?
</DialogContent>
</Dialog>
</>
);
}@axonyx/react expects @axonyx/ui to provide styles. The React package intentionally stays thin:
<Button variant="primary" surface="forged" />renders the shared contract:
<button class="ax-button" data-variant="primary" data-surface="forged"></button>This keeps Axonyx usable across React, static HTML, and native .ax components.
- npm: https://www.npmjs.com/package/@axonyx/react
- Core UI package: https://www.npmjs.com/package/@axonyx/ui
- GitHub: https://github.com/vladanPro/axonyx-react