Instalação

Instale a biblioteca Frutjam UI somente CSS com Tailwind CSS v4, UnoCSS ou nenhuma etapa de construção. Mais de 65 componentes acessíveis, zero JavaScript, WCAG AA. Funciona com Django, HTMX, Laravel, React e qualquer pilha.

Instalar

npm i -D frutjam

Em seguida, escolha a linha abaixo que corresponde à sua configuração. Cada um fornece os mesmos componentes.

Tailwind CSS v4

Você precisa de um trabalho CSS do vento favorável projeto, mais Nó e npm. Frutjam requer Tailwind 4.

Adicione Frutjam ao seu input.css com o @plugin diretiva:

1
2

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

Essa é toda a configuração. Todos os mais de 65 componentes estão disponíveis imediatamente e o Tailwind envia apenas aqueles que sua marcação usa.

UnoCSS

O Frutjam vem com uma predefinição, então o UnoCSS gera apenas os componentes que você usa, da mesma forma que o plugin 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 classe funciona como no Tailwind, assim como as 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>

Adicionar presetAttributify() e o nome do componente se torna um atributo, com cada valor tratado como uma variante dele:

1
2

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

A segunda linha precisa transformerVariantGroup() para a sintaxe do colchete. Observe que um atributo como btn não é HTML válido, então se você validar sua marcação, use o formulário de classe ou o UnoCSS un- prefixo.

Opções

O componente de link precisa de uma linha de configuração

Guloseimas UnoCSS link como uma variante, para o CSS :link pseudoclasse e seus separadores padrão incluem -. Então link-2xl é lido como "2xl, quando não visitado" em vez de um nome de classe, e nada é gerado. Afeta apenas este componente e apenas o link-* modificadores.

Diga ao UnoCSS para dividir apenas com dois pontos:

1
2
3
4

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

Ou use um prefixo, que coloca algo diferente de link na frente do nome:

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

Todos os outros componentes não são afetados. link é o único dos 57 cujo nome colide com uma pseudoclasse.

Nenhum motor utilitário

Frutjam é construído com Tailwind, mas os componentes são compilados em CSS comum que lê propriedades personalizadas. Se o seu projeto não usa nenhum mecanismo utilitário, importe a folha de estilo em vez do plugin:

import 'frutjam/css';

Essa é toda a configuração. Cada classe de componente funciona, os temas mudam com data-theme como de costume, e nada mais é necessário. Ele tem 30 KB compactado e carrega os estilos básicos, ambos os temas e todos os mais de 65 componentes.

Em vez disso, extraia apenas o que você precisa:

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

Ou sem nenhuma etapa de construção:

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

Nenhuma etapa de construção

Insira uma tag e comece a escrever a marcação. Use-o para um protótipo ou página que você não constrói, nem para produção, pois ele envia todos os componentes.

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

Para experimentar os utilitários do Tailwind na mesma página, adicione a construção do navegador do Tailwind ao lado dele:

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 e React: opcional, não obrigatório

Frutjam é nativo primeiro e CSS primeiro. A grande maioria dos componentes: botões, emblemas, cartões, formulários, alertas e muito mais: funcionam com HTML e CSS puros, sem necessidade de JavaScript. Elementos HTML nativos como <dialog>, <details>, e <input type="checkbox"> lidar com a interatividade onde os navegadores já a suportam. Todos os componentes são WCAG AA acessíveis imediatamente e funcionam com Django, HTMX, Laravel, React, Next.js e qualquer pilha.

Um pequeno número de componentes não possui equivalente HTML nativo (notificações do sistema, filtragem de caixa de combinação, controles de carrossel). Apenas para esses casos, a Frutjam envia ajudantes opcionais leves.

Baunilha JS: frutjam/js

Auxiliares de módulo ES independentes de estrutura para os componentes que precisam deles. Anexe a qualquer elemento DOM, sem necessidade de estrutura.

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 reação: frutjam/react

Wrappers Thin React em torno das mesmas chamadas DOM nativas. Cada gancho retorna um ref você anexa ao elemento e métodos para controlá-lo, sem dependências extras além do próprio 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>
    </>
  )
}

Disponível para: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Próximas etapas

Depois de instalado, experimente o componente de botão para ver Frutjam em ação ou explorar a íntegra biblioteca de componentes.

Quer entender o pensamento por trás da abordagem CSS-first da Frutjam? Leia por que construímos desta maneira →