Design System · 45 componentes

Componentes que desbordan

Librería completa en .astro sobre los tokens: acciones, formularios, datos, navegación, overlays y secciones de marketing. Cero JS de framework, tema dinámico, accesibles.

ExplorarVer tokens

01

Acciones

Botones, chips y atajos.

activofiltroredes⌘KAparece con hover y foco

02

Iconografía

Lucide (~1500 íconos) + Simple Icons para marcas. SVG inline en build, currentColor, zero-JS.

home
search
settings
user
bell
mail
calendar
clock
heart
star
bookmark
download
upload
trash-2
pencil
copy
share-2
link
external-link
filter
chevron-right
arrow-right
plus
minus
check
x
menu
more-horizontal
eye
eye-off
lock
shield-check
zap
flame
rocket
globe
wifi
server
database
terminal
code
git-branch
folder
file-text
image
play
pause
volume-2
sun
moon

Marcas

github
youtube
x
instagram
linkedin
discord
figma
astro
tailwindcss
rust
astro
<Icon name="lucide:zap" size={24} color="var(--teal)" />

03

Formularios

Inputs accesibles con estados válido / inválido / disabled.

Como aparece públicamente

04

Datos

Métricas, tablas, avatares y progreso.

Latencia p7542ms12%
Reels1288
Uptime99.9%
Errores32
CapaPDUProtocolo
TransporteSegmentoTCP
RedPaqueteIP
EnlaceTramaEthernet
Stack
Astro · TS estricto
Deploy
Caddy · VPS
JS runtime
0 KB
Cobertura72%

05

Feedback

Avisos y estados.

06

Navegación

Tabs, pasos, migas y paginación.

Vista general del componente.

Props, slots y accesibilidad.

astro
<Tabs tabs={tabs} />
  1. DiseñoTokens
  2. 2
    BuildAstro
  3. 3
    DeployCaddy
Opciones

07

Overlays

Acordeón y diálogo nativos.

¿Qué es el modelo OSI?
Un marco de 7 capas para razonar sobre redes.
¿Y la encapsulación?
Cada capa agrega su cabecera al bajar el dato.
¿OSI vs TCP/IP?
OSI enseña; TCP/IP es lo implementado.

Diálogo nativo

Usa <dialog> nativo con backdrop difuminado. Cierra con Esc, la ×, o click afuera.

Rápido

Estático puro, 0 KB de JS, LCP mínimo.

Íntegro

Zod rompe el build si falta metadata.

GEO-ready

JSON-LD derivado, robots permisivo con IA.

Hobby

$0/mes

  • 1 sitio
  • Tokens open
  • Comunidad
Empezar
Popular

Pro

$12/mes

  • Sitios ilimitados
  • Componentes premium
  • Soporte
Elegir Pro

Studio

$39/mes

  • Todo de Pro
  • Multi-marca
  • Onboarding
Hablar

Destacado

Card con borde glow

Gradiente animado en el borde, contenido plano adentro. Flourish medido.
Migramos a este sistema y todo quedó consistente entre la web y los videos.
Cliente felizCTO, Acme
  1. 2019

    Primeros sistemas

    Backends y redes.

  2. 2024

    Video generativo

    Reels de bajo nivel.

  3. 2026

    Design system

    Tokens + 45 componentes.

¿Construimos la tuya?

El mismo sistema, tu marca. Dark, light y accesible por defecto.

EmpezarVer el blog