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.
No hay una configuración complicada: utiliza la misma configuración que Tailwind CSS, por lo que puedes seguir con lo que ya sabes. Y si está familiarizado con Bootstrap, los nombres de los componentes le resultarán intuitivos y fáciles de recordar.
Puede utilizar prefijos de variantes de Tailwind CSS como dark:, sm:, lg:, xl:, rtl: y ltr: con cualquiera de nuestras clases de utilidad.
Ingeniería de interfaz de usuario moderna con un marco que prioriza la velocidad
Frutjam es una biblioteca de interfaz de usuario Tailwind CSS v4 de código abierto: una abstracción de alto nivel diseñada para facilitar el desarrollo web rápido. Piense en ello como un conjunto de herramientas que transforma clases de utilidades sin procesar en componentes semánticos listos para producción, lo que le permite crear interfaces modernas con mucho menos código.
¿Qué problemas resuelve?
La mayoría de los desarrolladores se enfrentan a la fatiga de las utilidades
al pasar horas escribiendo largas cadenas de clases para elementos básicos como botones y entradas. Frutjam elimina esa fricción proporcionando un ecosistema plug-and-play
.
- Repetición redundante: en lugar de reinventar la rueda para cada proyecto, obtienes componentes prediseñados que manejan estados de enfoque, transiciones de desplazamiento y comportamientos de respuesta listos para usar.
- Inflación del rendimiento: a diferencia de los frameworks JavaScript pesados, Frutjam prioriza un enfoque "CSS puro", lo que garantiza que su aplicación siga siendo liviana y rápida.
- Obstáculos de cumplimiento: crear interfaces accesibles y compatibles con SEO es complejo. La biblioteca utiliza marcado semántico y HTML limpio para garantizar que su sitio sea inherentemente compatible con el W3C.
Frutjam es para ti si:
- Está cansado de escribir miles de nombres de clases de servicios públicos repetidamente
- Necesidad de enviar páginas de destino y aplicaciones SaaS accesibles y compatibles con SEO en un tiempo récord
- ¿Quiere un sistema de diseño coherente que sea totalmente compatible en cualquier entorno?
- Prefiere una solución ligera, independiente del marco y sin dependencias obligatorias de JavaScript.
Funciones principales para un desarrollo rápido
El kit de herramientas sigue una filosofía de copiar, pegar y construir
y ofrece todo lo necesario para una ingeniería frontend de nivel profesional.
- Extensa biblioteca de componentes: incluye elementos esenciales como barras de navegación, modales, acordeones y tablas de datos refinadas.
- Bloques preensamblados: ahorre horas con bloques de diseño para secciones de precios, encabezados y áreas de héroes
Berry
Sistema de temas: cambie entre temas integrados como Snowberry (claro) y Darkberry (oscuro), o cree el suyo propio usando variables CSS de OKLCH.- Diseño que prioriza la accesibilidad: cada componente sigue las mejores prácticas para los roles de ARIA y la navegación con el teclado. Todos los pares de colores son valores OKLCH ajustados manualmente y verificados para pasar el contraste WCAG AA, no conjeturas calculadas automáticamente.
- Agnóstico del marco: funciona a la perfección ya sea que esté utilizando React, Next.js, Vue, Django, HTMX, Laravel o HTML estático simple.
Eficiencia Técnica
Al utilizar nombres de clases semánticas, puede reducir significativamente el tamaño de su HTML en comparación con los flujos de trabajo estándar que priorizan las utilidades. Esto da como resultado bases de código más limpias y fáciles de mantener que son más fáciles de administrar para los equipos a largo plazo. La biblioteca está construida estrictamente sobre Tailwind CSS, lo que garantiza que mantenga todo el poder de personalización del motor de la utilidad mientras gana la velocidad de un sistema basado en componentes.
¿Listo para empezar? Comience con la instalación →