ATOM UIKit

Sistema de componentes para el equipo de Atom. Instalas los paquetes, conectas tu AI, y construyes.

Arquitectura

Tres capas independientes. Cada una referencia la anterior. Nunca hardcodeas un valor.

Componentes React@atom-uikit/components-react

CSS puro (BEM)@atom-uikit/css

Tokens (3 capas)@atom-uikit/tokens

Animations@atom-uikit/animations

Astro@atom-uikit/components-astro

MCP Server7 tools para AI

Componentes para otras tecnologías, disponibles próximamente.

componentes

capas de tokens

paquetes npm

MCP tools

Conecta tu AI

El UIKit es consumible por AI via MCP. Inicia sesión con tu cuenta @atomchat.io para ver la configuración.

Qué es el UIKit

No es un framework ni una dependencia monolitica. Son paquetes npm independientes que instalas segun lo que necesites.

Sin UIKit

.btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: #18181b;
  color: #fafafa;
  font-size: 13px;
  /* ...30 líneas más */
}

Con UIKit

import { Button } from '@atom-uikit/components-react';

<Button variant="primary">
  Guardar
</Button>

Tipado, accesible, con animaciones, dark mode, y 6 variantes.

Tokens en 3 capasCSS puro, cero runtimeReact 19 + AstroComposableAI-ready via MCP

Quick start

1Instala

pnpm add @atom-uikit/tokens @atom-uikit/css @atom-uikit/components-react

2Importa

@import "@atom-uikit/tokens/css/primitives";
@import "@atom-uikit/tokens/css/semantic";
@import "@atom-uikit/css/atom.css";

3Usa

import { Button } from '@atom-uikit/components-react';

<Button variant="primary">
  Guardar
</Button>

@atom-uikit/tokens0.1.1@atom-uikit/css1.2.0@atom-uikit/components-react3.0.0@atom-uikit/animations0.1.1@atom-uikit/components-astro3.0.0

Pídele a tu AI

Con el MCP conectado, tu AI consulta la documentacion automaticamente. No memoriza clases ni props — las busca por ti.

Prompt

"Hazme un login form con Input, Button y Field del ATOM UIKit. Email con icono y contrasena con validacion."

El AI llama atom_uikit_component → atom_uikit_install → atom_uikit_get → genera el codigo correcto

Explora