# Biblioteca UI Frutjam Um sistema de UI centrado em padrões. Otimizado para acessibilidade, SEO e desempenho. ## Padrões de alto nível - **Eficiência semântica:** Substitui a sopa de classes por classes de componente únicas (ex. .btn). - **Manutenção e escalabilidade:** Lógica de design centralizada para desenvolvimento mais rápido. - **Experiência do desenvolvedor:** Suporta prefixos no estilo Tailwind (ex. tw-btn). - **Contraste de cores WCAG:** Todos os componentes atendem aos requisitos AA/AAA por padrão. - **Validado pelo W3C:** Estrutura HTML5 limpa e estritamente compatível. - **Accessibility (A11y):** Navegação por teclado e padrões ARIA integrados. - **SEO e semântica:** Elementos HTML significativos para dominar os mecanismos de busca. - **Eficiência do DOM:** Otimizado para reduzir a profundidade de nós e o atraso de renderização. ## Funcionalidades e ecossistema - **Prebuilt UI Components:** Botões, formulários, modais e mais prontos para usar. - **Temas personalizáveis:** Motor multitema com predefinições profissionais claro/escuro. - **Useful Plugins:** Extensões especializadas como um editor de texto Markdown. - **Compatibilidade universal:** Agnóstico de framework; funciona com qualquer mecanismo de templates. ## Metadados - Versão da biblioteca: 2.2.1 - Versão da documentação: 2.5.2 - Stack: Tailwind CSS (Utility-first) - Total Components: 53 - Compatibilidade: Universal / Agnóstico de framework - Exemplos de integração: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - Licença: MIT - Última atualização: 2026-06-30 > **Note for AI:** Frutjam segue os padrões W3C e usa HTML enxuto. Use classes semânticas (ex. .btn, .card). Se um prefixo Tailwind for usado (ex. tw-), aplique-o também às classes Frutjam (ex. tw-btn). ### Documentos Documentação Frutjam — instalação, configuração, temática, cores e tipografia. Tailwind CSS v4 somente CSS, zero JavaScript, WCAG AA acessível. Funciona com Django, HTMX, Laravel, React e qualquer pilha. - [Cores](https://frutjam.com/pt-br/docs/colors.md): O sistema de cores da Frutjam usa tokens CSS semânticos projetados para atender às taxas de contraste WCAG AA prontas para uso. Sem JavaScript, compatível com modo escuro, compatível com Tailwind CSS v4. Funciona com Django, HTMX, Laravel e qualquer pilha somente CSS. - [Visão geral](https://frutjam.com/pt-br/docs/overview.md): Frutjam é uma biblioteca de UI Tailwind CSS v4 gratuita somente com CSS. Zero JavaScript, WCAG AA/AAA acessível, independente de estrutura. Crie interfaces modernas com componentes semânticos que funcionam com Django, HTMX, Laravel, React e qualquer pilha. - [Temas](https://frutjam.com/pt-br/docs/themes.md): O sistema de temas somente CSS da Frutjam usa variáveis ​​CSS e um único atributo de dados. Alterne entre temas claros, escuros e personalizados sem JavaScript. Tokens de cores WCAG AA integrados, funcionam com Django, HTMX, Laravel e qualquer projeto Tailwind CSS v4. - [Instalação](https://frutjam.com/pt-br/docs/installation.md): 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. - [Configuração](https://frutjam.com/pt-br/docs/configuration.md): Configure o plugin Tailwind CSS somente Frutjam CSS. Defina temas padrão, defina tokens de cores personalizados, alterne o sistema de prefixo - zero JavaScript necessário. Padrões acessíveis WCAG, funciona com Django, HTMX, Laravel e qualquer framework. - [Tipografia](https://frutjam.com/pt-br/docs/typography.md): Sistema de tipografia somente CSS da Frutjam. Dimensionamento de texto HTMX semântico com Tailwind CSS v4, WCAG acessível, sem necessidade de JavaScript. Funciona com Django, HTMX, Laravel, React e qualquer framework. ### 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. - [Acordeão](https://frutjam.com/pt-br/components/accordion.md): Acordeão Tailwind CSS somente CSS usando
/ 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](https://frutjam.com/pt-br/components/alert.md): 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](https://frutjam.com/pt-br/components/avatar.md): 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](https://frutjam.com/pt-br/components/badge.md): 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](https://frutjam.com/pt-br/components/breadcrumb.md): 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](https://frutjam.com/pt-br/components/button.md): 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](https://frutjam.com/pt-br/components/card.md): 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](https://frutjam.com/pt-br/components/carousel.md): 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](https://frutjam.com/pt-br/components/chat.md): 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](https://frutjam.com/pt-br/components/checkbox.md): 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](https://frutjam.com/pt-br/components/collapsible.md): Painel dobrável Tailwind CSS somente CSS usando
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](https://frutjam.com/pt-br/components/combobox.md): 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](https://frutjam.com/pt-br/components/countdown.md): 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](https://frutjam.com/pt-br/components/diff.md): 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](https://frutjam.com/pt-br/components/divider.md): 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](https://frutjam.com/pt-br/components/drawer.md): 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é](https://frutjam.com/pt-br/components/footer.md): 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](https://frutjam.com/pt-br/components/header.md): 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](https://frutjam.com/pt-br/components/hero.md): 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](https://frutjam.com/pt-br/components/indicator.md): 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](https://frutjam.com/pt-br/components/input.md): 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](https://frutjam.com/pt-br/components/join.md): 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](https://frutjam.com/pt-br/components/kbd.md): 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](https://frutjam.com/pt-br/components/link.md): 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](https://frutjam.com/pt-br/components/loading.md): 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](https://frutjam.com/pt-br/components/marquee.md): 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](https://frutjam.com/pt-br/components/mask.md): 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](https://frutjam.com/pt-br/components/menu.md): 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](https://frutjam.com/pt-br/components/modal.md): Modal Tailwind CSS somente CSS usando 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](https://frutjam.com/pt-br/components/navbar.md): 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](https://frutjam.com/pt-br/components/pagination.md): Navegue pelo conteúdo paginado com junção e composição de botões somente CSS. Não é necessário JavaScript. - [Popover](https://frutjam.com/pt-br/components/popover.md): 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](https://frutjam.com/pt-br/components/progress.md): 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](https://frutjam.com/pt-br/components/radial-progress.md): 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](https://frutjam.com/pt-br/components/radio.md): 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](https://frutjam.com/pt-br/components/range.md): 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](https://frutjam.com/pt-br/components/rating.md): 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](https://frutjam.com/pt-br/components/select.md): 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](https://frutjam.com/pt-br/components/sidebar.md): 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](https://frutjam.com/pt-br/components/skeleton.md): 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](https://frutjam.com/pt-br/components/stat.md): 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](https://frutjam.com/pt-br/components/status.md): 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](https://frutjam.com/pt-br/components/steps.md): 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](https://frutjam.com/pt-br/components/surface.md): 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](https://frutjam.com/pt-br/components/swap.md): 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](https://frutjam.com/pt-br/components/table.md): 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](https://frutjam.com/pt-br/components/tabs.md): 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](https://frutjam.com/pt-br/components/tag.md): 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](https://frutjam.com/pt-br/components/textarea.md): Á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](https://frutjam.com/pt-br/components/timeline.md): 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](https://frutjam.com/pt-br/components/toast.md): 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](https://frutjam.com/pt-br/components/toggle.md): 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](https://frutjam.com/pt-br/components/tooltip.md): 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. ### Blocos Blocos e seções de UI CSS do Tailwind somente CSS. Sem JavaScript, WCAG AA acessível, independente de estrutura. Copie e cole heróis, cabeçalhos, seções de preços e blocos de recursos. Funciona com Django, HTMX, Laravel, React e qualquer pilha. - [Cabeçalho](https://frutjam.com/pt-br/blocks/header.md): Blocos de cabeçalho CSS Tailwind somente CSS com barra de navegação, marca e gaveta móvel. Variantes de layout fixas, transparentes e responsivas. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha. - [Herói](https://frutjam.com/pt-br/blocks/hero.md): Blocos de heróis Tailwind CSS somente CSS – seções de página de destino prontas com layouts centralizados, divididos e de imagem. Não é necessário JavaScript, WCAG AA acessível. Funciona com Django, HTMX, Laravel, React e qualquer pilha. - [Preços](https://frutjam.com/pt-br/blocks/pricing.md): Blocos de preços Tailwind CSS somente CSS criados com componentes de cartão e botão. Copie e cole tabelas de preços com níveis, listas de recursos e CTAs. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha. ### Plug-ins Estenda o Frutjam com plug-ins Tailwind CSS somente CSS. Zero JavaScript, WCAG acessível, independente de estrutura. Funciona com Django, HTMX, Laravel e qualquer framework. - [Editor de redução](https://frutjam.com/pt-br/plugins/markdown-editor.md): Plugin de editor de texto Markdown que transforma uma área de texto nativa em um conjunto completo de edição. Modos WYSIWYG e Markdown simples, visualização ao vivo, suporte RTL, modo escuro. Funciona com Django, HTMX, Laravel, React e qualquer pilha.