Open Source · Licença MIT · Gratuito para sempre
Biblioteca de componentes CSS Tailwind acessível e somente CSS para Fast Development
Frutjam é uma biblioteca UI open-source ultrarrápida criada para desenvolvedores que valorizam acessibilidade, padrões web e integração perfeita com Tailwind CSS.
Compatível com W3C, amigável ao SEO e fácil de usar.
Altamente customizável
Alimentado por classes utilitárias do Tailwind CSS
Frutjam oferece classes de componentes limpas prontas para uso, enquanto mantém todos os utilitários Tailwind disponíveis para customização. Altere espaçamento, cores, layout e interações facilmente com classes utilitárias nos componentes Frutjam.
Componentes personalizáveis
Cada componente Frutjam é projetado para aceitar utilitários Tailwind, para que você possa ajustar estilos sem escrever CSS personalizado.
Controle que prioriza a utilidade
Use classes Tailwind como text-lg, px-6 e bg-base-200 para personalizar componentes em minutos.
Comece em segundos
Dois imports e você está pronto para construir. Sem ferramentas de build, sem configuração, sem runtime.
Passo 1
Instalar via npm
Adicione Frutjam ao seu projeto com um único comando.
npm install frutjam |
Etapa 2
Importe no seu CSS
Adicione Tailwind e Frutjam à sua folha de estilo.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Etapa 3
Use componentes limpos
Escreva classes semânticas em vez de longas cadeias de utilidades.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Veja em ação
Componentes reais, código real – copie e envie.
Botões
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Emblemas e etiquetas
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Tamanhos de botão
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Cartão
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Por que usar a biblioteca Frutjam UI?
Frutjam é uma biblioteca de UI gratuita e de código aberto somente CSS construída com Tailwind CSS v4 que se concentra na acessibilidade e no desenvolvimento mais rápido. Ele não requer configuração complicada de JavaScript ou grandes pacotes JS – o que o torna uma alternativa leve ao DaisyUI para equipes que precisam de componentes compatíveis com WCAG sem sobrecarga de JavaScript.
Basta adicionar @import "frutjam" à sua folha de estilo para começar. Frutjam elimina a necessidade de longas listas de classes CSS do Tailwind em seu HTML; basta usar classes semânticas limpas para construir componentes facilmente. Personalize temas facilmente usando variáveis CSS simples e todos os componentes são atualizados instantaneamente.
Padrões W3C
HTML limpo e válido para aplicativos da web modernos.
Acessibilidade em primeiro lugar
Cada componente é construído pensando em tudo.
Contraste de cores
Os componentes passam nas verificações de contraste de cores WCAG AA/AAA imediatamente.
SEO amigável
Marcação semântica para melhor visibilidade nos mecanismos de busca.
Amigável ao desenvolvedor
API simples e intuitiva e fácil integração.
CSS e HTML primeiro
Sem dependência de JavaScript – estilo e estrutura vêm em primeiro lugar.
Suporte CSS Tailwind
Funciona perfeitamente com seu fluxo de trabalho existente do Tailwind.
Suporte RTL
Totalmente compatível com idiomas da direita para a esquerda.
Responsivo
Fica ótimo em qualquer dispositivo, em qualquer tamanho de tela.
Ativamente mantido
Novos componentes, atualizações e suporte da comunidade.
Temas Profissionais
Alterne entre os modos claro e escuro ou crie o seu próprio.
Layouts e componentes pré-construídos
Blocos de construção prontos para uso para qualquer projeto.
Código aberto
Licenciado pelo MIT e dirigido pela comunidade.
Suporte a plug-ins
Estenda o Frutjam com plug-ins úteis como o Markdown Text Editor.
Reduzir o tamanho do DOM
Um grande número de elementos aninhados ou desnecessários pode causar lentidão na renderização. Simplifique a estrutura de seus componentes e melhore o desempenho e a capacidade de manutenção.
100/100 no Google PageSpeed Insights
Alcance 100 perfeitos em desempenho, acessibilidade, práticas recomendadas e SEO usando a biblioteca Frutjam UI. Este site foi construído inteiramente com Frutjam UI e obteve uma pontuação geral de 100/100 no Google PageSpeed Insights.
Os sites funcionam mais rápido, proporcionam uma melhor experiência ao usuário e têm classificações de pesquisa mais altas. Na web atual orientada por IA, sites mais rápidos são priorizados – as ferramentas de IA frequentemente verificam sites em tempo real e preferem páginas rápidas e eficientes que não desperdiçam recursos computacionais. Crie de maneira mais inteligente com uma biblioteca de UI pronta para o futuro.
CSS puro, sem necessidade de JavaScript. Independente de estrutura e totalmente compatível em qualquer lugar.
A biblioteca Frutjam UI não requer grandes pacotes de JavaScript, pois é escrita em CSS puro. Isso torna seu projeto leve e otimizado para tempos de carregamento mais rápidos e desempenho mais suave. Funciona perfeitamente com qualquer framework web ou backend, quer você esteja usando React, Vue, Angular, Next.js, Django, HTMX, Laravel ou simplesmente HTMX simples.
Para estruturas modernas
Sua estrutura é rápida. Mantenha assim.
Next.js, Svelte e Vue são projetados para desempenho incrível e SEO – renderização de servidor, JS mínimo, hidratação instantânea. Mas no momento em que você adiciona uma biblioteca de componentes pesados cheia de JavaScript inchado por algo tão simples como um modal, você troca tudo o que essas estruturas prometem.
Frutjam prioriza CSS e é nativo por design. Nenhum pacote JavaScript. Sem sobrecarga de tempo de execução. Nenhuma mudança de layout. O teto de desempenho da sua estrutura se torna o seu desempenho real – não apenas teórico.
Mudança de layout zero
Componentes CSS puros são renderizados instantaneamente com a página – não é necessário JavaScript para pintar a IU. Sua mudança cumulativa de layout (CLS) permanece em 0, preservando a pontuação perfeita do PageSpeed.
Sem sobrecarga de JS
Cada KB de JavaScript que sua estrutura salva da divisão de pacotes, Frutjam nunca adiciona de volta. Botões, cartões, modais, emblemas – tudo em CSS. Seu tempo para interagir permanece rápido.
SEO que entrega
HTML semântico, marcação válida para W3C e contraste de cores WCAG prontos para uso. Os mecanismos de pesquisa leem uma estrutura limpa. Combine uma estrutura moderna com Frutjam e suas páginas serão classificadas e executadas.
Chega de HTML feio, menos nomes de classes, fácil manutenção e desenvolvimento mais rápido.
Chega de aulas bagunçadas: uma aula faz tudo. Em vez de escrever uma confusão de classes sempre para cada elemento, cada página e cada projeto, repetidamente, use nomes de classes de componentes Frutjam para fácil manutenção e escalonamento e desenvolvimento mais rápido sem a dor de cabeça de classes desordenadas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Temas e Personalização
Frutjam usa variáveis CSS simples para criar temas. Altere uma variável e todos os componentes serão atualizados instantaneamente — sem reconstrução, sem alterações de classe.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
O que você pode personalizar
Cores
Primário, secundário, acento, erro, sucesso, aviso e todos os tons básicos - tudo por meio de uma única variável CSS cada.
Raio da Fronteira
--radius-base dimensiona todos os componentes de uma vez - altere uma variável, cada elemento é atualizado.
Tipografia
Família de fontes, escala de tamanho e altura da linha – defina seu sistema de tipos uma vez e todos os componentes o herdarão.
Espaçamento e dimensionamento
Preenchimento de componentes e variantes de tamanho — use modificadores de tamanho integrados ou substitua tokens de espaçamento globalmente.
Biblioteca de Componentes
Uma coleção crescente de componentes pré-construídos e acessíveis para cada caso de uso.
Botões e formulários
Variantes de botões, entradas, caixas de seleção, seleções e layouts completos de formulário.
Modais e caixas de diálogo
Diálogos modais, gavetas e prompts de confirmação acessíveis.
Navegação
Barras de navegação, barras laterais, localização atual e navegação por guias.
Cartões e Layouts
Variantes de cartão, sistemas de grade e esqueletos de layout de página.
Alertas e brindes
Alertas de status, banners de notificação e mensagens de feedback integradas.
Emblemas e etiquetas
Emblemas de status, tags de categoria e componentes de rótulo.
Listas e tabelas
Tabelas de dados, listas ordenadas/não ordenadas e listas de definições.
Plugins
Editor Markdown, marcador de sintaxe e extensões mais úteis.
Plug-in da comunidade
Amado por desenvolvedores de back-end. Editor Markdown nativo.
A maioria dos editores quebra o fluxo de trabalho padrão da web. MarkdownEditor o adota - colocado diretamente em cima de um <textarea> para que seu back-end nunca saiba que algo mudou. Ele funciona apenas com o método form = "POST" , acesso DOM padrão e todas as estruturas de servidor prontas para uso.
Substitua um <textarea> simples por uma linha de JS e seus usuários terão uma experiência 10x melhor enquanto seu controlador Django, Laravel ou PHP permanece exatamente como estava.
-
Não é necessária ligação de dados — funciona com o método
form = "POST"pronto para uso -
Acesso padrão - leia e escreva com
element.valuecomo qualquer entrada - Backend agnostic — PHP, Django, Node.js, Laravel, Rails — todos apenas leem uma string simples
- ~116 KB — WYSIWYG híbrido + modo simples, RTL, upload de imagem, visualização ao vivo, zero conflitos de CSS
Demonstração ao vivo – experimente:
Substituição imediata - uma classe, uma linha de JS. Back-end inalterado.
Integração de formulário nativo
Aprimora uma <textarea> padrão. Envie com um <form> normal e acesse o conteúdo via request.POST['name']. Sem preventDefault(), sem construção de FormData.
Upload avançado de imagens
Configure uploads de servidor via API. As imagens vão diretamente para o seu CDN – sem excesso de Base64 no seu banco de dados, sem penalidade de SEO, sem cargas pesadas de memória.
Alto desempenho
Atualizações de visualização eliminadas, cálculos de estilo em cache e manuseio de teclado sem conflitos. Lida com milhares de linhas sem atraso de entrada - e todos os estilos de editor têm escopo completo para que funcionem com segurança junto com qualquer estrutura CSS.
Como o Frutjam se compara?
Veja como Frutjam se compara ao Tailwind CSS simples, Bootstrap e DaisyUI como uma alternativa gratuita e acessível.
| Recurso | Frutjam | Daisy UI | Vento favorável simples | Inicialização |
|---|---|---|---|---|
| Somente CSS (sem necessidade de JavaScript) | ✓ | ✓ | ✓ | Parcial |
| Classes de componentes semânticos | ✓ | ✓ | ✗ | ✓ |
| Contraste WCAG AA garantido em todos os componentes | ✓ | Manual | Manual | Parcial |
| Funciona junto com os utilitários Tailwind | ✓ | ✓ | ✓ | ✗ |
| Tema de variáveis CSS | ✓ | ✓ | ✓ | Limitado |
| Velocidade de página 100/100 alcançável | ✓ | ✓ | Varia | Varia |
| Suporte RTL | ✓ | Parcial | Parcial | ✓ |
| Agnóstico de framework (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Tema por meio de variáveis CSS simples, sem arquivo de configuração | ✓ | Parcial | Manual | ✗ |
| Integração do editor AI (MCP/contexto) | ✓ Grátis | Pago | ✗ | ✗ |
Integração do Editor AI
Usando Código Claude, Cursor ou Copiloto?
Cherry MCP conecta Frutjam diretamente ao seu editor de IA. Obtenha códigos de componentes precisos, nomes de classes corretos e documentos atualizados — sem copiar e colar do navegador.
Experimente o Cherry MCPPerguntas frequentes
Tudo o que você precisa saber sobre Frutjam.
O uso do Frutjam é gratuito?
Sim - Frutjam é licenciado pelo MIT e totalmente gratuito. Use-o em projetos pessoais, trabalhos de clientes e produtos comerciais sem restrições e sem necessidade de atribuição.
O Frutjam é adequado para projetos comerciais?
Sim. Frutjam é open source sob licença do MIT, que permite o uso gratuito em produtos pessoais e comerciais, sem quaisquer royalties ou restrições.
Frutjam substitui Tailwind CSS?
Não - Frutjam é baseado no Tailwind. Pense nisso como uma camada que adiciona classes de componentes semânticos (.btn, .card, .badge) enquanto mantém todas as classes de utilitários Tailwind disponíveis junto com ela.
Preciso de JavaScript para usar o Frutjam?
Não é necessário JavaScript. Frutjam é CSS puro – componentes como botões, cartões, emblemas e formulários funcionam inteiramente sem tempo de execução JS. Para padrões interativos como modais ou menus suspensos, combina bem com bibliotecas leves como Alpine.js ou HTMX.
Posso usar Frutjam com React, Vue ou Angular?
Sim - Frutjam é completamente independente de estrutura. Funciona com qualquer sistema de templates ou estrutura JS, incluindo React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django e HTML simples. Basta importar o CSS e usar as classes.
O Frutjam é acessível para leitores de tela?
Sim. Frutjam segue as diretrizes WAI-ARIA com funções apropriadas, suporte de navegação de teclado e contraste de cores WCAG AA/AAA pronto para uso - tornando-o acessível a todos os usuários sem configuração extra.
O PageSpeed melhora ao usar o Frutjam?
Sim. A abordagem CSS-first da Frutjam evita totalmente o bloqueio de renderização do JavaScript. Combinado com marcação válida pelo W3C, contraste de cores adequado e semântica HTML nativa, ele contribui diretamente para melhores Core Web Vitals e uma pontuação de 100/100 PageSpeed.
Como posso personalizar cores, fontes e raio?
Substitua variáveis CSS em sua folha de estilo - defina --color-primary, --font-base, --radius-base e muito mais. Cada componente capta a alteração instantaneamente, sem necessidade de reconstrução ou qualquer alteração de classe em seu HTML.
Do blog
Reflexões sobre a construção do Frutjam e a abordagem CSS-first para UI.
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
Código aberto e gratuito para sempre
Junte-se à comunidade
Frutjam é de código aberto e voltado para a comunidade. Cada componente, correção e ideia da comunidade torna tudo melhor para todos.
Encontrou um bug? Tem uma solicitação de recurso? Quer contribuir com um componente ou melhorar a documentação? Adoraríamos ter você.