🧠 ¿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

# Agregar modal
npx daemonui add modal

📚 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 | | modal | Modal accesible con backdrop personalizable | Confirmaciones, formularios, contenido overlay |

📁 Estructura del proyecto

src/
└── components/
    └── ui/
        ├── button/
        │   └── component.tsx
        ├── imagecropper/
        │   └── component.tsx
        └── modal/
            └── 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>
    );
}

Modal Component

import { Modal, ModalContent, ModalTrigger, useModal } from "./components/ui/modal/component";

export default function ModalDemo() {
    return (
        <Modal
            classNameContent="p-5 rounded-xl max-w-md"
            classNameBackdrop="backdrop-blur-xs bg-black/25"
            closeOnOutsideClick={true}
            closeOnEscape={false}
        >
            <ModalTrigger>
                <button className="bg-black text-white px-4 py-2 rounded-md">Abrir modal</button>
            </ModalTrigger>
            <ModalContent>
                <Component />
            </ModalContent>
        </Modal>
    );
}

// Componente de contenido personalizado
const Component = () => {
    const { closeModal } = useModal();
    return (
        <div>
            <h2 className="text-xl font-bold mb-4">¡Hola! Este es el contenido de tu modal</h2>
            <p className="mb-4">Puedes colocar aquí cualquier contenido que desees.</p>
            <button className="bg-black text-white px-4 py-2 rounded-md" onClick={closeModal}>
                Cerrar Modal
            </button>
        </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
• [ ] table - Tablas con sorting y paginación
• [ ] form - Formularios con validación integrada
• [ ] calendar - Selector de fechas
• [ ] dropdown - Menús desplegables
• [ ] tooltip - Tooltips accesibles
• [ ] tabs - Sistema de pestañas

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:

1. Fork el repositorio
2. Crea una rama para tu feature
3. Commit tus cambios
4. 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: [email protected]