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.
A Frutjam fornece mais de 52 componentes Tailwind CSS somente CSS – botões, modais, formulários, navegação, exibição de dados e muito mais – desenvolvidos para Tailwind CSS v4. Cada componente usa nomes de classes semânticas (.btn, .card, .badge) que funcionam junto com qualquer classe de utilitário Tailwind. Nenhum JavaScript é incluído, nenhum contexto React é necessário e nenhum plug-in PostCSS é necessário além do próprio Tailwind. Cada componente é WCAG AA acessível imediatamente, com pares de cores OKLCH ajustados manualmente que garantem contraste legível em todas as superfícies. Como Frutjam é apenas CSS e independente de estrutura, a mesma marcação HTMX funciona em modelos Django, respostas HTMX, Laravel Blade, Rails ERB, React JSX ou HTMX estático simples - sem modificação.
Novo no Frutjam?
Comece em segundos: duas importações e você estará pronto para construir.
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 recolhível Tailwind CSS somente CSS usando o elemento nativo `<details>`. 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 CSS Tailwind somente CSS usando o elemento nativo `<dialog>`. 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
Paginação CSS Tailwind somente CSS para páginas numeradas, setas anterior/próxima, lacunas de reticências, entradas de rádio acessíveis e uma seleção de salto de página. Não é necessário JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
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 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.
Perguntas frequentes
Todos os componentes do Frutjam são somente CSS?
Sim – a grande maioria dos componentes é CSS puro com zero JavaScript. Botões, emblemas, cartões, formulários, alertas, modais, gavetas, guias e muito mais funcionam com HTML e CSS simples. Um pequeno número de componentes que não possuem equivalente HTML nativo (posicionamento de brinde, filtragem de caixa de combinação, controles de carrossel) oferecem auxiliares JS leves opcionais, mas o layout e estilo CSS não requerem nenhum JavaScript.
Os componentes Frutjam funcionam com Django, HTMX e Laravel?
Sim - Frutjam é independente de estrutura. Como cada componente é somente CSS, ele funciona com qualquer pilha renderizada pelo servidor. Modelos Django, HTMX, Laravel Blade, Rails ERB, HTMX simples - se você pode gerar HTMX, Frutjam funciona. Sem React, sem pipeline de construção, sem necessidade de estrutura JavaScript.
Os componentes WCAG são acessíveis?
Sim — o contraste WCAG AA é garantido em todos os componentes. Cada par de cores (--cor-primária / --cor-on-primary, etc.) é ajustado manualmente no OKLCH para atender aos requisitos de contraste WCAG AA. Elementos HTML semânticos são usados por toda parte - <dialog> nativo para modais, <details> para acordeões e atributos ARIA adequados quando necessário.
Como os componentes Frutjam se comparam ao DaisyUI?
Ambas são bibliotecas de componentes Tailwind CSS somente CSS, mas Frutjam é construído especificamente para Tailwind CSS v4, usa tokens de cores OKLCH com pares de contraste WCAG AA garantidos e fornece um servidor MCP gratuito (Cherry) para integração do editor AI - o equivalente do DaisyUI (Blueprint) é pago. Frutjam também fornece pares de tokens on-{color} explícitos em vez de calcular cores de primeiro plano em tempo de execução.
Preciso instalar algo além do Tailwind CSS?
Apenas uma linha extra. Adicione @plugin "frutjam"; ao seu arquivo CSS após @import "tailwindcss"; e instale via npm i -D frutjam. É isso aí - sem plug-ins PostCSS, sem configuração de JavaScript, sem folha de estilo separada para importar. Todos os componentes estão disponíveis imediatamente e são alterados automaticamente pelo Tailwind.
Posso usar componentes Frutjam com React ou Next.js?
Sim. Como o Frutjam é somente CSS, você usa componentes da mesma maneira em qualquer pilha – basta aplicar os nomes das classes. Para os poucos componentes que se beneficiam do controle JavaScript (abertura/fechamento modal, brinde, carrossel), o Frutjam fornece ganchos React opcionais (frutjam/react) que envolvem chamadas DOM nativas sem dependências extras.