Now building in public

Build interfaces
with attributes.

Every spacing, color, and layout decision lives as an attribute on the element it styles — so a component still reads like the thing it renders, not a class-name index.

Start building Explore the API
App.tsx 
<section bg="surface" p="8" rounded="2xl" display="grid" grid-cols="1"  md-grid-cols="2"  gap="8">
  <div>
    <h1 font-size="5xl"  font-weight="bold">
      Build faster.
    </h1>
    <p text="muted">
      Ship without the class soup.
    </p>
  </div>
  <button bg="primary" text="white"  px="6" py="3" rounded="lg">
    Get started
  </button>
</section>

WHY ATOMATTR

Your markup should make sense.

Every styling decision sits on the element it affects. No fifteen-class utility strings, and no separate stylesheet to cross-reference just to know what a <div> looks like.

Attribute-first

Describe your interface directly in markup. Spacing, colors, layout and typography stay close to the element.

Responsive by default

Keep responsive behavior readable with attributes like md-grid-cols="2" and lg-grid-cols="4".

Built beyond the browser

Bring the same styling concepts into React Native while respecting what each platform can actually do.

THE API

Less syntax. More signal.

There's one place a style decision lives: the attribute itself. Not a class, not a modifier, not a wrapper component — just bg=, p=, rounded=, spelled the way you'd say them.

Familiar primitives

Use simple attributes for spacing, layout, typography, borders and color.

Responsive attributes

Put breakpoint behavior exactly where it belongs.

Semantic tokens

Build interfaces around meaning instead of raw values.

component.html 
<div 
  display="grid"
  grid-cols="1"
  md-grid-cols="2"
  lg-grid-cols="4"
  gap="4"
  row-gap="2"
  col-gap="3">
  <article 
  bg="surface"
  p="6"
  rounded="xl"
  border="border">
    ...
  </article>
</div>

CROSS-PLATFORM

One language. Platform-aware output.

HTML and React Native have different rendering models. Atomattr gives you a consistent styling API without pretending those platforms are identical.

HTML 

<div
  display="grid"
  grid-cols="3"
  gap="4"
>
  ...
</div>

React Native 

<View
  display="grid"
  grid-cols="3"
  gap="4"
/>

COLOR SYSTEM

Design systems that feel customizable.

The primary color below isn't a screenshot — it's read straight out of --aa-color-primary at render time, in whichever mode your system is currently in.

Primary

Success

Warning

Danger

Palette shades

10 30 50 70 90

Live gradient

Gradient

Semantic tokens

Tokens stay stable, palettes can change.

Primary
Surface
Success
Border

Text variation example

This preview demonstrates how text can adapt between light and dark modes using semantic color tokens.

Custom theme

A user can change these values in their theme configuration without changing the underlying semantic token names.

SOCIAL

Build with people nearby.

Follow progress, ask questions, share experiments, and help shape the attribute API as it grows.

Community chat Get help, trade ideas, and talk through real interface patterns. Source and issues Read the code, open issues, and propose changes in public. Follow on X Send focused questions when a thread needs more detail.

START SMALL

Try one component, then decide.

Open the docs, copy a pattern, and see how the markup feels before changing anything big in your project.

Read the docs

Browse examples

Compare common layouts as readable attributes.

Tune tokens

Use semantic colors without chasing class names.