@axonyx/react

v0.0.33

Published

2 days ago

React wrappers for Axonyx UI Foundry components.

0High
0Medium
0Low

vladan-pro

axonyx react nextjs design-system foundry ui

@axonyx/react

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 contract

Install

npm install @axonyx/ui @axonyx/react

Next.js setup

Import 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">

Basic usage

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>
  );
}

Components

Current server-safe React wrappers:

Container
Grid
Section
Button
LinkButton
IconButton
Card
Badge
Alert
Stack
Cluster
Navbar, NavbarBrand, NavbarLinks, NavLink
Footer, FooterLinks
Field
Input
Textarea
Select
Option
Checkbox
Radio, RadioGroup
Switch
Breadcrumbs
ButtonGroup
CodeBlock
PropsTable
Tooltip

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, TabPanel from @axonyx/react/client
Dialog, DialogHeader, DialogTitle, DialogContent from @axonyx/react/client
Accordion, AccordionItem from @axonyx/react/client
DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem from @axonyx/react/client
ThemeSwitcher from @axonyx/react/client

Buttons

<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>

Cards

<Card>Default panel</Card>
<Card surface="brushed">Brushed panel</Card>
<Card surface="forged" border="forged">Forged panel</Card>
<Card surface="inset">Inset panel</Card>

Forms

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>
  );
}

Navigation helpers

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

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

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>
    </>
  );
}

Relationship to @axonyx/ui

@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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@axonyx/react

Install

Next.js setup

Basic usage

Components

Buttons

Cards

Forms

Navigation helpers

Tabs

Dialog

Relationship to @axonyx/ui

Links