Componentes
Componentes Tailwind CSS gratuitos apenas com CSS com acessibilidade WCAG AA/AAA integrada. Não é necessário JavaScript, é independente de estrutura e é compatível com Django, HTMX, Laravel, React, Vue e qualquer pilha. Pronto para usar e fácil de personalizar.
Frutjam ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
Acordeão
Acordeão Tailwind CSS somente CSS usando <details>/<summary> nativo. Expanda e recolha seções de conteúdo sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Alerta
Alerta Tailwind CSS somente CSS com variantes de informações, sucesso, aviso e erro. Estilo suave, slot de ícone e padrão descartável. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
avatar
Avatar Tailwind CSS somente CSS para imagens de perfil. Tamanhos xs–xl, empilhamento de grupo e indicador de status online/offline. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Distintivo
Emblema Tailwind CSS somente CSS com variantes primária, secundária, sotaque, informação, sucesso, aviso e erro. Estilos suaves, de contorno e fantasma, tamanhos xs–lg. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Pão ralado
Navegação de trilha CSS Tailwind somente CSS com separadores personalizados e marcação de pontos de referência acessíveis. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.
Botão
Botão Tailwind CSS somente CSS com variantes primária, secundária, sotaque, fantasma, contorno e suave. Tamanhos xs – xl, estado de carregamento, desativado e botões de ícone. Somente CSS, WCAG AA, funciona com Django, HTMX, Laravel, React.
Cartão
Cartão CSS Tailwind somente CSS com estilos de contorno, sombra e planos. Tamanhos compactos, padrão e grandes. Conteúdo do cartão, título do cartão e slots de rodapé do cartão. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Carrossel
Carrossel CSS Tailwind somente CSS usando scroll-snap. Layout de slide horizontal com controles de navegação e sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Bater papo
Componente de bolha de bate-papo Tailwind CSS somente CSS. Posições inicial e final para mensagens enviadas e recebidas, com slots de avatar e carimbo de data/hora. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Caixa de seleção
Caixa de seleção Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, estado indeterminado. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Dobrável
Painel dobrável Tailwind CSS somente CSS usando <details> nativo. Mostre e oculte seções de conteúdo sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Caixa de combinação
Caixa de combinação Tailwind CSS somente CSS com filtragem de pesquisa ao vivo e lista suspensa acessível. Navegação pelo teclado, variantes de cores. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Contagem regressiva
Temporizador de contagem regressiva Tailwind CSS somente CSS. Exibição de números animados para dias, horas, minutos e segundos. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Diferença
Visualizador de diferenças CSS Tailwind somente CSS para comparação de conteúdo lado a lado com um divisor arrastável. Não é necessário JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Divisor
Divisor CSS Tailwind somente CSS – horizontal e vertical com rótulo centralizado opcional. Variantes de cores e tamanhos. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Gaveta
Gaveta CSS Tailwind somente CSS usando alternância de caixa de seleção nativa. Painel lateral deslizante para navegação ou filtros sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Rodapé
Rodapé CSS Tailwind somente CSS com layout de várias colunas, logotipo, links e slots de direitos autorais. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.
Cabeçalho
Cabeçalho de página CSS Tailwind somente CSS – layout da barra superior com marca, navegação e slots de ação. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Herói
Seção de herói Tailwind CSS somente CSS para páginas de destino. Layout de largura total com título centralizado, descrição e CTA. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Indicador
Indicador CSS Tailwind somente CSS para sobreposição de emblemas ou pontos em qualquer canto do elemento. Variantes de cores e posicionamento. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Entrada
Entrada CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, slots adicionais de prefixo e sufixo, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Juntar
Junção CSS Tailwind somente CSS para agrupar botões, entradas ou seleções em uma unidade conectada. Horizontais e verticais. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
KBD
Componente Tailwind CSS kbd somente CSS para exibir atalhos de teclado e combinações de teclas. Variantes de tamanho. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Link
Link CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e neutras. Passe o sublinhado e estilos simples. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Carregando
Indicador de carregamento Tailwind CSS somente CSS com animações de girador, pontos, anel e barras. Variantes de cor e tamanho, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Marquise
Letreiro CSS Tailwind somente CSS para rolagem horizontal de conteúdo e logotipos. Controle de velocidade e direção via CSS, sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Máscara
Máscara CSS Tailwind somente CSS para recortar imagens em formas - círculo, esquilo, coração, hexágono e muito mais. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Menu
Menu vertical Tailwind CSS somente CSS para listas de navegação. Estados de itens ativos, desativados e de ícone. Variantes de tamanho. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Modal
Modal Tailwind CSS somente CSS usando <dialog> nativo. Dimensionamento responsivo, pano de fundo e armadilha de foco. Nenhum JavaScript para uso básico. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Barra de navegação
Barra de navegação Tailwind CSS somente CSS com marca, links de navegação e slots de ação. Variantes pegajosas e transparentes. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Paginação
Navegue pelo conteúdo paginado com junção e composição de botões somente CSS. Não é necessário JavaScript.
Popover
Popover CSS Tailwind somente CSS usando a API popover nativa. Painel de conteúdo flutuante para dicas de ferramentas e menus suspensos. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Progresso
Barra de progresso Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs – xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Progresso Radial
Progresso radial Tailwind CSS somente CSS - anel de progresso circular com exibição de porcentagem. Variantes de cor e tamanho, sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Rádio
Botões de opção Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs – xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Faixa
Controle deslizante de intervalo CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs – xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Avaliação
Componente de classificação de estrela e coração do Tailwind CSS somente CSS. Tamanhos xs – xl, suporte para meia estrela, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Selecione
Menu suspenso de seleção de CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Barra lateral
Barra lateral Tailwind CSS somente CSS para painéis de navegação laterais. Dobrável, com estados de itens de navegação e títulos de seção. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Esqueleto
Carregador de esqueleto CSS Tailwind somente CSS para UI de espaço reservado. Formas de círculo, retângulo e linha de texto com animação de pulso. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Estatística
Estatística CSS do Tailwind somente CSS para exibir métricas. Valor, rótulo, descrição e slots de ícone. Layout de grade responsivo. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Status
Indicador de pontos de status Tailwind CSS somente CSS com variantes de cores primárias, de sucesso, de aviso e de erro. Tamanhos xs – xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Passos
Etapas Tailwind CSS somente CSS para assistentes de várias etapas e indicadores de progresso. Layout horizontal e vertical, variantes de cores por etapa. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Superfície
Superfície Tailwind CSS somente CSS para aplicar cores de fundo e texto temáticas a um contêiner. Todas as variantes de cores. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Trocar
Troca de CSS Tailwind somente CSS para alternar entre dois elementos. Inverta, gire e esmaeça animações, sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Mesa
Tabela CSS Tailwind somente CSS com listras de zebra, tamanhos compactos e padrão, colunas fixadas e estados de foco de linha. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Guias
Guias Tailwind CSS somente CSS com variantes de estilo de borda, levantada, caixa e pílula. Estado e tamanhos ativos, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Marcação
Tag CSS Tailwind somente CSS (chip) com variantes de cores, estilo suave e botão removível. Tamanhos xs–lg. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Área de texto
Área de texto Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Linha do tempo
Linha do tempo Tailwind CSS somente CSS para listas de eventos cronológicos. Layout vertical com slots de ícone, conteúdo e linha de conector. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Brinde
Brinde CSS Tailwind somente CSS para posicionamento de notificação - posicionamento superior, inferior, inicial, final e central. Sem JavaScript para layout. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Alternar
Chave seletora Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs – xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Dica
Dica de ferramenta CSS do Tailwind somente CSS com posicionamento superior, inferior, esquerdo e direito. Variantes de cores, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.