Instalación

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.

¿Cómo instalar la biblioteca Frutjam UI en el proyecto Tailwind CSS?

Asegúrese de tener instalado un proyecto Tailwind CSS, así como Node y NPM en su computadora. Frutjam funciona con Tailwind versión 4.

Instale frutjam como un paquete Node ejecutando el siguiente comando:

npm i -D frutjam

Añade Frutjam a tu input.css usando la directiva @plugin:

1
2

@import "tailwindcss";
@plugin "frutjam";

JavaScript y React: opcional, no obligatorio

Frutjam es primero nativo y primero CSS. La gran mayoría de los componentes (botones, insignias, tarjetas, formularios, alertas y más) funcionan con HTML y CSS puros, sin necesidad de JavaScript. Los elementos HTML nativos como <dialog>, <details> y <input type="checkbox"> manejan la interactividad cuando los navegadores ya la admiten. Se puede acceder a todos los componentes WCAG AA desde el primer momento y funcionan con Django, HTMX, Laravel, React, Next.js y cualquier pila.

Una pequeña cantidad de componentes no tienen equivalente HTML nativo (notificaciones de sistema, filtrado de cuadros combinados, controles de carrusel). Sólo para esos casos, Frutjam envía ayudantes opcionales livianos.

Vainilla JS — frutjam/js

Asistentes de módulo ES independientes del marco para los componentes que los necesitan. Adjunte a cualquier elemento DOM, no se requiere marco.

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

Ganchos de reacción - frutjam/react

Envoltorios Thin React alrededor de las mismas llamadas DOM nativas. Cada gancho devuelve un ref que adjuntas al elemento y métodos para controlarlo, sin dependencias adicionales más allá de React.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

Disponible para: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Usando una CDN

Utilice la versión CDN de la biblioteca UI de frutjam para una integración rápida y sencilla sin configuración local. Utilice esta versión CDN de frutjam sólo con fines de desarrollo, no en producción.

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Próximos pasos

Una vez instalado, pruebe el componente de botón para ver Frutjam en acción, o explore la biblioteca de componentes completa.

¿Quiere comprender el pensamiento detrás del enfoque CSS-first de Frutjam? Lea por qué lo creamos de esta manera →