Introducción al Manual de Componentes UI

Bienvenido/a al manual de componentes UI reutilizables desarrollados en React con TypeScript y estilizados con Tailwind CSS. Este manual tiene como objetivo documentar de forma clara y práctica cada uno de los componentes que componen nuestro sistema de diseño. Cada componente fue construido siguiendo buenas prácticas de desarrollo: separación de responsabilidades, accesibilidad básica, tipado estricto con TypeScript, y una estructura flexible que permita su reutilización en distintos contextos.

¿Que vas a encontrar?

Dentro del menú de navegación vas a poder acceder a diferentes tipos de componentes agrupados por funcionalidad o categoría, como por ejemplo:

cientific cartoon style
  • Botones (Button)
  • Inputs de texto (TextInput)
  • Modales (Modal)
  • Alertas y mensajes (Alert, Toast)
  • Tarjetas (Card)
  • Spinners de carga (Spinner)
  • Componentes de layout (Container, Grid, Section)

Cada componente incluye:

  • Una descripción general de su uso y propósito.
  • Una vista previa visual (renderizado en tiempo real).
  • Un ejemplo básico de implementación.
  • Un listado de propiedades (props) personalizables, con explicación de su tipo y comportamiento.
  • Notas de accesibilidad y comportamiento responsive si aplica.

Buenas prácticas aplicadas

  • Inmutabilidad del estado (cuando se requiere manipulación interna).
  • Props bien tipadas y documentadas, usando interface o type para claridad y autocompletado.
  • Composición: los componentes permiten insertar contenido dinámico mediante children.
  • Estilos desacoplados y reutilizables mediante clases utilitarias de Tailwind.
cientific cartoon style