BRASA
Empezar
v3.0 · MIT · 48 componentes

Componentes UI
que copias, pegas
y envías.

BRASA es una biblioteca de componentes open-source: accesibles por defecto, sin una sola dependencia y listos para producción. Tuyos para siempre — sin caja negra, sin npm install que recompile medio mundo.

$ npx brasa add button card switch ⧉
★ 14.2k en GitHub
Ver los componentes→ Leer la documentación
●WAI-ARIA por defecto ●0 dependencias ●React · Vue · HTML
brasa · preview en vivo

<Button />

Continuar Cancelar ＋

<Badge />

Estable beta ✓ a11y

<Switch /> · <Card />

Modo oscuro
Sincroniza con el sistema
Animaciones
Respeta reduce-motion
~2.1kb gzip · sin runtime teclado ✓ · lector de pantalla ✓

Equipos que construyen sobre BRASA

ForgehouseMistral UICobaltHelikaNorthwindVelaAtlas OS
La galería

48 componentes,
dibujados a mano en CSS

Cada pieza es HTML semántico + CSS por tokens. Nada de divs anidados hasta el infinito. Mira, copia, adáptalo a tu marca.

Botones

6 variantes
Primario Ghost

Card

contenedor
Pago recibido
€2.480,00 · hace 3 min

Switch

role=switch

Badge

estados
Nuevo v3.0 ✓ activo

Avatar

grupo
+9

Progress

aria-valuenow
Por qué BRASA

Tres principios,
cero excusas

Accesible por defecto

Roles ARIA, foco visible, navegación por teclado y soporte de lector de pantalla en cada componente. Auditado con axe — no es un extra, es la base.

Theming por tokens

Todo se controla con variables CSS: color, radio, espaciado y tipografía. Cambia --accent y toda la biblioteca te sigue. Modo claro y oscuro incluidos.

Cero dependencias

Ni una. El código vive en tu repo, no en tu node_modules. Sin actualizaciones que rompan, sin cadenas de paquetes, sin sorpresas en la auditoría de seguridad.

0
dependencias en runtime
48
componentes accesibles
100
Lighthouse a11y
MIT
licencia · gratis para siempre
El código

Tan legible que
lo entiendes a la primera

Sin abstracciones mágicas. Un componente es HTML con clases por token y un puñado de líneas de lógica. Lo copias, lo lees, lo cambias.

React Vue HTML copy & paste
Explorar la documentación
● Switch.tsx TypeScript 
// accesible, sin dependencias, listo para tu repo
export function Switch({ checked, onChange, label }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      aria-label={label}
      onClick={() => onChange(!checked)}
      className="brasa-switch"
      data-on={checked}
    />
  )
}
// → teclado ✓ · lector de pantalla ✓ · 0 deps▋
Lo que dicen

“Borramos seis dependencias de UI y nuestra build bajó 40%. BRASA es el primer kit donde leer el código fue más rápido que leer la documentación.”

Marco Ferraro
Tech Lead · Cobalt
Adoptado por

Equipos de producto en Forgehouse, Helika, Northwind y cientos de proyectos open-source confían en BRASA para sus interfaces. Más de 9.000 repos en GitHub ya lo usan.

12k descargas / semana 320 contribuidores
Open-source, contigo

Únete a la comunidad BRASA

Dale una estrella, abre un PR o pásate por Discord. La biblioteca crece con cada componente que la comunidad comparte.

$npx brasa init ⧉
★Dar estrella en GitHub Unirse al Discord
14.2k estrellas·licencia MIT·gratis para siempre