React demo

React is now a thin layer over the HTML contract.

The React package no longer tries to be a different styling engine. It simply normalizes JSX-friendly props back into the same AtomAttr attributes the HTML engine already understands.

Read React docs Open playground

Canonical mapping

React prop

fontSize="4xl"

JSX-safe alias

HTML output

font-size="4xl"

Canonical AtomAttr key

Component code

import { Box, H1, Txt, Btn, Row, Badge } from 'atomattr/react';

export function HeroCard() {
  return (
    <Box bg="slate-950" text="white" p="8" rounded="3xl" shadow="2xl">
      <Badge bg="brand-light" text="slate-950">React</Badge>
      <H1 mt="4" fontSize="4xl" weight="black">
        Same contract, better ergonomics
      </H1>
      <Txt mt="3" text="slate-300">
        Camel aliases normalize back into canonical AtomAttr keys.
      </Txt>
      <Row mt="6" gap="3" wrap>
        <Btn px="4" py="2" rounded="full" bg="brand-light" text="slate-950">
          Launch
        </Btn>
      </Row>
    </Box>
  );
}

Rendered intent

React

Same contract, better ergonomics

Camel aliases normalize back into canonical AtomAttr keys.

HTML-first under the hood

Use direct props

For keys JSX handles cleanly: bg, p, rounded, text.

Use aliases when needed

For dashed canonical keys: fontSize, minH, borderColor, gridCols.

Use `attrs` for exact parity

When you want React snippets to visually match HTML examples exactly.