Tailtheme - Librería de UI para React

Tailtheme es una librería de interfaz de usuario (UI) para React que te permite crear aplicaciones web modernas y atractivas con facilidad. Está diseñada con base en Tailwind CSS, lo que significa que obtienes todas las ventajas de la potente herramienta de diseño de Tailwind CSS junto con los componentes preestilizados de React.

Características principales

• Componentes de UI preestilizados y personalizables.
• Integración sencilla con proyectos de React existentes.
• Totalmente compatible con Tailwind CSS.
• Ampliable y fácil de personalizar según tus necesidades.
• Documentación completa y ejemplos de uso.

Sistema de Colores

Tailtheme implementa un sistema de colores robusto y semántico basado en tres categorías principales:

Colores Semánticos

• primary: Color principal de la marca
• accent: Color de acento para destacar elementos
• info: Información general y mensajes informativos
• success: Operaciones exitosas y estados positivos
• warning: Advertencias y precauciones
• danger: Errores y acciones destructivas

Cada color semántico incluye variantes automáticas:

• base: Color base
• hover: Estado hover
• ring: Color de enfoque (focus ring)
• focus: Estado de enfoque
• disabled: Estado deshabilitado
• contrast: Color de texto que contrasta sobre el color base
• soft: Versión suave/atenuada del color
• softContrast: Color de texto sobre la versión suave

Colores de Superficie (Surface)

Sistema moderno de capas visuales:

• surface.base: Fondo principal de la aplicación
• surface.elevated: Tarjetas y elementos elevados
• surface.overlay: Popovers, tooltips, dropdowns (máxima elevación)
• surface.hover: Estados hover, skeletons, fondos interactivos
• surface.contrast: Texto sobre superficies

Colores de Texto

Jerarquía tipográfica con contraste apropiado:

• text.primary: Texto principal (alto contraste)
• text.secondary: Texto secundario (contraste medio)
• text.tertiary: Texto terciario, hints (bajo contraste)

Colores de UI

Elementos de interfaz:

• ui.border: Bordes y divisores estándar
• ui.borderSubtle: Bordes sutiles y tenues
• ui.input: Fondo de inputs
• ui.inputHover: Fondo de inputs en hover
• ui.ring: Color del anillo de enfoque
• ui.muted: Fondos atenuados
• ui.mutedContrast: Texto sobre fondos atenuados

Colores Neutrales

Escala de grises para elementos neutros:

• neutral.primary a neutral.quaternary: Gradación de colores neutrales

Este sistema permite tematización completa mediante el ThemeProvider y se integra automáticamente con todas las clases de Tailwind CSS.

Instalación

Para comenzar a usar Tailtheme en tu proyecto de React, sigue estos sencillos pasos:

1. Instala la librería utilizando npm o yarn:

   npm install tailtheme
   # o
   yarn add tailtheme