Trabajo de Fin de Grado - Sobresaliente, 10/10. Mención especial concedida por la UAB.
Pol-UI es una biblioteca de componentes React que construí como proyecto final universitario. Lo que comenzó como un requisito de tesis se convirtió en una biblioteca lista para producción con más de 150 componentes, un sitio de documentación completo, integración con Storybook y más de 50.000 descargas en NPM.
Por qué lo construí
Durante mi tercer año de universidad, ya trabajaba a tiempo completo en Mesalvo construyendo sistemas de diseño. Vi los mismos patrones repetirse en cada proyecto: botones, modales, formularios, tooltips, siempre construidos desde cero.
Quería construir algo reutilizable, bien documentado y realmente agradable de usar. No otro volcado de componentes, sino una biblioteca coherente con una API consistente y soporte real de accesibilidad. Escribí sobre todo el proceso (incluidos los errores) en Qué aprendí construyendo una biblioteca de UI desde cero.
Qué incluye
Pol-UI viene con:
- 150+ componentes - desde primitivos (Button, Input, Badge) hasta patrones complejos (DataTable, CommandMenu, Combobox)
- Soporte completo de TypeScript - cada prop tipado, sin escapes con
any - Primitivos de Radix UI - accesibles por defecto, navegables por teclado y compatibles con lectores de pantalla
- Tailwind CSS - totalmente personalizable mediante tokens, sin hackear estilos
- Storybook - cada componente documentado con ejemplos en vivo
- Vitest + Testing Library - cobertura de tests >80%
npm install pol-uiimport { Button, Input, Modal } from 'pol-ui';
export function LoginForm() {
return (
<form>
<Input label="Correo electrónico" type="email" />
<Input label="Contraseña" type="password" />
<Button intent="primary" type="submit">Iniciar sesión</Button>
</form>
);
}Decisiones técnicas
¿Por qué Radix UI? La accesibilidad es difícil de implementar correctamente. Radix gestiona el enfoque, los atributos ARIA y las interacciones de teclado.
¿Por qué Tailwind? Los tokens de diseño mediante variables CSS + utilidades de Tailwind permiten personalizar la biblioteca sin luchar contra la especificidad de CSS.
¿Por qué Vitest en lugar de Jest? Más rápido. Soporte nativo de ESM. La misma API. Sin configuración extra con Vite.
El sitio de documentación
Los docs en ui.polgubau.com cubren cada componente con:
- Demos interactivos en vivo
- Todas las variantes de props con tipos TypeScript
- Notas de accesibilidad
- Ejemplos de código listos para copiar y pegar
La documentación llevó casi tanto tiempo como la propia biblioteca. Creo que eso es lo correcto.
Impacto
- 50.000+ descargas en NPM desde el lanzamiento
- Usado en múltiples proyectos freelance y trabajo de clientes de Doscientos
- Citado en mi tesis que recibió una mención especial de la UAB
El código fuente completo está en GitHub. Las contribuciones son bienvenidas.
Los patrones de composición de componentes que desarrollé para esta biblioteca se explican en detalle en Patrones de Composición de Componentes en React.
Enlaces
