Instalación

Con Tailwind (recomendado)

Así puedes usar las utilidades bg-cb-bg, text-cb-muted o dark: en tu propio HTML y solo se genera el CSS que usas.

npm install cobalto tailwindcss @tailwindcss/vite

Importa Cobalto justo después de Tailwind:

@import "tailwindcss";
@import "cobalto/tailwind";

Y el JavaScript, si usas componentes interactivos:

import cobalto from 'cobalto';

cobalto.autoInit();

autoInit() restaura el tema guardado, inicializa la página y vigila el DOM para inicializar lo que se agregue después. Si prefieres control manual, llama a cobalto.init(elemento). También puedes importar componentes sueltos:

import { init as initTabs } from 'cobalto/components/tabs';

initTabs(document);

Sin build, desde CDN

El CSS precompilado incluye el reset de Tailwind, los tokens y todos los componentes. El script UMD se inicializa solo; agrega data-cb-manual para evitarlo.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cobalto@0.1.0/dist/cobalto.min.css">
<script src="https://cdn.jsdelivr.net/npm/cobalto@0.1.0/dist/cobalto.umd.min.js" defer></script>

Con CDN no tienes utilidades de Tailwind arbitrarias, solo las clases cb-*, cb-wrap y las utilidades que usan los propios componentes.

Laravel + Vite

Laravel 12 y 13 ya traen Tailwind v4 con Vite. No hace falta configurar nada más.

npm install cobalto

Agrega Cobalto justo después de Tailwind, en el CSS que trae el proyecto:

@import 'tailwindcss';
@import 'cobalto/tailwind';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

import cobalto from 'cobalto';

window.cobalto = cobalto;
cobalto.autoInit();

En el layout, agrega este script en el head para aplicar el tema guardado antes del primer pintado y evitar el parpadeo. Es el mismo para cualquier stack:

<script>
  try {
    var t = localStorage.getItem('cb-theme');
    var a = localStorage.getItem('cb-accent');
    if (t) document.documentElement.setAttribute('data-cb-theme', t);
    if (a) document.documentElement.setAttribute('data-cb-accent', a);
  } catch (e) {}
</script>
@vite(['resources/css/app.css', 'resources/js/app.js'])

Livewire y Alpine

• autoInit() escucha livewire:navigated y vuelve a inicializar después de cada wire:navigate (Livewire 3 y 4).
• Un MutationObserver inicializa los componentes que Livewire o Alpine agregan al DOM. Lo ya inicializado no se duplica.
• Cobalto solo usa atributos data-cb-* y clases cb-*, así que no choca con x-* ni wire:*.
• Si Livewire re-renderiza un componente abierto (modal, dropdown), envuélvelo en wire:ignore.self para conservar su estado.

Para lanzar un toast o abrir un modal desde PHP, despacha un evento desde el componente:

$this->dispatch('toast', title: 'Guardado', variant: 'success');

Y escúchalo en tu JavaScript con Livewire.on() dentro de livewire:init:

document.addEventListener('livewire:init', () => {
  Livewire.on('toast', (event) => cobalto.toast(event));
  Livewire.on('abrir-modal', (event) => cobalto.modal.open(event.id));
});

O con Alpine, sin escribir JS aparte:

<div x-data x-on:toast.window="cobalto.toast($event.detail)"></div>

Textos e idioma

Los textos que ven tus usuarios (estado vacío de la búsqueda, botón de cerrar de los toasts, estado y paginación de la tabla, botón de copiar) vienen en español. Cámbialos para todo el sitio con setMessages() o al inicializar:

import cobalto from 'cobalto';

cobalto.autoInit({
  messages: {
    commandEmpty: 'No results for',
    tableStatus: 'Showing {start}–{end} of {total}',
    copyDone: 'Copied',
  },
});

// o en cualquier momento
cobalto.setMessages({ toastClose: 'Close notification' });

O solo para un elemento, con atributos. El atributo gana sobre el texto global:

<div class="cb-table-wrap" data-cb-table data-cb-table-empty="No results" data-cb-table-status-text="{start}–{end} of {total}">...</div>
<button class="cb-code__copy" data-cb-copy data-cb-copy-done="Copied">...</button>

Claves disponibles. Las llaves {nombre} se reemplazan por el valor correspondiente:

Con el script del CDN, agrega data-cb-manual y llama a cobalto.setMessages() antes de cobalto.init().

Fuente

Cobalto no carga ninguna fuente por su cuenta. Si no agregas nada, usa la monoespaciada del sistema. Para JetBrains Mono desde Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Para alojarla tú mismo (sin peticiones a Google), instala @fontsource-variable/jetbrains-mono o declara tu propio @font-face, y si quieres otra familia cambia el token:

@import "@fontsource-variable/jetbrains-mono";

:root {
  --font-cb-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  --font-cb-sans: "Inter", system-ui, sans-serif;
}

Qué incluye el paquete