Instalación

Instale la biblioteca Frutjam UI solo CSS con Tailwind CSS v4, UnoCSS o ningún paso de compilación. Más de 65 componentes accesibles, cero JavaScript, WCAG AA. Funciona con Django, HTMX, Laravel, React y cualquier pila.

Instalar

npm i -D frutjam

Luego elija la línea a continuación que coincida con su configuración. Todos te dan los mismos componentes.

Viento de cola CSS v4

Necesitas un trabajo CSS de viento de cola proyecto, además Nodo y npm. Frutjam requiere Tailwind 4.

Añade Mermelada de Frutos a tu input.css con el @plugin directiva:

1
2

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

Esa es toda la configuración. Los más de 65 componentes están disponibles de inmediato y Tailwind envía solo los que utiliza su marcado.

UnoCSS

Frutjam incluye un ajuste preestablecido, por lo que UnoCSS genera solo los componentes que usa, de la misma manera que lo hace el complemento Tailwind.

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

Cada clase funciona como lo hace en Tailwind, al igual que las variantes:

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

Agregar presetAttributify() y el nombre del componente se convierte en un atributo, y cada valor se trata como una variante del mismo:

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

La segunda línea necesita transformerVariantGroup() para la sintaxis del corchete. Tenga en cuenta que un atributo como btn no es HTML válido, por lo que si valida su marcado, utilice el formulario de clase o UnoCSS un- prefijo.

Opciones

El componente de enlace necesita una línea de configuración.

Delicias UnoCSS link como variante, para el CSS :link pseudoclase, y sus separadores predeterminados incluyen -. Entonces link-2xl se lee como "2xl, cuando no se visita" en lugar de como un nombre de clase, y no se genera nada. Afecta sólo a este componente y sólo al link-* modificadores.

O dígale a UnoCSS que se divida solo con dos puntos:

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

O use un prefijo, que pone algo distinto a link al frente del nombre:

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

Todos los demás componentes no se ven afectados. link es el único de los 57 cuyo nombre choca con una pseudoclase.

Sin motor utilitario

Frutjam está construido con Tailwind, pero los componentes se compilan en CSS normal que lee propiedades personalizadas. Si su proyecto no utiliza ningún motor de utilidad, importe la hoja de estilo en lugar del complemento:

import 'frutjam/css';

Esa es toda la configuración. Cada clase de componente funciona, los temas cambian con data-theme como de costumbre, y no se requiere nada más. Tiene 30 KB comprimidos con gzip y contiene los estilos básicos, ambos temas y los más de 65 componentes.

En su lugar, introduzca solo lo que necesita:

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

O sin ningún paso de construcción:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Sin paso de construcción

Coloque una etiqueta y comience a escribir marcas. Úselo para un prototipo o una página que no cree, no para producción, ya que incluye todos los componentes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Para experimentar con las utilidades de Tailwind en la misma página, agregue la compilación del navegador de Tailwind junto a ella:

1
2

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

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, no se necesita JavaScript. Elementos HTML nativos como <dialog>, <details>, y <input type="checkbox"> Manejar la interactividad donde 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 usted adjunta al elemento y los 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.

Próximos pasos

Una vez instalado, prueba el componente del botón para ver Frutjam en acción, o explorar el completo biblioteca de componentes.

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