Un panel de administración listo para usar construido con Shadcn UI y Vite que te ahorrará tiempo al iniciar

Cada vez que inicias un nuevo proyecto personal o una utilidad interna, tienes que reconstruir la misma interfaz desde cero. Barra lateral, interruptor de modo oscuro, búsqueda global, diseño responsivo para móviles. Esta rutina lleva días. El autor del repositorio shadcn-admin se encontraba frecuentemente con esta tarea en el trabajo y decidió crear una plantilla universal para sí mismo. Como resultado, el proyecto ha acumulado más de 13 mil estrellas en GitHub.

Qué hay bajo el capó

El proyecto está construido sobre una pila tecnológica moderna y rápida. Vite sirve como herramienta de compilación, y toda la base de código está escrita en TypeScript. El estilizado se maneja con TailwindCSS en combinación con Radix UI. Esta es la base clásica para Shadcn UI.

Una elección interesante fue a favor de TanStack Router para el enrutamiento. A diferencia de React Router estándar, proporciona tipado estricto de rutas y parámetros desde el primer momento. Para los iconos, el autor eligió Lucide y parcialmente Tabler Icons. Para la autenticación, el servicio Clerk está integrado en el proyecto.

Qué hace interesante este panel

El repositorio incluye más de una docena de páginas preconstruidas. Hay pantallas listas para usar para usuarios, configuración, errores y análisis.

Características principales de esta construcción:

• Soporte completo de tema oscuro y claro.
• Paleta de comandos para buscar en toda la aplicación mediante atajo de teclado.
• Componente de barra lateral preconstruido que se colapsa correctamente en pantallas móviles.
• Soporte de modo RTL para idiomas de derecha a izquierda.

El soporte RTL es bastante raro en plantillas gratuitas. Para lograr la visualización correcta de los elementos al cambiar la dirección del texto, el autor tuvo que modificar manualmente algunos de los componentes base de Shadcn.

Consideración importante al trabajar con componentes

Si planeas usar este proyecto como base y actualizar el kit de interfaz a través de la herramienta CLI npx shadcn@latest add, ten cuidado. Algunos componentes aquí han sido modificados.

Los siguientes archivos han sido modificados:

• scroll-area
• sonner
• separator

Además, los siguientes elementos han sido actualizados para soporte RTL: dialog, select, table, sheet, sidebar, command y switch. Las actualizaciones automáticas a través de Shadcn CLI simplemente sobrescribirán estos archivos con versiones predeterminadas. Las modificaciones personalizadas del autor y el soporte RTL se perderán en el proceso. Para preservar los cambios, necesitarás fusionar los archivos manualmente.

Cómo ejecutar el proyecto localmente

Necesitarás Node.js y el administrador de paquetes pnpm para comenzar. La instalación solo toma un par de minutos.

git clone https://github.com/satnaing/shadcn-admin.git
cd shadcn-admin
pnpm install
pnpm run dev

Después de eso, el servidor local lanzará la aplicación, y podrás experimentar inmediatamente la velocidad de Vite y las transiciones suaves entre páginas.

Para quién es este repositorio

El autor declara honestamente en la descripción que este repositorio no fue pensado como un starter oficial. Sin embargo, el proyecto es una excelente opción para ese propósito.

Esta es una sólida elección si necesitas implementar rápidamente un panel de administración para tu propio servicio y quieres evitar tratar con bibliotecas pesadas como Ant Design. La base de código también sirve como una referencia útil para estructurar componentes de TanStack Router y Shadcn UI en una aplicación React de complejidad moderada.