@enlolab/ui
v0.1.3
Published
Componentes React reutilizables basados en shadcn • UI moderna y accesible
Readme
2
@enlolab/ui
Una biblioteca moderna de componentes React construida con TypeScript, Tailwind CSS v4 y Radix UI.
✨ Características
- 🎨 Componentes modernos y accesibles
- 🎯 Soporte completo de TypeScript
- 🎨 Integración con Tailwind CSS v4
- ♿ Accesibilidad integrada
- 📦 Tree-shakeable
- 🌙 Modo oscuro automático
- 🎭 Variantes de componentes
- 📱 Responsive por defecto
📦 Instalación
npm install @enlolab/uiDependencias requeridas
npm install react react-dom
npm install tailwindcss@^4.0.0
npm install @radix-ui/react-* # Los componentes específicos se instalan automáticamente🎨 Configuración de estilos
1. Configurar Tailwind CSS v4
Crea o actualiza tu archivo src/styles/globals.css:
@import "tailwindcss";
/* Importar estilos de @enlolab/ui
@source "../../../node_modules/@enlolab/ui
/* Variables CSS personalizadas (opcional) */
:root {
--primary: oklch(0.723 0.219 149.579);
--primary-foreground: oklch(0.982 0.018 155.826);
--ring: oklch(0.723 0.219 149.579);
}
.dark {
--primary: oklch(0.696 0.17 162.48);
--primary-foreground: oklch(0.393 0.095 152.535);
--ring: oklch(0.527 0.154 150.069);
}2. Configurar Astro (si usas Astro)
/* En src/styles/global.css */
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:where(.dark, .dark *));
/* Importar componentes de @enlolab/ui
@source "../../../node_modules/@enlolab/ui
/* Variables CSS específicas de la aplicación */
:root {
--primary: oklch(0.723 0.219 149.579);
--primary-foreground: oklch(0.982 0.018 155.826);
--ring: oklch(0.723 0.219 149.579);
}
.dark {
--primary: oklch(0.696 0.17 162.48);
--primary-foreground: oklch(0.393 0.095 152.535);
--ring: oklch(0.527 0.154 150.069);
}@enlolab/ui — Documentación de componentes
Referencia rápida de los componentes exportados por @enlolab/ui, con su última actualización y enlace a la documentación de shadcn/ui cuando exista.
Fuente de referencia shadcn/ui: Components
Instalación
npm install @enlolab/ui
# o
pnpm add @enlolab/ui
# o
yarn add @enlolab/uiRequisitos (peerDependencies):
- react, react-dom
- tailwindcss (el proyecto padre debe tener Tailwind configurado)
Uso básico
import { Button, Card, Input } from "@enlolab/ui";
export default function Ejemplo() {
return (
<Card className="p-4 space-y-4">
<Input placeholder="Escribe algo..." />
<Button>Enviar</Button>
</Card>
);
}Tipografía (nuevo):
import { H1, P, Blockquote, List, TypographyTable } from "@enlolab/ui";
export function DemoTypography() {
return (
<div>
<H1 className="text-center">Título</H1>
<P>Texto de ejemplo.</P>
<Blockquote>Cita</Blockquote>
<List>
<li>Elemento 1</li>
<li>Elemento 2</li>
</List>
<TypographyTable>
<thead>
<tr>
<th>Columna A</th>
<th>Columna B</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</TypographyTable>
</div>
);
}Tabla de componentes
| componente | ultima actualizacion | link a shadcn | observaciones | | --------------- | -------------------- | ----------------------------------------------------- | ------------- | | accordion | 2025-08-14 | https://ui.shadcn.com/docs/components/accordion | | | alert | 2025-08-21 | https://ui.shadcn.com/docs/components/alert | | | alert-dialog | 2025-08-21 | https://ui.shadcn.com/docs/components/alert-dialog | | | aspect-ratio | 2025-08-21 | https://ui.shadcn.com/docs/components/aspect-ratio | | | avatar | 2025-08-21 | https://ui.shadcn.com/docs/components/avatar | | | badge | 2025-08-21 | https://ui.shadcn.com/docs/components/badge | | | breadcrumb | 2025-08-21 | https://ui.shadcn.com/docs/components/breadcrumb | | | button | 2025-08-04 | https://ui.shadcn.com/docs/components/button | | | buttonPro | 2025-08-06 | - | | | calendar | 2025-08-01 | https://ui.shadcn.com/docs/components/calendar | | | card | 2025-08-01 | https://ui.shadcn.com/docs/components/card | | | carousel | 2025-08-21 | https://ui.shadcn.com/docs/components/carousel | | | chart | 2025-08-21 | https://ui.shadcn.com/docs/components/chart | | | checkbox | 2025-08-01 | https://ui.shadcn.com/docs/components/checkbox | | | collapsible | 2025-08-21 | https://ui.shadcn.com/docs/components/collapsible | | | command | 2025-08-21 | https://ui.shadcn.com/docs/components/command | | | context-menu | 2025-08-21 | https://ui.shadcn.com/docs/components/context-menu | | | dialog | 2025-08-21 | https://ui.shadcn.com/docs/components/dialog | | | drawer | 2025-08-01 | https://ui.shadcn.com/docs/components/drawer | | | dropdown-menu | 2025-08-21 | https://ui.shadcn.com/docs/components/dropdown-menu | | | form | 2025-08-01 | https://ui.shadcn.com/docs/components/react-hook-form | | | hover-card | 2025-08-21 | https://ui.shadcn.com/docs/components/hover-card | | | input | 2025-08-01 | https://ui.shadcn.com/docs/components/input | | | input-otp | 2025-08-21 | https://ui.shadcn.com/docs/components/input-otp | | | label | 2025-08-01 | https://ui.shadcn.com/docs/components/label | | | menubar | 2025-08-21 | https://ui.shadcn.com/docs/components/menubar | | | navigation-menu | 2025-08-01 | https://ui.shadcn.com/docs/components/navigation-menu | | | pagination | 2025-08-21 | https://ui.shadcn.com/docs/components/pagination | | | popover | 2025-08-01 | https://ui.shadcn.com/docs/components/popover | | | progress | 2025-08-21 | https://ui.shadcn.com/docs/components/progress | | | radio-group | 2025-08-01 | https://ui.shadcn.com/docs/components/radio-group | | | resizable | 2025-08-21 | https://ui.shadcn.com/docs/components/resizable | | | scroll-area | 2025-08-01 | https://ui.shadcn.com/docs/components/scroll-area | | | select | 2025-08-01 | https://ui.shadcn.com/docs/components/select | | | separator | 2025-08-21 | https://ui.shadcn.com/docs/components/separator | | | sheet | 2025-08-01 | https://ui.shadcn.com/docs/components/sheet | | | sidebar | 2025-08-21 | https://ui.shadcn.com/docs/components/sidebar | | | skeleton | 2025-08-21 | https://ui.shadcn.com/docs/components/skeleton | | | slider | 2025-08-01 | https://ui.shadcn.com/docs/components/slider | | | sonner | 2025-08-01 | https://ui.shadcn.com/docs/components/sonner | | | switch | 2025-08-01 | https://ui.shadcn.com/docs/components/switch | | | table | 2025-08-21 | https://ui.shadcn.com/docs/components/table | | | tabs | 2025-08-21 | https://ui.shadcn.com/docs/components/tabs | | | textarea | 2025-08-01 | https://ui.shadcn.com/docs/components/textarea | | | toggle | 2025-08-21 | https://ui.shadcn.com/docs/components/toggle | | | toggle-group | 2025-08-21 | https://ui.shadcn.com/docs/components/toggle-group | | | tooltip | 2025-08-21 | https://ui.shadcn.com/docs/components/tooltip | | | typography | 2025-08-21 | https://ui.shadcn.com/docs/components/typography | |
Notas:
Las fechas corresponden al último commit que tocó el archivo del componente (o la fecha del fichero si no hay commits locales).
Para componentes propios (p. ej.,
buttonPro) el enlace aparece como-.</FormItem> </FormField> <Button type="submit">Enviar</Button> </Form>) }
### Dashboard con cards
```tsx
import { Card, CardContent, CardHeader, CardTitle } from '@enlolab/ui
function Dashboard() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Card>
<CardHeader>
<CardTitle>Usuarios</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">1,234</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Ventas</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">$45,678</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Pedidos</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">567</p>
</CardContent>
</Card>
</div>
)
}🤝 Contribuir
- Fork el repositorio
- Crea una rama para tu feature (
git checkout -b feature/amazing-feature) - Commit tus cambios (
git commit -m 'Add amazing feature') - Push a la rama (
git push origin feature/amazing-feature) - Abre un Pull Request
📄 Licencia
MIT License - ver LICENSE para más detalles.
🔗 Enlaces
Hecho con ❤️ por el equipo de Enlolab