Elise

Design system moderno basado en Radix UI primitives y Tailwind CSS, construido como monorepo con pnpm.

Paquetes

Paquete	Descripcion
@calumet/elise-ui	Libreria principal con 45+ componentes accesibles
@calumet/elise-utils	Utilidades: formularios (Zod), tablas (TanStack), toasts, alerts, fechas
@calumet/elise-icons	Re-export de Radix Icons
@calumet/elise-linter	Configuracion compartida de ESLint y Prettier
showcase	App demo interactiva con ejemplos de todos los componentes

Requisitos

• Node.js >= 18
• pnpm >= 10
• React >= 19

Instalacion

git clone https://github.com/calumet/elise.git
cd elise
pnpm install

Scripts

Comando	Descripcion
pnpm dev	Modo desarrollo de @calumet/elise-ui (watch + dts)
pnpm dev:showcase	Desarrollo paralelo de todos los paquetes + showcase
pnpm build	Build de produccion (icons → ui → utils → showcase)
pnpm lint	Verificar ESLint
pnpm lint:fix	Corregir problemas de ESLint
pnpm format	Formatear con Prettier
pnpm format:check	Verificar formato
pnpm clean	Limpiar carpetas dist

Estructura del proyecto

elise/
├── packages/
│   ├── ui/           # Componentes UI (Radix + Tailwind)
│   ├── utils/        # Utilidades (forms, tables, toasts, alerts, dates)
│   ├── icons/        # Iconos (Radix Icons)
│   ├── linter/       # Config ESLint + Prettier
│   ├── showcase/     # App demo (Vite + React 19)
│   └── blocks/       # (reservado para uso futuro)
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.base.json
└── eslint.config.js

Inicio rapido

import { ThemeProvider } from "@calumet/elise-ui";
import { Button } from "@calumet/elise-ui/button";

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Button variant="solid" size="md">
        Hola Elise
      </Button>
    </ThemeProvider>
  );
}

Asegurate de importar los estilos de Elise en tu CSS:

Si usas Vite, instala y activa el plugin oficial de Tailwind:

pnpm add -D tailwindcss @tailwindcss/vite

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Con Vite no necesitas postcss ni @tailwindcss/postcss.

@import "tailwindcss";
@import "@calumet/elise-ui/tailwind/elise.css";

@source '../node_modules/@calumet/elise-ui/dist';
@source '../node_modules/@calumet/elise-utils/dist';

Documentacion

Consulta la documentacion completa en ./docs:

• Guia de inicio
• Arquitectura
• Temas
• Componentes
• Utilidades
• Linter y formato
• Referencias externas

Licencia

MIT