Getting started with AtomAttr

The model

AtomAttr maps registered HTML attributes to generated CSS. Put a property name on the element and its value in the attribute value. The browser engine scans the document, inserts rules for attributes it recognizes, and watches for DOM changes.

<article bg="surface" p="6" rounded="xl" border="border">
  <h2 font-size="xl" font-weight="bold" mb="2">Profile card</h2>
  <p text="muted">The markup carries the styling choices.</p>
</article>

To use it in an app, follow the installation guide. The syntax guide explains how attributes and modifier prefixes are parsed; values explains tokens and CSS values.

Find an attribute or feature

The cheatsheet lists every registered styling name and its CSS mapping. Use search to find a property by name, CSS output, value, or modifier. Topic references group related attributes, such as layout, spacing, color, and typography.

Choose the right guide

- Use responsive attributes for viewport breakpoints and container queries for ancestor size thresholds. - Use states, dark mode, and pseudo-elements for supported selector modifiers. - Use the HTML guide for browser markup, the React guide for JSX props, and the React Native guide for native primitives. - Use performance for runtime behavior and current limits.

Copy and adapt a component

AtomAttr UI provides examples that can be previewed and copied as HTML. Start with a pattern in the UI library, then check its attributes against the reference pages and adapt its semantics, content, and responsive behavior to your app.