Numori UI

Instalación

Numori UI necesita Tailwind CSS v4: los componentes son clases utilitarias que compila el Tailwind de tu aplicación. Todo lo demás es opcional.

Nuxt

El módulo de Nuxt registra todos los componentes, así que una etiqueta como UiButton funciona sin importar nada, y solo se empaquetan los componentes que usas.

npm install numori-ui
npm install -D tailwindcss @tailwindcss/vite

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  modules: ['numori-ui/nuxt'],
  css: ['~/assets/css/main.css'],
  vite: { plugins: [tailwindcss()] },
})

@import 'tailwindcss';
@import 'numori-ui/css';

Con eso está toda la configuración: cada componente queda registrado y solo se incluye lo que usas.

Vite + Vue

En una aplicación con Vite y Vue, el plugin importa los componentes de forma automática allí donde se usan: sin app.use ni sentencias de importación.

import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import numoriUI from 'numori-ui/vite'

export default {
  plugins: [vue(), tailwindcss(), numoriUI()],
}

Cualquier aplicación Vue

Sin integración con herramientas de compilación, importa lo que uses, o registra un conjunto concreto de forma global para que los componentes no usados sigan descartándose.

import { createApp } from 'vue'
import { createNumoriUI, UiButton, UiModal } from 'numori-ui'
import './style.css'

createApp(App).use(createNumoriUI({ UiButton, UiModal })).mount('#app')

Estilos

El estilo es Tailwind CSS v4 y, deliberadamente, no se distribuye como CSS compilado. Los componentes heredan el Tailwind de tu aplicación, así que hay una sola hoja de estilos, sin duplicación, y todos los tokens se pueden sobrescribir.

• Una escala neutra cálida más cuatro rampas semánticas, disponibles como utilidades (bg-primary-600) y como variables CSS (var(--color-primary-600)).
• El modo oscuro se controla con una clase .dark conmutable en el elemento html, no con el valor por defecto de prefers-color-scheme.
• Vuelve a declarar cualquier token después del import para personalizar la marca: todos los componentes lo adoptan, ya que referencian tokens en lugar de colores literales.

@import 'tailwindcss';
@import 'numori-ui/css';

@theme {
  --color-primary-400: #7c5cff; /* rebrand the accent */
  --font-sans: 'Geist', system-ui, sans-serif;
}

Iconos

Los iconos se dibujan como SVG en línea a partir de un pequeño subconjunto incluido de Material Design Icons, sin runtime ni peticiones de red. Si tu aplicación ya tiene un sistema de iconos, delégale el renderizado; en Nuxt, indica un componente registrado globalmente para que cada icono pase por Nuxt Icon.

export default defineNuxtConfig({
  modules: ['@nuxt/icon', 'numori-ui/nuxt'],
  numoriUi: { icons: { component: 'Icon' } },
})

Tree-shaking

Solo se empaqueta lo que usas. La compilación genera un módulo por componente y declara sideEffects, de modo que referenciar tres componentes incluye tres. El módulo de Nuxt y el plugin de Vite ya son óptimos; solo app.use(NumoriUI) lo empaqueta todo, así que usa createNumoriUI cuando el tamaño importe.