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 ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
Acordeón
Acordeón CSS Tailwind solo CSS que utiliza <detalles>/<summary> nativos. 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. Tamaños 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 <detalles> nativos. 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 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
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 <dialog> 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
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
Navegue por contenido paginado con composición de botones y combinación solo con CSS. No se requiere JavaScript.
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 fila. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Cortina a la italiana
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
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.
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.