kimia UI

Componentes de UI para React construido con CSS 3

¿Por qué este enfoque?

Tailwind CSS es un marco CSS de utilidad para construir rápidamente interfaces de usuario personalizadas. IL le permite escribir su estilo sin dejar su HTML.

La mayor desventaja de Tailwind CSS es el riesgo de tener clases demasiado largas que hagan que nuestro código no sea lo suficientemente legible.

Como React está basado en componentes, podemos extraer la lógica de componentes con sus clases y reutilizarlos en otro lugar, lo que dará como resultado un código más legible con más componentes y menos clases.

Es por eso que he creado esta colección de componentes de UI totalmente personalizables. Simplemente copie y pegue un componente que desee usar

Todos los componentes están en el directorio de paquetes .

Cada componente contiene 2 subdirectorios

• Ejemplos : contiene ejemplos para cada variante del componente en TypeScript

• Fragmentos : contiene ejemplos para cada variante del componente en reacción simple

? Agregue un nuevo componente

Para agregar un nuevo componente:

Cree su nuevo directorio en SRC/PACKAGES/{YourComponentName} dentro de su carpeta, creará 2 subcarpetas y un archivo

• Ejemplos : Will contiene ejemplos para su componente en TypeScript **
• Fragmentos : Will contiene ejemplos en Plain React y se utilizará como fragmento de código para copiar
• {Nombre de su componente} .tsx contiene la lógica de sus componentes

Cree su nuevo archivo (ruta) en SRC/Pages/Components/{su nombre de componente} . Entonces importará todos los ejemplos y fragmentos para su componente

Soporte del navegador

Estos componentes son compatibles con todos los navegadores

Cromo	Firefox	Borde	Safari	Ópera

Contribución

Si desea contribuir en el proyecto, solucionar errores, mejorar la accesibilidad o abrir un problema, siga nuestra guía de contribución

Primero, ejecute el servidor de desarrollo:

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 con su navegador para ver el resultado.