1.0.0 • Published 6 months ago

pixelkit-ui v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

UI Components @Suarez0999

UI Components @Suarez0999 es una biblioteca de componentes de interfaz de usuario reutilizables diseñada para proyectos en React. Esta librería está desarrollada con TypeScript y estilizada con Tailwind CSS, ofreciendo soporte nativo para temas claro y oscuro. Ideal para desarrolladores que buscan una solución modular, escalable y personalizable para sus aplicaciones.

Ver ejemplos interactivos aquí


🌟 Características principales

  • Tecnologías modernas: Creada con TypeScript, React y Vite para un desarrollo eficiente y seguro.
  • Estilización avanzada: Integración total con Tailwind CSS para una personalización sin límites.
  • Modo claro y oscuro: Gestión de temas integrada sin configuraciones adicionales.
  • Iconos versátiles: Soporte para react-icons y componentes SVG optimizados.
  • Componentes reutilizables: Diseñados para ajustarse a proyectos de cualquier tamaño.

🚀 Instalación

Sigue estos pasos para instalar y configurar la biblioteca en tu proyecto:

1. Instalar el paquete

Ejecuta el siguiente comando en tu terminal:

npm i @suarez0999/ui-components

2. Configurar Tailwind CSS

Asegúrate de tener configurado Tailwind CSS en tu proyecto. Si no lo tienes, sigue esta guía oficial.

3. Dependencias requeridas

  • React: Versión 18 o superior.
  • Node.js: Versión 16 o superior.

🛠️ Uso

A continuación, un ejemplo básico de cómo importar y usar los componentes de la biblioteca:

Configuración inicial

import React from 'react';
import { Button } from '@suarez0999/ui-components';

const App = () => {
  return (
    <div className="p-4">
      <Button variant="primary" onClick={() => alert('¡Hola Mundo!')}>
        Haz clic aquí
      </Button>
    </div>
  );
};

export default App;

Personalización con Tailwind CSS

Puedes personalizar los componentes fácilmente utilizando clases de Tailwind:

<Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Personalizado
</Button>

📚 Documentación

Para más ejemplos, configuraciones y una lista completa de componentes, visita la página de documentación oficial.


🌱 Contribuciones

¡Tu ayuda es bienvenida! Sigue estos pasos para contribuir:

1. Clonar el repositorio

git clone https://github.com/Suarez0999/ui-components.git

2. Instalar dependencias

cd ui-components  
npm install

3. Ejecutar el entorno local

npm run dev

4. Crear tu feature branch

git checkout -b feature/nueva-funcionalidad

5. Enviar tus cambios

  1. Realiza un pull request en la rama principal del repositorio.
  2. Asegúrate de incluir una descripción detallada de los cambios realizados.

🧩 Recursos adicionales


📝 Notas de la versión

Esta es la versión inicial de la biblioteca. Te invitamos a reportar errores, sugerir mejoras o compartir tus ideas en GitHub Issues.


👥 Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.


¡Gracias por usar UI Components @Suarez0999! 🎉