Open Source · Licencia MIT · Gratis para siempre
Biblioteca de componentes CSS Tailwind accesible y solo para CSS para Desarrollo rápido
Frutjam es una biblioteca UI open-source ultrarrápida creada para desarrolladores que se preocupan por la accesibilidad, los estándares y la integración perfecta con Tailwind CSS.
Compatible con W3C, amigable con SEO y fácil de usar.
Altamente personalizable
Impulsado por clases utilitarias de Tailwind CSS
Frutjam te ofrece clases de componentes limpias listas para usar, mientras mantiene todas las utilidades de Tailwind disponibles para personalización. Cambia espaciado, colores, diseño e interacciones fácilmente con clases utilitarias en los componentes Frutjam.
Componentes personalizables
Cada componente de Frutjam está diseñado para aceptar las utilidades Tailwind, por lo que puedes modificar estilos sin escribir CSS personalizado.
Control de servicios públicos primero
Utilice clases de Tailwind como text-lg, px-6 y bg-base-200 para personalizar componentes en minutos.
Empieza en segundos
Dos imports y listo para construir. Sin herramientas de build, sin configuración, sin runtime.
Paso 1
Instalar a través de npm
Añade Frutjam a tu proyecto con un solo comando.
npm install frutjam |
Paso 2
Importa en tu CSS
Agrega Tailwind y Frutjam a tu hoja de estilo.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Paso 3
Utilice componentes limpios
Escriba clases semánticas en lugar de largas cadenas de servicios.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Véalo en acción
Componentes reales, código real: copiar y enviar.
Botones
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Insignias y etiquetas
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Tamaños de botones
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Tarjeta
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
¿Por qué utilizar la biblioteca Frutjam UI?
Frutjam es una biblioteca de interfaz de usuario CSS gratuita y de código abierto creada con Tailwind CSS v4 que se centra en la accesibilidad y un desarrollo más rápido. No requiere una configuración de JavaScript complicada ni paquetes JS enormes, lo que la convierte en una alternativa liviana a DaisyUI para equipos que necesitan componentes compatibles con WCAG sin sobrecarga de JavaScript.
Simplemente agrega @import "frutjam" a tu hoja de estilo para comenzar. Frutjam elimina la necesidad de largas listas de clases CSS de Tailwind en su HTML; simplemente use clases semánticas limpias para construir componentes fácilmente. Personalice fácilmente los temas utilizando variables CSS simples y todos los componentes se actualizarán al instante.
Estándares W3C
HTML limpio y válido para aplicaciones web modernas.
Accesibilidad primero
Cada componente se construye pensando en todo.
Contraste de color
Los componentes pasan las comprobaciones de contraste de color WCAG AA/AAA desde el primer momento.
Compatible con SEO
Marcado semántico para una mejor visibilidad en los motores de búsqueda.
Apto para desarrolladores
API simple, intuitiva y de fácil integración.
CSS y HTML primero
Sin bloqueo de JavaScript: el estilo y la estructura son lo primero.
Soporte Tailwind CSS
Funciona perfectamente con su flujo de trabajo existente de Tailwind.
Soporte RTL
Totalmente compatible con idiomas de derecha a izquierda.
Sensible
Se ve genial en cualquier dispositivo, cualquier tamaño de pantalla.
Mantenido activamente
Nuevos componentes, actualizaciones y soporte comunitario.
Temas profesionales
Cambia entre los modos claro y oscuro, o crea el tuyo propio.
Diseños y componentes prediseñados
Bloques de construcción listos para usar para cualquier proyecto.
Código abierto
Con licencia del MIT e impulsado por la comunidad.
Soporte de complementos
Amplíe Frutjam con complementos útiles como Markdown Text Editor.
Reducir el tamaño del DOM
Una gran cantidad de elementos anidados o innecesarios pueden hacer que el renderizado se ralentice. Simplifique la estructura de sus componentes y mejore el rendimiento y la mantenibilidad.
100/100 en Google PageSpeed Insights
Logre un 100 perfecto en rendimiento, accesibilidad, mejores prácticas y SEO utilizando la biblioteca de interfaz de usuario de Frutjam. Este sitio web está construido íntegramente con la interfaz de usuario de Frutjam y obtuvo una puntuación general de 100/100 en Google PageSpeed Insights.
Los sitios web se ejecutan más rápido, brindan una mejor experiencia de usuario y tienen clasificaciones de búsqueda más altas. En la web actual impulsada por la IA, se priorizan los sitios más rápidos: las herramientas de IA escanean frecuentemente los sitios web en tiempo real y prefieren páginas rápidas y eficientes que no desperdicien recursos computacionales. Construya de forma más inteligente con una biblioteca de interfaz de usuario preparada para el futuro.
CSS puro, no se necesita JavaScript. Independiente del marco y totalmente compatible en todas partes.
La biblioteca Frutjam UI no requiere grandes paquetes de JavaScript ya que está escrita en CSS puro. Esto hace que su proyecto sea liviano y esté optimizado para tiempos de carga más rápidos y un rendimiento más fluido. Funciona perfectamente con cualquier marco web o backend, ya sea que esté usando React, Vue, Angular, Next.js, Django, HTMX, Laravel o simplemente HTML.
Para marcos modernos
Tu marco es rápido. Mantenlo así.
Next.js, Svelte y Vue están diseñados para ofrecer un rendimiento y SEO increíbles: renderizado de servidor, JS mínimo e hidratación instantánea. Pero en el momento en que agregas una biblioteca de componentes pesados llena de JavaScript inflado por algo tan simple como un modal, cambias todo lo que prometen esos marcos.
Frutjam es primero CSS y nativo por diseño. Sin paquetes de JavaScript. Sin sobrecarga de tiempo de ejecución. Sin cambios de diseño. El límite de rendimiento de su marco se convierte en su rendimiento real, no sólo teórico.
Cambio de diseño cero
Los componentes CSS puros se procesan instantáneamente con la página; no se necesita JavaScript para pintar la interfaz de usuario. Su cambio de diseño acumulativo (CLS) permanece en 0, preservando esa puntuación perfecta de PageSpeed.
Sin gastos generales de JS
Cada KB de JavaScript que su marco guarda de la división de paquetes, Frutjam nunca lo vuelve a agregar. Botones, tarjetas, modales, insignias, todo en CSS. Su tiempo para interactuar se mantiene rápido.
SEO que ofrece
HTML semántico, marcado válido W3C y contraste de color WCAG listos para usar. Los motores de búsqueda leen una estructura limpia. Combine un marco moderno con Frutjam y sus páginas se clasificarán y funcionarán.
No más HTML feo, menos nombres de clases, fácil mantenimiento y desarrollo más rápido.
No más clases desordenadas: una clase lo hace todo. En lugar de escribir un montón de clases cada vez para cada elemento, cada página y cada proyecto, una y otra vez, utilice los nombres de clases de los componentes de Frutjam para facilitar el mantenimiento y el escalado y acelerar el desarrollo sin el dolor de cabeza de las clases desordenadas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Temas y personalización
Frutjam utiliza variables CSS simples para la tematización. Cambie una variable y todos los componentes se actualizarán instantáneamente: sin reconstrucción ni cambios de clase.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Qué puedes personalizar
Bandera
Primario, secundario, acento, error, éxito, advertencia y todos los tonos básicos, todo a través de una única variable CSS cada uno.
Radio del borde
--radius-base escala todos los componentes a la vez: cambia una variable y todos los elementos se actualizan.
Tipografía
Familia de fuentes, escala de tamaño y altura de línea: configure su sistema tipográfico una vez y todos los componentes lo heredarán.
Espaciado y tamaño
Variantes de tamaño y relleno de componentes: utilice modificadores de tamaño integrados o anule los tokens de espaciado globalmente.
Biblioteca de componentes
Una colección cada vez mayor de componentes prediseñados y accesibles para cada caso de uso.
Botones y formularios
Variantes de botones, entradas, casillas de verificación, selecciones y diseños de formulario completo.
Modales y diálogos
Diálogos modales, cajones y mensajes de confirmación accesibles.
Navegación
Barras de navegación, barras laterales, rutas de navegación y navegación por pestañas.
Tarjetas y diseños
Variantes de tarjetas, sistemas de cuadrículas y esqueletos de diseño de páginas.
Alertas y brindis
Alertas de estado, pancartas de notificación y mensajes de comentarios en línea.
Insignias y etiquetas
Insignias de estado, etiquetas de categoría y componentes de etiquetas.
Listas y tablas
Tablas de datos, listas ordenadas/desordenadas y listas de definiciones.
Plugins
Editor Markdown, resaltador de sintaxis y extensiones más útiles.
Complemento comunitario
Amado por los desarrolladores backend. Editor Markdown nativo.
La mayoría de los editores rompen el flujo de trabajo web estándar. MarkdownEditor lo adopta: se ubica directamente encima de un <textarea> para que su backend nunca sepa que algo ha cambiado. Simplemente funciona con form método="POST", acceso DOM estándar y todos los marcos de servidor listos para usar.
Reemplace un <textarea> simple con una línea de JS y sus usuarios obtendrán una experiencia 10 veces mejor mientras su controlador Django, Laravel o PHP permanece exactamente como estaba.
-
No se necesita vinculación de datos: funciona con
método de formulario="POST"listo para usar -
Acceso estándar: lee y escribe con
element.valuecomo cualquier entrada - Independiente del backend: PHP, Django, Node.js, Laravel, Rails: todos simplemente leen una cadena simple
- ~116 KB: modo híbrido WYSIWYG + plano, RTL, carga de imágenes, vista previa en vivo, cero conflictos CSS
Demostración en vivo: pruébelo:
Reemplazo directo: una clase, una línea de JS. Backend sin cambios.
Integración de formularios nativos
Mejora un <textarea> estándar. Envíelo con un <form> normal y acceda al contenido a través de request.POST['name']. Sin preventDefault(), sin construcción FormData.
Carga de imágenes avanzada
Configure las cargas del servidor a través de API. Las imágenes van directamente a su CDN: sin exceso de Base64 en su base de datos, sin penalizaciones de SEO, sin cargas útiles que consumen mucha memoria.
Rendimiento alto
Actualizaciones de vista previa sin rebotes, cálculos de estilo en caché y manejo del teclado sin conflictos. Maneja miles de líneas sin retraso en la entrada y todos los estilos del editor tienen un alcance completo para que conviva de forma segura con cualquier marco CSS.
¿Cómo se compara Frutjam?
Vea cómo Frutjam se compara con Tailwind CSS, Bootstrap y DaisyUI como una alternativa gratuita y accesible.
| Característica | Frutjam | margaritaui | Viento de cola llano | Oreja |
|---|---|---|---|---|
| Solo CSS (no se requiere JavaScript) | ✓ | ✓ | ✓ | Parcial |
| Clases de componentes semánticos | ✓ | ✓ | ✗ | ✓ |
| Contraste WCAG AA garantizado en cada componente. | ✓ | Manual | Manual | Parcial |
| Funciona junto con las utilidades Tailwind | ✓ | ✓ | ✓ | ✗ |
| Tematización de variables CSS | ✓ | ✓ | ✓ | Limitado |
| 100/100 PageSpeed alcanzable | ✓ | ✓ | Varía | Varía |
| soporte RTL | ✓ | Parcial | Parcial | ✓ |
| Agnóstico del marco (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Tema a través de variables CSS simples, sin archivo de configuración | ✓ | Parcial | Manual | ✗ |
| Integración del editor de IA (MCP/contexto) | ✓ Gratis | Pagado | ✗ | ✗ |
Integración del editor de IA
¿Usando Claude Code, Cursor o Copiloto?
Cherry MCP conecta Frutjam directamente a su editor de IA. Obtenga código de componente preciso, nombres de clase correctos y documentos actualizados, sin copiar y pegar desde el navegador.
Pruebe Cherry MCPPreguntas frecuentes
Todo lo que necesitas saber sobre Frutjam.
¿Frutjam es de uso gratuito?
Sí, Frutjam tiene licencia del MIT y es completamente gratuito. Úselo en proyectos personales, trabajo de clientes y productos comerciales sin restricciones ni necesidad de atribución.
¿Frutjam es adecuado para proyectos comerciales?
Sí. Frutjam es de código abierto bajo la licencia MIT, lo que permite el uso gratuito en productos personales y comerciales sin regalías ni restricciones.
¿Frutjam reemplaza a Tailwind CSS?
No, Frutjam se basa en Tailwind. Piense en ello como una capa que agrega clases de componentes semánticos (.btn, .card, .badge) mientras mantiene todas las clases de utilidad Tailwind disponibles junto con ella.
¿Necesito JavaScript para usar Frutjam?
No se requiere JavaScript. Frutjam es CSS puro: componentes como botones, tarjetas, insignias y formularios funcionan completamente sin un tiempo de ejecución JS. Para patrones interactivos como modales o menús desplegables, combina bien con bibliotecas ligeras como Alpine.js o HTMX.
¿Puedo usar Frutjam con React, Vue o Angular?
Sí, Frutjam es completamente independiente del marco. Funciona con cualquier sistema de plantillas o marco JS, incluidos React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django y HTML simple. Simplemente importe el CSS y use las clases.
¿Frutjam es accesible para lectores de pantalla?
Sí. Frutjam sigue las pautas WAI-ARIA con roles apropiados, soporte de navegación con teclado y contraste de color WCAG AA/AAA listo para usar, lo que lo hace accesible para todos los usuarios sin configuración adicional.
¿Mejora PageSpeed al utilizar Frutjam?
Sí. El enfoque CSS de Frutjam evita por completo el bloqueo de renderizado de JavaScript. Combinado con marcado válido por W3C, contraste de color adecuado y semántica HTML nativa, contribuye directamente a mejores Core Web Vitals y una puntuación de PageSpeed de 100/100.
¿Cómo personalizo los colores, las fuentes y el radio?
Anule las variables CSS en su hoja de estilo: establezca --color-primary, --font-base, --radius-base y más. Cada componente recoge el cambio instantáneamente sin una reconstrucción ni ningún cambio de clase en su HTML.
Del blog
Reflexiones sobre la creación de Frutjam y el primer enfoque de CSS para la interfaz de usuario.
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
Código abierto y gratuito para siempre
Únete a la comunidad
Frutjam es de código abierto y está impulsado por la comunidad. Cada componente, solución e idea de la comunidad lo hace mejor para todos.
¿Encontraste un error? ¿Tiene una solicitud de función? ¿Quiere contribuir con un componente o mejorar los documentos? Nos encantaría tenerte.