daemonui

🧩 DaemonUI

Componentes UI reutilizables para React + Tailwind, inspirados en shadcn/ui

GitHub   •   npm   •   LinkedIn

🧠 ¿Qué es DaemonUI?

DaemonUI es una librería de componentes UI moderna para proyectos en React + Tailwind CSS. Diseñada con instalación modular vía CLI, te permite agregar únicamente los componentes que necesitas, manteniendo tu bundle optimizado.

✨ Características principales

• 💡 Componentes modernos - Basado en las mejores prácticas de UX/UI actuales
• 🧩 Modular por diseño - Instala solo lo que necesitas
• 🛠️ Código editable - El código fuente se copia a tu proyecto para máxima flexibilidad
• 🎨 Tailwind-first - Estilizado con Tailwind CSS y variantes declarativas
• ♿ Accesible - Componentes que siguen estándares de accesibilidad
• 🔧 TypeScript nativo - Tipado completo y autocompletado inteligente
• ⚡ Compatible - React 18+, Next.js 13+ y Vite

⚙️ Instalación

Instalar la librería base

npm install daemonui

Agregar componentes a tu proyecto

Usa el CLI para agregar cualquier componente:

npx daemonui add <nombre-componente>

Esto automáticamente:

• ✅ Copia el componente a src/components/ui/
• ✅ Instala dependencias necesarias
• ✅ Mantiene la estructura organizada

📦 Ejemplos de instalación

# Agregar un botón
npx daemonui add button

# Agregar el recortador de imágenes
npx daemonui add imagecropper

📚 Componentes disponibles

Componente	Descripción	Casos de uso
button	Botón versátil con múltiples variantes	Acciones primarias, secundarias, enlaces
imagecropper	Editor avanzado de imágenes con recorte	Avatares, thumbnails, procesamiento de imágenes

📁 Estructura del proyecto

src/
└── components/
    └── ui/
        ├── button/
        │   └── component.tsx
        └── imagecropper/
            └── component.tsx

🎯 Ejemplos de uso

Button Component

import { Button } from "./components/ui/button/button";

export default function ButtonDemo() {
    return (
        <div className="flex gap-4 items-center flex-wrap">
            {/* Variantes básicas */}
            <Button>Default</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="ghost">Ghost</Button>

            {/* Estados especiales */}
            <Button variant="destructive">Delete</Button>
            <Button variant="link">Link Style</Button>

            {/* Tamaños */}
            <Button size="sm">Small</Button>
            <Button size="lg">Large</Button>

            {/* Estado de carga */}
            <Button isLoading disabled>
                Processing...
            </Button>
        </div>
    );
}

ImageCropper Component

import { useState } from "react";
import { ImageCropper } from "./components/ui/imagecropper/imagecropper";

export default function ImageCropperDemo() {
    const [croppedImage, setCroppedImage] = useState<string>("");

    const handleImageCropped = (base64: string) => {
        setCroppedImage(base64);
        console.log("Imagen recortada:", base64);
    };

    const handleFileCropped = (file: File) => {
        console.log("Archivo recortado:", file);
        // Aquí puedes subir el archivo a tu servidor
    };

    return (
        <div className="space-y-8">
            <div className="space-y-4">
                <h2 className="text-2xl font-bold">Avatar Circular</h2>
                <ImageCropper
                    width={200}
                    height={200}
                    type="dragging"
                    circle={true}
                    onGetBase64={handleImageCropped}
                    onGetFile={handleFileCropped}
                />
            </div>

            <div className="space-y-4">
                <h2 className="text-2xl font-bold">Banner Rectangular</h2>
                <ImageCropper
                    width={400}
                    height={200}
                    type="button"
                    circle={false}
                    onGetBase64={handleImageCropped}
                    onGetFile={handleFileCropped}
                />
            </div>

            {/* Previsualización del resultado */}
            {croppedImage && (
                <div className="space-y-4">
                    <h3 className="text-lg font-semibold">Imagen recortada:</h3>
                    <img src={croppedImage} alt="Cropped result" />
                </div>
            )}
        </div>
    );
}

🛠️ Personalización

Todos los componentes se copian directamente a tu proyecto, lo que significa que puedes:

• ✏️ Modificar estilos - Cambia colores, espaciados y animaciones
• 🔧 Ajustar funcionalidad - Agrega features específicas para tu proyecto
• 🎨 Crear variantes - Extiende los componentes base con nuevas opciones
• 📱 Optimizar responsive - Adapta para diferentes dispositivos

Ejemplo de personalización

// Modifica src/components/ui/button/button.tsx
const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors", {
    variants: {
        variant: {
            default: "bg-primary text-primary-foreground hover:bg-primary/90",
            // 🎨 Agrega tu variante personalizada
            gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600",
        },
    },
});

🧩 ¿Por qué elegir DaemonUI?

vs. Otras librerías de componentes

Característica	DaemonUI	Material-UI	Ant Design	Chakra UI
Bundle size	✅ Solo lo que uses	❌ Todo incluido	❌ Todo incluido	❌ Todo incluido
Personalización	✅ Código editable	⚠️ Limitado	⚠️ Limitado	✅ Flexible
Tailwind CSS	✅ Nativo	❌ No compatible	❌ No compatible	❌ CSS-in-JS
TypeScript	✅ 100%	✅ Sí	✅ Sí	✅ Sí

🚀 Roadmap

Próximos componentes

• input - Campos de entrada con validación
• modal - Modales accesibles y responsivos
• table - Tablas con sorting y paginación
• form - Formularios con validación integrada
• calendar - Selector de fechas
• dropdown - Menús desplegables

Mejoras planeadas

• Tema oscuro automático
• Playground online
• Storybook integration
• Figma design tokens

🤝 Contribuir

¡Las contribuciones son bienvenidas! Si tienes ideas para nuevos componentes o mejoras:

• Fork el repositorio
• Crea una rama para tu feature
• Commit tus cambios
• Abre un Pull Request

📄 Licencia

MIT License - siéntete libre de usar DaemonUI en proyectos personales y comerciales.

🔥 Inspirado en

• shadcn/ui - Filosofía copy-paste de componentes
• Radix UI - Primitivos accesibles
• tailwind-variants - API de variantes

👨‍💻 Autor

Henry Mosquera Guaman

• 🐙 GitHub: @henrym718
• 💼 LinkedIn: henrym718
• 📧 Email: [e-mail]

Si DaemonUI te ayuda en tus proyectos, ¡considera darle una ⭐ en GitHub!

Hecho con ❤️ para la comunidad de desarrolladores