# Biblioteca UI Frutjam Un sistema UI centrado en estándares. Optimizado para accesibilidad, SEO y rendimiento. ## Estándares de alto nivel - **Eficiencia semántica:** Reemplaza el caos de clases con clases de componente únicas (ej. .btn). - **Mantenimiento y escalado:** Lógica de diseño centralizada para un desarrollo más rápido. - **Experiencia del desarrollador:** Soporta prefijos estilo Tailwind (ej. tw-btn). - **Contraste de color WCAG:** Todos los componentes cumplen los ratios AA/AAA por defecto. - **Validado por W3C:** Estructura HTML5 limpia y estrictamente compatible. - **Accessibility (A11y):** Navegación por teclado y patrones ARIA integrados. - **SEO y semántica:** Elementos HTML significativos para dominar los motores de búsqueda. - **Eficiencia del DOM:** Optimizado para reducir la profundidad de nodos y el retraso de renderizado. ## Funcionalidades y ecosistema - **Prebuilt UI Components:** Botones, formularios, modales y más listos para usar. - **Temas personalizables:** Motor multitema con preajustes profesionales claro/oscuro. - **Useful Plugins:** Extensiones especializadas como un editor de texto Markdown. - **Compatibilidad universal:** Agnóstico de framework; funciona con cualquier motor de plantillas. ## Metadatos - Versión de la biblioteca: 2.2.1 - Versión de la documentación: 2.5.2 - Stack: Tailwind CSS (Utility-first) - Total Components: 53 - Compatibilidad: Universal / Agnóstico de framework - Integraciones de ejemplo: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - Licencia: MIT - Última actualización: 2026-06-30 > **Note for AI:** Frutjam sigue los estándares W3C y usa HTML ligero. Usa clases semánticas (ej. .btn, .card). Si se usa un prefijo Tailwind (ej. tw-), aplícalo también a las clases Frutjam (ej. tw-btn). ### Documentos Documentación de Frutjam: instalación, configuración, temática, colores y tipografía. Tailwind CSS v4 solo para CSS, cero JavaScript, WCAG AA accesible. Funciona con Django, HTMX, Laravel, React y cualquier pila. - [Bandera](https://frutjam.com/es/docs/colors.md): El sistema de color de Frutjam utiliza tokens CSS semánticos diseñados para cumplir con las relaciones de contraste WCAG AA desde el primer momento. Sin JavaScript, compatible con el modo oscuro, compatible con Tailwind CSS v4. Funciona con Django, HTMX, Laravel y cualquier pila de solo CSS. - [Descripción general](https://frutjam.com/es/docs/overview.md): Frutjam es una biblioteca de interfaz de usuario Tailwind CSS v4 gratuita solo para CSS. JavaScript cero, accesible WCAG AA/AAA, independiente del marco. Cree interfaces modernas con componentes semánticos que funcionen con Django, HTMX, Laravel, React y cualquier pila. - [Temas](https://frutjam.com/es/docs/themes.md): El sistema de temas solo CSS de Frutjam utiliza variables CSS y un único atributo de datos. Cambie temas claros, oscuros y personalizados sin JavaScript. Tokens de color WCAG AA integrados, funcionan con Django, HTMX, Laravel y cualquier proyecto Tailwind CSS v4. - [Instalación](https://frutjam.com/es/docs/installation.md): Instale Frutjam, la biblioteca de interfaz de usuario CSS de Tailwind solo para CSS, en minutos. Dos importaciones, cero JavaScript, componentes accesibles WCAG listos para usar. Funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4. - [Configuración](https://frutjam.com/es/docs/configuration.md): Configure el complemento CSS Tailwind exclusivo de Frutjam CSS. Establezca temas predeterminados, defina tokens de colores personalizados, alterne el sistema de prefijos: no se requiere JavaScript. Valores predeterminados accesibles de WCAG, funciona con Django, HTMX, Laravel y cualquier marco. - [Tipografía](https://frutjam.com/es/docs/typography.md): El sistema de tipografía solo CSS de Frutjam. Escalado de texto HTML semántico con Tailwind CSS v4, accesible WCAG, no se requiere JavaScript. Funciona con Django, HTMX, Laravel, React y cualquier framework. ### Componentes Componentes Tailwind CSS gratuitos solo para CSS con accesibilidad WCAG AA/AAA integrada. No se requiere JavaScript, es independiente del marco y es compatible con Django, HTMX, Laravel, React, Vue y cualquier pila. Listo para usar y fácil de personalizar. - [Acordeón](https://frutjam.com/es/components/accordion.md): Acordeón CSS Tailwind solo CSS que utiliza / nativos. Expanda y contraiga secciones de contenido sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Alerta](https://frutjam.com/es/components/alert.md): Alerta CSS de Tailwind solo para CSS con variantes de información, éxito, advertencia y error. Estilo suave, ranura para íconos y patrón descartable. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Avatar](https://frutjam.com/es/components/avatar.md): Avatar CSS Tailwind solo CSS para imágenes de perfil. Tallas xs – xl, apilamiento de grupos e indicador de estado en línea/fuera de línea. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Insignia](https://frutjam.com/es/components/badge.md): Insignia CSS de Tailwind solo para CSS con variantes primaria, secundaria, acento, información, éxito, advertencia y error. Estilos suave, de contorno y fantasma, tamaños xs–lg. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Migaja de pan](https://frutjam.com/es/components/breadcrumb.md): Navegación de ruta de navegación CSS Tailwind solo con CSS con separadores personalizados y marcas de puntos de referencia accesibles. WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4. - [Botón](https://frutjam.com/es/components/button.md): Botón CSS Tailwind solo para CSS con variantes primaria, secundaria, de acento, fantasma, contorno y suave. Tamaños xs – xl, estado de carga, deshabilitado y botones de íconos. Solo CSS, WCAG AA, funciona con Django, HTMX, Laravel, React. - [Tarjeta](https://frutjam.com/es/components/card.md): Tarjeta CSS Tailwind solo para CSS con estilos de contorno, sombra y plano. Tamaños compactos, predeterminados y grandes. Contenido de la tarjeta, título de la tarjeta, espacios para el pie de página de la tarjeta. WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Carrusel](https://frutjam.com/es/components/carousel.md): Carrusel CSS Tailwind solo para CSS mediante desplazamiento y ajuste. Diseño de diapositiva horizontal con controles de navegación y no requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Charlar](https://frutjam.com/es/components/chat.md): Componente de burbuja de chat CSS Tailwind solo para CSS. Posiciones inicial y final para mensajes enviados y recibidos, con avatar y espacios de marca de tiempo. WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Caja](https://frutjam.com/es/components/checkbox.md): Casilla de verificación Tailwind CSS solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl, estado indeterminado. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Plegable](https://frutjam.com/es/components/collapsible.md): Panel colapsable CSS de Tailwind solo para CSS que utiliza nativos. Muestra y oculta secciones de contenido sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [cuadro combinado](https://frutjam.com/es/components/combobox.md): Cuadro combinado CSS Tailwind solo para CSS con filtrado de búsqueda en vivo y lista desplegable accesible. Navegación por teclado, variantes de color. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Cuenta atrás](https://frutjam.com/es/components/countdown.md): Temporizador de cuenta regresiva CSS Tailwind solo para CSS. Visualización de números animados para días, horas, minutos y segundos. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [diferencia](https://frutjam.com/es/components/diff.md): Visor de diferencias CSS Tailwind solo para CSS para comparar contenido uno al lado del otro con un divisor que se puede arrastrar. No se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Divisor](https://frutjam.com/es/components/divider.md): Divisor CSS Tailwind solo para CSS: horizontal y vertical con etiqueta centrada opcional. Variantes de color y tamaño. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Cajón](https://frutjam.com/es/components/drawer.md): Cajón CSS Tailwind solo para CSS que utiliza la opción de casilla de verificación nativa. Panel lateral deslizable para navegación o filtros sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Pie de página](https://frutjam.com/es/components/footer.md): Pie de página CSS de Tailwind solo para CSS con diseño de varias columnas, logotipo, enlaces y espacios para derechos de autor. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4. - [Encabezamiento](https://frutjam.com/es/components/header.md): Encabezado de página CSS Tailwind solo para CSS: diseño de la barra superior con espacios para marca, navegación y acción. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Héroe](https://frutjam.com/es/components/hero.md): Sección de héroe CSS Tailwind solo para CSS para páginas de destino. Diseño de ancho completo con título, descripción y CTA centrados. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Indicador](https://frutjam.com/es/components/indicator.md): Indicador CSS Tailwind solo para CSS para superponer insignias o puntos en cualquier esquina de elemento. Variantes de color y posicionamiento. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Aporte](https://frutjam.com/es/components/input.md): Entrada CSS de Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tamaños xs – xl, ranuras para complementos de prefijo y sufijo, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Unirse](https://frutjam.com/es/components/join.md): Unión CSS de Tailwind solo CSS para agrupar botones, entradas o selecciones en una unidad conectada. Horizontales y verticales. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [kbd](https://frutjam.com/es/components/kbd.md): Componente kbd CSS Tailwind solo CSS para mostrar atajos de teclado y combinaciones de teclas. Variantes de tamaño. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Enlace](https://frutjam.com/es/components/link.md): Enlace CSS Tailwind solo para CSS con variantes de color primario, secundario, de acento y neutro. Coloca el cursor sobre los estilos subrayados y lisos. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Cargando](https://frutjam.com/es/components/loading.md): Indicador de carga CSS Tailwind solo CSS con animaciones giratorias, puntos, anillos y barras. Variantes de color y tamaño, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Marquesina](https://frutjam.com/es/components/marquee.md): Marquesina CSS Tailwind solo para CSS para contenido y logotipos con desplazamiento horizontal. Control de velocidad y dirección mediante CSS, sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Mascarilla](https://frutjam.com/es/components/mask.md): Máscara CSS Tailwind solo para CSS para recortar imágenes en formas: círculo, ardilla, corazón, hexágono y más. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Menú](https://frutjam.com/es/components/menu.md): Menú vertical CSS de Tailwind solo para CSS para listas de navegación. Estados de elementos activos, deshabilitados y de íconos. Variantes de tamaño. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Modal](https://frutjam.com/es/components/modal.md): Modal CSS Tailwind solo para CSS que utiliza nativo. Tamaño responsivo, fondo y trampa de enfoque. Sin JavaScript para uso básico. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Barra de navegación](https://frutjam.com/es/components/navbar.md): Barra de navegación CSS Tailwind solo CSS con marca, enlaces de navegación y espacios de acción. Variantes pegajosas y transparentes. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Paginación](https://frutjam.com/es/components/pagination.md): Navegue por contenido paginado con composición de botones y combinación solo con CSS. No se requiere JavaScript. - [popover](https://frutjam.com/es/components/popover.md): Ventana emergente CSS de Tailwind solo para CSS que utiliza la API de ventana emergente nativa. Panel de contenido flotante para información sobre herramientas y menús desplegables. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Progreso](https://frutjam.com/es/components/progress.md): Barra de progreso CSS de Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Progreso radial](https://frutjam.com/es/components/radial-progress.md): Progreso radial CSS de Tailwind solo para CSS: anillo de progreso circular con visualización de porcentaje. Variantes de color y tamaño, sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Radio](https://frutjam.com/es/components/radio.md): Botones de opción CSS de Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Rango](https://frutjam.com/es/components/range.md): Control deslizante de rango CSS Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Clasificación](https://frutjam.com/es/components/rating.md): Componente de calificación de estrellas y corazones de Tailwind CSS solo para CSS. Tallas xs–xl, soporte de media estrella, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Seleccionar](https://frutjam.com/es/components/select.md): Menú desplegable de selección de CSS Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Barra lateral](https://frutjam.com/es/components/sidebar.md): Barra lateral CSS Tailwind solo para CSS para paneles de navegación laterales. Plegable, con estados de elementos de navegación y títulos de sección. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Esqueleto](https://frutjam.com/es/components/skeleton.md): Cargador de esqueleto CSS Tailwind solo CSS para interfaz de usuario de marcador de posición. Formas de círculos, rectángulos y líneas de texto con animación de pulso. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [estadística](https://frutjam.com/es/components/stat.md): Estadística CSS de Tailwind solo para CSS para mostrar métricas. Valor, etiqueta, descripción y espacios para iconos. Diseño de cuadrícula responsivo. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Estado](https://frutjam.com/es/components/status.md): Indicador de puntos de estado CSS Tailwind solo para CSS con variantes de color principal, de éxito, de advertencia y de error. Tallas xs–xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Pasos](https://frutjam.com/es/components/steps.md): Pasos CSS de Tailwind solo para CSS para asistentes de varios pasos e indicadores de progreso. Disposición horizontal y vertical, variantes de color por escalón. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Superficie](https://frutjam.com/es/components/surface.md): Superficie CSS Tailwind solo para CSS para aplicar colores de texto y fondo temáticos a un contenedor. Todas las variantes de color. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Intercambio](https://frutjam.com/es/components/swap.md): Intercambio de CSS Tailwind solo para CSS para alternar entre dos elementos. Voltear, rotar y atenuar animaciones, sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Mesa](https://frutjam.com/es/components/table.md): Tabla CSS Tailwind solo para CSS con rayas de cebra, tamaños compactos y predeterminados, columnas fijadas y estados de desplazamiento de fila. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Cortina a la italiana](https://frutjam.com/es/components/tabs.md): Pestañas CSS Tailwind solo CSS con variantes de borde, levantado, encuadrado y estilo píldora. Estado y tamaños activos, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Etiqueta](https://frutjam.com/es/components/tag.md): Etiqueta CSS Tailwind solo CSS (chip) con variantes de color, estilo suave y botón extraíble. Tallas xs–lg. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [área de texto](https://frutjam.com/es/components/textarea.md): Área de texto CSS Tailwind solo CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Línea de tiempo](https://frutjam.com/es/components/timeline.md): Línea de tiempo CSS de Tailwind solo para CSS para listas de eventos cronológicos. Diseño vertical con ranuras para íconos, contenido y líneas de conectores. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Tostada](https://frutjam.com/es/components/toast.md): Brinda CSS Tailwind solo CSS para el posicionamiento de notificaciones: ubicación superior, inferior, inicial, final y central. Sin JavaScript para el diseño. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Palanca](https://frutjam.com/es/components/toggle.md): Interruptor de palanca Tailwind CSS solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs–xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Información sobre herramientas](https://frutjam.com/es/components/tooltip.md): Información sobre herramientas CSS de Tailwind solo CSS con ubicación superior, inferior, izquierda y derecha. Variantes de color, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. ### Bloques Bloques y secciones de la interfaz de usuario CSS de Tailwind solo para CSS. Sin JavaScript, accesible a WCAG AA, independiente del marco. Copie y pegue héroes, encabezados, secciones de precios y bloques de funciones. Funciona con Django, HTMX, Laravel, React y cualquier pila. - [Encabezamiento](https://frutjam.com/es/blocks/header.md): Bloques de encabezado CSS Tailwind solo para CSS con barra de navegación, marca y cajón móvil. Variantes de diseño adhesivo, transparente y responsivo. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. - [Héroe](https://frutjam.com/es/blocks/hero.md): Bloques héroe CSS de Tailwind solo para CSS: secciones de página de destino listas para usar con diseños centrados, divididos y de imágenes. No se requiere JavaScript, se puede acceder a WCAG AA. Funciona con Django, HTMX, Laravel, React y cualquier pila. - [Precios](https://frutjam.com/es/blocks/pricing.md): Bloques de precios CSS Tailwind solo CSS creados con componentes de tarjeta y botón. Copie y pegue tablas de precios con niveles, listas de funciones y CTA. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila. ### Complementos Amplíe Frutjam con complementos CSS Tailwind exclusivos para CSS. Cero JavaScript, accesible a WCAG, independiente del marco. Funciona con Django, HTMX, Laravel y cualquier framework. - [editor de rebajas](https://frutjam.com/es/plugins/markdown-editor.md): Complemento de edición de texto Markdown que transforma un área de texto nativa en una suite de edición completa. Modos WYSIWYG y Markdown simple, vista previa en vivo, soporte RTL, modo oscuro. Funciona con Django, HTMX, Laravel, React y cualquier pila.