Guía
Buenas prácticas
Ideas y recomendaciones para estudiantes, freelancers o quienes recién empiezan a construir sistemas de componentes.
Define tu mapa de componentes
Empieza por listar las piezas clave de tu interfaz: botones, cards, formularios y navegación. Ese mapa evita que dupliques esfuerzos.
Nombra con intención
Usa nombres claros y consistentes. Un mismo patrón debe llamarse igual en todo el proyecto.
Agrupa por dominio
Separa componentes genéricos de los específicos del negocio. Esto facilita el mantenimiento y la reutilización.
Estructuras recomendadas
Proyectos pequeños
src/components (UI base) + src/sections (bloques de página).
Apps en crecimiento
src/ui (primitivas) + src/features/<feature>/components.
Equipos grandes
packages/ui (design system) + apps/web + apps/admin con historias compartidas.
Estructuras visuales
Next.js (App Router)
Estructura moderna para apps con rutas y layouts.
- app/
- (shell)/
- page.tsx
- layout.tsx
- components/
- lib/
- public/
React + Vite
Ideal para proyectos rápidos o SPAs.
- src/
- components/
- pages/
- hooks/
- services/
- styles/
- App.tsx
Landing / Marketing
Páginas estáticas con secciones claras.
- src/
- sections/
- components/
- assets/
- styles/
- pages/
Checklist rápido
- Documenta cada componente con un ejemplo real.
- Define variantes antes de agregar nuevas props.
- Mantén accesibilidad desde el primer commit.
- Crea un playground para validar estados críticos.
- Mide reutilización: evita componentes de un solo uso.
Siguiente paso
Explora el catálogo y revisa ejemplos reales con código listo.