Componentes de interfaz de usuario animados para React, Tailwind CSS, Framer Motion y más https://www.hover.dev

Para los desarrolladores, crear paneles de administración puede ser complicado. Hay MUCHAS cosas pequeñas que deben hacerse bien para que se vean y se sientan profesionales.

¡Hoy vamos a crear uno! Lo haremos usando React con NextJS y TailwindCSS, y cubriremos un montón de consejos sobre lo que debes tener en cuenta para asegurarte de que cualquier panel que crees en el futuro tenga un aspecto increíble.

(PD: disculpas por el enfoque extraño al comienzo del video, todavía no tengo idea de qué estoy haciendo con una cámara, así que tengan paciencia conmigo)

Enlaces del proyecto
Código fuente: https://github.com/TomIsLoading/react-tailwind-dashboard
Inspiración principal: https://dribbble.com/shots/24455638-Financial-Dashboard
Biblioteca CMDK: https://github.com/pacocoursey/cmdk
Íconos de React: https://react-icons.github.io/react-icons/

Mis enlaces
Tiktok: https://www.tiktok.com/@tomisloading
Instagram: https://www.instagram.com/tomisloading/
GitHub: https://github.com/TomIsLoading
Twitter: https://twitter.com/TomIsLoading
Discord y más: https://linktr.ee/tomisloading
Plantillas de portafolios: https://tomisloading.gumroad.com/

Cronología:
0:00 – Introducción
0:27 – No reinventes la rueda (recursos de inspiración)
2:45 – Paneles de dimensionamiento
7:02 – Cambio de tamaño del texto y contraste (activar cuenta)
16:11 – Ten en cuenta a tus usuarios (barra de búsqueda de cmdk)
28:08 – Agregue contraste lentamente (opciones de navegación)
33:05 – Cuenta para el crecimiento de la página (sección de selección de planes)
37:08 – Alinear todo (barra superior)
41:46 – Utilice diferentes tipos de contraste de forma selectiva (tarjetas de estadísticas)
50:04 – No reinventes la rueda 2 (agregando gráficos)
59:14 – Utilice el color de forma intencionada (tabla de transacciones recientes)

Aproveche la oportunidad de conectarse y compartir este video con sus amigos y familiares si lo encuentra útil.