Plataforma frontend de Calumet: design system (Radix UI primitives + Tailwind CSS) y utilidades de frontend que lo acompañan, construida como monorepo con pnpm.
| Paquete | Descripcion |
|---|---|
@calumet/elise-ui |
Libreria principal con 45+ componentes accesibles |
@calumet/elise-forms |
Hook useZodForm (react-hook-form + Zod) |
@calumet/elise-tables |
DataTable con filtros, ordenamiento, paginación y export (TanStack React Table) |
@calumet/elise-toasts |
Sistema de toasts (event bus + Toaster) |
@calumet/elise-alerts |
Sistema de alertas modales (event bus + AlertHost) |
@calumet/elise-i18n |
Internacionalización: I18nProvider, hooks y formateo Intl (dates, numbers) |
@calumet/elise-icons |
Re-export de Lucide Icons |
@calumet/elise-linter |
Configuración compartida de ESLint y Prettier |
showcase |
App demo interactiva con ejemplos de todos los componentes |
- Node.js >= 18
- pnpm >= 10
- React >= 19
git clone https://github.com/calumet/elise.git
cd elise
pnpm install| 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 → i18n → forms → tables → toasts → alerts → 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 |
elise/
├── packages/
│ ├── ui/ # Componentes UI (Radix + Tailwind)
│ ├── forms/ # useZodForm (react-hook-form + Zod)
│ ├── tables/ # DataTable (TanStack)
│ ├── toasts/ # Sistema de toasts
│ ├── alerts/ # Sistema de alertas modales
│ ├── i18n/ # Internacionalización (Intl)
│ ├── icons/ # Iconos (Lucide)
│ ├── 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
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/viteimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});Con Vite no necesitas
postcssni@tailwindcss/postcss.
@import "tailwindcss";
@import "@calumet/elise-ui/tailwind/elise.css";
@source '../node_modules/@calumet/elise-ui/dist';
@source '../node_modules/@calumet/elise-tables/dist';
@source '../node_modules/@calumet/elise-toasts/dist';
@source '../node_modules/@calumet/elise-alerts/dist';Consulta la documentacion completa en ./docs: