ATOM

ATOM Design Language

Un sistema de tokens, componentes CSS puros y componentes React/Astro publicados en npm bajo el scope @atom-uikit/. Diseñado para landing pages, web apps y sitios de marketing.

Este no es un framework ni una dependencia monolitica. Es codigo abierto que instalas, modificas y extiendes. Los tokens definen los valores. El CSS los consume. Los componentes los renderizan.

Principios

Tokens en 3 capas

Primitivos, semanticos y de componente. Cada capa referencia la anterior. Nunca hardcodeas un valor.

CSS puro, cero runtime

Los componentes renderizan clases CSS. Los estilos viven en @atom-uikit/css. Sin CSS-in-JS, sin Tailwind en el source.

Multi-framework

React 19 y Astro como first-class. Los tokens y el CSS funcionan en cualquier stack.

Composable

Cada componente sigue el patron de sub-componentes. Predecible para tu equipo y para LLMs.

Paquetes

@atom-uikit/tokens0.1.1

W3C DTCG design tokens (3 capas)

@atom-uikit/css1.0.1

Componentes CSS puros + utilidades

@atom-uikit/components-react1.0.1

Componentes React 19

@atom-uikit/animations0.1.1

Modulos de animacion GSAP

@atom-uikit/components-astro1.0.1

Componentes Astro

2 documentos2 categorias

Instalacion

Elige lo que necesitas. Los tokens son la base, el CSS consume los tokens, y los componentes renderizan las clases.

Solo tokens

Variables CSS para colores, spacing, radius y tipografia.

pnpm add @atom-uikit/tokens
Tokens + CSS

Componentes estilizados sin dependencia de framework.

pnpm add @atom-uikit/tokens @atom-uikit/css
Stack completo

React 19 con tokens, CSS y animaciones GSAP.

pnpm add @atom-uikit/tokens @atom-uikit/css @atom-uikit/components-react @atom-uikit/animations
Despues de instalar, importa los tokens y el CSS en tu archivo global:
@import "@atom-uikit/tokens/css/primitives";
@import "@atom-uikit/tokens/css/semantic";
@import "@atom-uikit/css/atom.css";

Contenido disponible