v0.7.0 · WCAG 2.2 AA · Astro 6

El sistema de componentes
que hace que tus MYPEs se vean serias.

13 componentes Astro tokenizados. Dark mode nativo. Focus rings consistentes. Target size 24×24. Cero JavaScript a menos que lo pidas explícitamente.

Instalar en 30 segundos Ver componentes
0 KB de runtime JS por defecto · 100 / 100 Lighthouse a11y · 13 componentes
El problema

Cada sitio MYPE termina viéndose amateur.

Botones con tamaños inconsistentes. Focus invisibles. Dark mode hackeado a último minuto. Espaciados ad-hoc. Tres clientes, tres design systems improvisados.

Sin DIL UI

Cada proyecto reinventa

  • Padding de botones inventado en cada componente
  • Focus rings invisibles o ausentes
  • Dark mode con if (theme === 'dark') esparcido
  • Colores hex hardcodeados
  • Sin garantía WCAG 2.2
Con DIL UI

Un sistema, todos los sitios

  • Tokens W3C que generan CSS, Tailwind y tipos TS
  • Focus visible con contraste 3:1 garantizado
  • Dark mode con un solo <ThemeToggle />
  • Lint que rechaza valores hardcodeados
  • Tests Playwright + axe-core listos
30 segundos

Instala. Importa. Listo.

Configura el registro privado, instala dos paquetes, importa los tokens. Eso es todo.

1

Autentica el registro

DIL UI vive en GitHub Packages. Configura tu .npmrc con tu token.

echo "@diegoiprg:registry=https://npm.pkg.github.com" >> .npmrc
echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
2

Instala los paquetes

Tokens + componentes. Astro como peer dependency.

npm install @diegoiprg/dil-tokens @diegoiprg/dil-ui
3

Importa los tokens en tu layout

Una sola línea en tu Layout.astro. Listo para usar componentes.

---
import "@diegoiprg/dil-tokens/tokens.css";
import Button from "@diegoiprg/dil-ui/components/Button.astro";
import ThemeToggle from "@diegoiprg/dil-ui/components/ThemeToggle.astro";
---
<html>
  <body>
    <ThemeToggle />
    <Button variant="primary">Hola mundo</Button>
  </body>
</html>
13 componentes

Todo lo que un sitio MYPE necesita.

Cada componente con código copy-paste vivo, ejemplos de uso y notas de accesibilidad.

Button

CTA con 3 variantes, 3 tamaños y WCAG 2.2 garantizado.

Input

Campos con focus ring 3:1 y aria-invalid.

Card

Default, elevated y glass con backdrop-filter.

Badge

Etiquetas info / éxito / atención / error.

Hero

Header con eyebrow, slots actions y visual.

BentoGrid

Grid 2/3/4 columnas con span por celda.

Footer

Cierre con navegación y derechos.

Stack

Flex direccional con gap tokenizado.

ThemeToggle

Light/dark con persistencia local sin flash.

NavBar

Sticky con backdrop-blur y menú móvil.

Tabs

ARIA tabs con teclado y panel toggling.

Accordion

<details> nativo con FAQPage schema opcional.

Code

Snippet con copia al portapapeles.
Tokens 2.0

Dark mode que no parece dark mode hackeado.

Usa el toggle de arriba a la derecha. Toda la página responde. Cero flash, cero librería, cero if-else en tu código.

1. Overlay tokenizado

Override de --color-surface-*, --color-text-*, --color-border-* via [data-theme="dark"].

2. Sistema operativo

Fallback automático a prefers-color-scheme. Si el usuario no eligió, respeta su SO.

3. Sin flash

El toggle hidrata inline antes del primer paint. Nunca verás un flash blanco en sitios oscuros.

En producción hoy

No es una librería de juguete.

DIL UI corre en sitios reales con tráfico real.

dilware.net

Dilware

Sitio corporativo en Cloudflare Workers Static Assets. Dark glassmorphism custom sobre tokens DIL.

→

ui.dilware.net

Este showcase

Construido íntegramente con DIL UI v0.7.0. Cero hidratación. Lighthouse a11y 100/100.

→
Cómo está construido

Decisiones técnicas que importan.

◇

Tokens primero

W3C Design Tokens generan CSS variables, preset de Tailwind y tipos TypeScript. Cero magic numbers.

◇

Dark mode nativo

Overlay [data-theme="dark"] + prefers-color-scheme. Sin librerías.

◇

Accesible por defecto

WCAG 2.2 AA garantizado: target size, focus 3:1, soporte de teclado.

◇

Cero hidratación

Astro server-render. Componentes interactivos usan is:inline, no frameworks.

◇

Tests incluidos

Playwright + axe-core + helpers de Core Web Vitals (TBT, LCP, CLS) listos para tu CI.

◇

Lint que protege

@diegoiprg/dil-eslint-config rechaza colores hex, spacing inventado, font-size hardcodeado.

Preguntas frecuentes

Lo que probablemente quieres saber.

¿Para quién es DIL UI?
Para desarrolladores que arman sitios para MYPEs en Astro y quieren parar de reinventar botones, formularios y modales. Si vendes presencia digital y quieres que cada sitio se vea profesional sin tomar decisiones de diseño en cada componente, esto es para ti.
¿Funciona con mi stack?
Hoy DIL UI requiere Astro 5+ o 6+. Los tokens (@diegoiprg/dil-tokens) son CSS variables planas y funcionan en cualquier framework: Next.js, Remix, SvelteKit, HTML puro.
¿Cómo activo dark mode?
Agrega <ThemeToggle /> en tu layout. Lee localStorage, fallback a prefers-color-scheme, escribe data-theme en <html>. Cero librerías, cero flash, cero JS framework.
¿Reemplaza a Tailwind?
No. DIL UI vive sobre tus tokens. Puedes usar Tailwind en paralelo: @diegoiprg/dil-tokens/tailwind exporta un preset con todos los tokens listos para theme.extend.
¿Cumple WCAG?
Sí, WCAG 2.2 AA por defecto. Target size mínimo 24×24 (SC 2.5.8), focus visible con contraste 3:1 (SC 1.4.11), foco no oculto (SC 2.4.11), soporte completo de teclado, semántica ARIA correcta en componentes interactivos.
¿Quién lo usa en producción?
dilware.net en prod con Cloudflare Workers Static Assets. Este mismo showcase (ui.dilware.net) también está construido con DIL UI.

Empieza a construir sitios que no avergüencen.

30 segundos de setup. 13 componentes accesibles. Dark mode incluido.

Instalar ahora Ver código fuente