11°

// Design System · 45 componentes

Components that overflow

A complete library in .astro on top of the tokens: actions, forms, data, navigation, overlays and marketing sections. No framework JS, dynamic theme, accessible.

ExplorarVer tokens

01

Acciones

Botones, chips y atajos.

activofiltroredes⌘KAppears on hover and focus

02

Iconography

Lucide (~1500 icons) + Simple Icons for brands. SVG inlined at 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

Forms

Accessible inputs with valid / invalid / disabled states.

How it appears publicly

04

Data

Metrics, tables, avatars and progress.

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

Navigation

Tabs, steps, breadcrumbs and pagination.

Vista general del componente.

Props, slots y accesibilidad.

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

07

Overlays

Native accordion and dialog.

What is the OSI model?
A 7-layer framework for reasoning about networks.
And encapsulation?
Each layer adds its header as the data goes down.
OSI vs TCP/IP?
OSI teaches; TCP/IP is what is implemented.

Native dialog

Uses a native <dialog> with a blurred backdrop. Closes with Esc, the ×, or a click outside.

Fast

Pure static, 0 KB of JS, minimal LCP.

Sound

Zod breaks the build if metadata is missing.

GEO-ready

Derived JSON-LD, robots permissive with AI.

Hobby

$0/mo

  • 1 site
  • Open tokens
  • Community
Start
Popular

Pro

$12/mo

  • Unlimited sites
  • Premium components
  • Support
Choose Pro

Studio

$39/mo

  • Everything in Pro
  • Multi-brand
  • Onboarding
Talk

Featured

Card with a glow border

Animated gradient on the border, flat content inside. A measured flourish.
We moved to this system and everything became consistent between the site and the videos.
Happy clientCTO, Acme
  1. 2019

    Primeros sistemas

    Backends y redes.

  2. 2024

    Video generativo

    Reels de bajo nivel.

  3. 2026

    Design system

    Tokens + 45 componentes.

Shall we build yours?

The same system, your brand. Dark, light and accessible by default.

StartSee the blog