@jlopvil/mui-kit
v0.1.0
Published
Librería de componentes reutilizables basada en Material UI para proyectos React y Next.js.
Downloads
67
Readme
@JaviLopezV/mui-kit
Librería de componentes reutilizables basada en Material UI para instalar en proyectos React y Next.js.
Objetivo del sistema visual
Todos los componentes comparten una misma base:
- Primario: azul claro agradable.
- Secundario: blanco con borde azul claro.
- Distópico: oscuro, con personalidad fuerte para acciones destacadas.
Los componentes que lo necesitan aceptan props estándar de Material UI como color, variant, size, sx, fullWidth, onClick, etc.
Ejemplo con botones:
import { Button } from "@JaviLopezV/mui-kit";
export function Actions() {
return (
<>
<Button color="primary" variant="contained">
Guardar
</Button>
<Button color="secondary" variant="contained">
Cancelar
</Button>
<Button color="dystopia" variant="contained">
Modo distópico
</Button>
</>
);
}Componentes incluidos
MuiKitProviderAppShellButtonIconButtonTextFieldSearchFieldSelectFieldChipCardSurfaceSectionPageHeaderHeroBannerFeatureCardStatCardInfoAlertEmptyStateDataTable
Instalación
npm install @JaviLopezV/mui-kit @mui/material @mui/icons-material @emotion/react @emotion/styledUso en Next.js
En App Router, crea un provider cliente:
"use client";
import { MuiKitProvider } from "@JaviLopezV/mui-kit";
export function Providers({ children }: { children: React.ReactNode }) {
return <MuiKitProvider>{children}</MuiKitProvider>;
}Y úsalo en app/layout.tsx:
import { Providers } from "./providers";
import "@JaviLopezV/mui-kit/styles.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Uso en React
import "@JaviLopezV/mui-kit/styles.css";
import {
Button,
FeatureCard,
MuiKitProvider,
PageHeader,
SearchField,
StatCard,
} from "@JaviLopezV/mui-kit";
export default function App() {
return (
<MuiKitProvider>
<PageHeader
eyebrow="Ventas"
title="Dashboard"
subtitle="Sistema visual unificado sobre Material UI"
actions={<Button color="secondary">Exportar</Button>}
/>
<SearchField label="Buscar" sx={{ my: 2 }} />
<div className="JaviLopezV-card-grid">
<FeatureCard
title="Ventas"
description="Resumen del canal online"
badge="Nuevo"
/>
<StatCard
label="MRR"
value="€12.400"
helperText="+8.4% vs mes anterior"
/>
</div>
</MuiKitProvider>
);
}Colores disponibles
primarysecondarydystopia
Scripts
npm run build
npm run typecheckPublicación
- Cambia el
nameenpackage.jsonpor tu scope real de npm. - Ejecuta
npm run build. - Publica con
npm publish --access public.
Ejemplo de consumo
Revisa examples/next-app.