Componentes editoriales
para Tailwind CSS v4.
37 componentes para Tailwind CSS v4 con tipografía monoespaciada, bordes finos en lugar de sombras y un sistema de color que cambias con una sola variable.
Pulsa ⌘K para buscar cualquier componente o clase.
En 30 segundos
Importa Cobalto después de Tailwind y usa las clases cb-* en tu HTML.
@import "tailwindcss";
@import "cobalto/tailwind";<a class="cb-btn cb-btn--primary" href="#">Empezar ↗</a>Principios
- 01
Tokens primero
Ningún componente usa colores fijos. Todo pasa por variables
--cb-*. - 02
Tus utilidades ganan
Los componentes viven en
@layer components, así quemt-0obg-cb-bg-2siempre los sobrescriben. - 03
JS opcional
Atributos
data-cb-*, sin dependencias, compatible con Livewire y Alpine.
Componentes
Estructura
Barra de anuncio
Franja superior para estados, avisos cortos o información de contacto. Va antes de la navbar.
Navbar
Barra fija con logo, menú con submenús (hover y clic), búsqueda, cambio de tema y llamada a la acción.
Menú móvil
Menú a pantalla completa que entra desde la derecha debajo de la navbar. Se cierra al elegir un enlace, con Esc o al pasar a escritorio.
Hero
Portada con etiqueta numerada, titular grande, texto, acciones, nota y chips. La cuadrícula de fondo es opcional.
Encabezado de sección
Etiqueta numerada, título h2 y párrafo. Es la pieza que da el ritmo editorial a cada sección.
Footer
Pie con columnas de enlaces, texto gigante decorativo y una fila inferior.
Sidebar de documentación
Navegación lateral con grupos, enlace activo, selector de versión y tabla de contenidos que sigue el scroll.
Layout de dashboard
Sidebar fija, topbar y área de contenido. En móvil la sidebar se vuelve un panel lateral.
Contenido
Card
Tarjeta plana con visual, etiqueta de estado, texto, meta y una flecha que aparece en hover.
Grid de cards
Grilla con bordes compartidos: el contenedor dibuja arriba e izquierda y cada celda derecha y abajo.
Lista de principios
Lista numerada en tres columnas con línea superior. Sirve para valores, características o pasos.
Stats
Cifras grandes con etiqueta, en una caja con divisiones de 1px.
CTA
Bloque centrado de llamada a la acción para cerrar una página.
Pricing
Tarjetas de precio con plan destacado, lista de características y cambio entre pago mensual y anual.
Testimonios
Citas con autor, cargo y avatar. Se combinan con cb-grid para mostrar varias.
Timeline y changelog
Línea de tiempo con fecha a la izquierda. En móvil la fecha queda arriba de cada entrada.
Empty state
Estado vacío con icono, texto y acciones para cuando una lista o búsqueda no tiene resultados.
Bloque de código
Código con cabecera, botón de copiar y colores de sintaxis que siguen el tema.
Acciones y etiquetas
Botones
Cuatro variantes principales, tres tamaños, iconos y estados de deshabilitado y carga.
Chips y tags
Chips con muestra de color para filtros o tecnologías, tags de estado y la tecla kbd.
Badge y avatar
Contadores, puntos de estado y avatares con iniciales o imagen, solos o en grupo.
Dropdown
Menú desplegable genérico con navegación por teclado, atajos, separadores y acciones destructivas.
Breadcrumb
Ruta de navegación con separadores.
Paginación
Botones de página con anterior, siguiente y elipsis.
Formularios y datos
Formularios
Input, textarea, select, checkbox, radio, switch y archivo, con texto de ayuda y estados de error y éxito.
Tabla de datos
Tabla con orden por columna, búsqueda, filtro, paginación y selección de filas. Sin JS se ve como una tabla normal.
Overlays
Modal
Diálogo centrado con foco atrapado, cierre con Esc, clic en el fondo y botones data-cb-close.
Drawer
Panel lateral (derecha, izquierda o abajo) con el mismo comportamiento que el modal.
Command palette
Búsqueda ⌘K con grupos, navegación con flechas y búsqueda que ignora tildes. Es la misma que usa esta documentación.
Tooltip y popover
Tooltip de texto con hover y foco, y popover con contenido interactivo que se abre con clic.
Interacción y estado
Tabs
Pestañas con navegación por flechas, Home y End. Dos estilos: línea y pastillas.
Accordion / FAQ
Basado en details y summary: funciona sin JS. El JS agrega el modo de un solo elemento abierto y eventos.
Toast
Notificaciones temporales con la API cobalto.toast(). Se pausan con hover o foco.
Alert y banner
Mensajes en línea con cuatro tonos y banners de ancho completo. Se pueden cerrar y recordar.
Progress bar
Barra de progreso determinada o indeterminada, con etiqueta y valor.
Skeleton y spinner
Placeholders de carga y un spinner que toma el color del texto o del acento.
Stepper
Pasos de un proceso, horizontal o vertical. En móvil el horizontal se apila.