Instalação

Instale Frutjam, a biblioteca Tailwind CSS UI somente CSS, em minutos. Duas importações, zero JavaScript, componentes acessíveis WCAG prontos para uso. Funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.

Como instalar a biblioteca Frutjam UI no projeto Tailwind CSS?

Certifique-se de ter um projeto Tailwind CSS instalado, bem como Node e NPM em seu computador. Frutjam funciona com Tailwind versão 4.

Instale o frutjam como um pacote Node executando o seguinte comando:

npm i -D frutjam

Adicione Frutjam ao seu input.css usando a diretiva @plugin:

1
2

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

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 - funciona com HTMX e CSS puros, sem necessidade de JavaScript. Elementos HTMX nativos como <dialog>, <details> e <input type="checkbox"> lidam 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 React - frutjam/react

Wrappers Thin React em torno das mesmas chamadas DOM nativas. Cada gancho retorna um ref que 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.

Usando um CDN

Use a versão CDN da biblioteca frutjam UI para integração rápida e fácil sem configuração local. Use esta versão CDN do frutjam apenas para fins de desenvolvimento, não em produção.

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óximas etapas

Depois de instalado, experimente o componente de botão para ver o Frutjam em ação ou explore a biblioteca de componentes completa.

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