Axonyx UI

Layout primitive

Grid

Grid composes cards, forms, metrics, and content using fixed columns or intrinsic minimum-width tracks that collapse safely on smaller screens.

Next: Stack

Intrinsic responsive grid

Tracks wrap when they cannot maintain their minimum width. Resize the viewport to see the cards reflow.

01

Route graph

02

State bridge

03

Production runtime

View code
Code
asx
<Grid min="md" gap="lg">
  <Card surface="inset"><Badge tone="success">01</Badge><Copy>Route graph</Copy></Card>
  <Card surface="inset"><Badge tone="info">02</Badge><Copy>State bridge</Copy></Card>
  <Card surface="inset"><Badge tone="warning">03</Badge><Copy>Production runtime</Copy></Card>
</Grid>

Fixed columns

Set explicit tablet and mobile columns when the content needs a controlled breakpoint instead of intrinsic tracks.

Build

Check

Deploy

View code
Code
asx
<Grid cols="3" colsTablet="2" colsMobile="1" gap="sm" align="center">
  <Card surface="brushed"><Copy>Build</Copy></Card>
  <Card surface="brushed"><Copy>Check</Copy></Card>
  <Card surface="brushed"><Copy>Deploy</Copy></Card>
</Grid>

Installation

Command
bash
cargo ax add ui
Manual setup
Cargo.toml
toml
[dependencies]
axonyx-ui = "0.0.80"
app/layout.asx
asx
use "@axonyx/ui"

Grid contract

Import Grid from @axonyx/ui/foundry/Grid.asx. Use min for intrinsic tracks, or cols with optional colsTablet and colsMobile for fixed columns. The min setting takes precedence over fixed columns.

Import
asx
import { Grid } from "@axonyx/ui/foundry/Grid.asx"

cols

String, default 1. Fixed columns on wide screens, from 1 to 6.

colsTablet

String, optional. Columns below the tablet breakpoint; otherwise one column.

colsMobile

String, optional. Columns below the mobile breakpoint; otherwise one column.

min

String, optional. Intrinsic track minimum: sm, md, or lg. Overrides cols.

gap

String, default md. Spacing between tracks: xs, sm, md, lg, xl, or 2xl.

align

String, optional. Cross-axis item alignment: start, center, or end.