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.
Frutjam incluye más de 52 componentes CSS Tailwind solo para CSS (botones, modales, formularios, navegación, visualización de datos y más) creados para Tailwind CSS v4. Cada componente utiliza nombres de clases semánticas (.btn, .card, .badge) que funcionan junto con cualquier clase de utilidad Tailwind. No se incluye JavaScript, no se requiere contexto de React y no se necesitan complementos de PostCSS más allá del propio Tailwind. Cada componente es WCAG AA accesible desde el primer momento, con pares de colores OKLCH ajustados a mano que garantizan un contraste legible en cada superficie. Debido a que Frutjam es solo CSS y independiente del marco, el mismo marcado HTML funciona en plantillas de Django, respuestas HTMX, Laravel Blade, Rails ERB, React JSX o HTML estático simple, sin modificaciones.
¿Nuevo en Frutjam?
Comience en segundos: dos importaciones y estará listo para construir.
Acordeón
Acordeón CSS Tailwind solo para CSS que utiliza `<detalles>`/`<summary>` nativo. Expanda y contraiga secciones de contenido sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Alerta
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
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
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
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
Botón CSS Tailwind solo para CSS con variantes primaria, secundaria, de acento, fantasma, contorno y suave. Tallas xs-xl, estado de carga, deshabilitado y botones de íconos. Solo CSS, WCAG AA, funciona con Django, HTMX, Laravel, React.
Tarjeta
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
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
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
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
Panel colapsable CSS de Tailwind solo para CSS que utiliza el elemento nativo `<detalles>`. Muestra y oculta secciones de contenido sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
cuadro combinado
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
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
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
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
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
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
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
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
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
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
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
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
Enlace CSS Tailwind solo 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
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
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
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ú
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
Modal CSS Tailwind solo para CSS que utiliza el elemento nativo `<dialog>`. 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
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
Paginación CSS Tailwind solo CSS para páginas numeradas, flechas anterior/siguiente, espacios de puntos suspensivos, entradas de radio accesibles y selección de salto de página. No se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
popover
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Tabla CSS Tailwind solo para CSS con rayas de cebra, tamaños compactos y predeterminados, columnas fijadas y estados de desplazamiento de filas. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Cortina a la italiana
Pestañas CSS Tailwind solo para CSS con variantes de borde, levantado, encuadrado y de 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
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
Á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
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
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
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
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.
Preguntas frecuentes
¿Todos los componentes de Frutjam son solo CSS?
Sí, la gran mayoría de los componentes son CSS puro sin JavaScript. Botones, insignias, tarjetas, formularios, alertas, modales, cajones, pestañas y más funcionan con HTML y CSS sin formato. Una pequeña cantidad de componentes que no tienen equivalente HTML nativo (posicionamiento del sistema, filtrado de cuadros combinados, controles de carrusel) ofrecen ayudas JS ligeras opcionales, pero el diseño y estilo CSS no requieren JavaScript en absoluto.
¿Los componentes de Frutjam funcionan con Django, HTMX y Laravel?
Sí, Frutjam es independiente del marco. Debido a que cada componente es solo CSS, funciona con cualquier pila renderizada por el servidor. Plantillas de Django, HTMX, Laravel Blade, Rails ERB, HTML simple: si puedes generar HTML, Frutjam funciona. Sin React, sin proceso de compilación, no se requiere marco de JavaScript.
¿Son accesibles los componentes WCAG?
Sí, el contraste WCAG AA está garantizado en todos los componentes. Cada par de colores (--color-primary / --color-on-primary, etc.) se ajusta manualmente en OKLCH para cumplir con los requisitos de contraste WCAG AA. Se utilizan elementos HTML semánticos en todo momento: <dialog> nativo para modales, <details> para acordeones y atributos ARIA adecuados cuando sea necesario.
¿Cómo se comparan los componentes de Frutjam con DaisyUI?
Ambas son bibliotecas de componentes Tailwind CSS solo para CSS, pero Frutjam está diseñado específicamente para Tailwind CSS v4, utiliza tokens de color OKLCH con pares de contraste WCAG AA garantizados y envía un servidor MCP gratuito (Cherry) para la integración del editor de IA; el equivalente de DaisyUI (Blueprint) es de pago. Frutjam también proporciona pares de tokens on-{color} explícitos en lugar de calcular los colores de primer plano en tiempo de ejecución.
¿Necesito instalar algo además de Tailwind CSS?
Sólo una línea extra. Agregue @plugin "frutjam"; a su archivo CSS después de @import "tailwindcss"; e instálelo a través de npm i -D frutjam. Eso es todo: sin complementos PostCSS, sin configuración de JavaScript, sin hojas de estilo separadas para importar. Todos los componentes están disponibles de inmediato y Tailwind los agita automáticamente.
¿Puedo usar componentes de Frutjam con React o Next.js?
Sí. Dado que Frutjam es solo CSS, usas los componentes de la misma manera en cualquier pila: simplemente aplica los nombres de las clases. Para los pocos componentes que se benefician del control de JavaScript (apertura/cierre modal, brindis, carrusel), Frutjam incluye ganchos React opcionales (frutjam/react) que envuelven llamadas DOM nativas sin dependencias adicionales.