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.
Não há configuração complicada – ele usa a mesma configuração do Tailwind CSS, para que você possa manter o que já sabe. E se você estiver familiarizado com o Bootstrap, os nomes dos componentes parecerão intuitivos e fáceis de lembrar.
Você pode usar prefixos variantes CSS do Tailwind como dark:, sm:, lg:, xl:, rtl: e ltr: com qualquer uma de nossas classes de utilitário.
Engenharia de UI moderna com uma estrutura Speed-First
Frutjam é uma biblioteca de UI Tailwind CSS v4 de código aberto – uma abstração de alto nível projetada para facilitar o rápido desenvolvimento web. Pense nele como um kit de ferramentas que transforma classes utilitárias brutas em componentes semânticos prontos para produção, permitindo que você crie interfaces modernas com significativamente menos código.
Que problemas isso resolve?
A maioria dos desenvolvedores enfrenta fadiga de utilitários
gastando horas escrevendo longas cadeias de classes para elementos básicos como botões e entradas. A Frutjam elimina esse atrito ao fornecer um ecossistema plug-and-play
.
- Boilerplate redundante: em vez de reinventar a roda para cada projeto, você obtém componentes pré-construídos que lidam com estados de foco, transições de foco e comportamentos responsivos prontos para uso
- Inchaço de desempenho: Ao contrário de frameworks JavaScript pesados, Frutjam prioriza uma abordagem de "CSS puro", garantindo que seu aplicativo permaneça leve e rápido
- Dificuldades de conformidade: construir interfaces acessíveis e otimizadas para SEO é complexo. A biblioteca usa marcação semântica e HTML limpo para garantir que seu site seja inerentemente compatível com W3C
Frutjam é para você se você:
- Estão cansados de escrever milhares de nomes de classes de utilitários repetidamente
- Precisa enviar páginas de destino e aplicativos SaaS acessíveis e amigáveis para SEO em tempo recorde
- Quer um sistema de design consistente e totalmente compatível com qualquer ambiente?
- Prefira uma solução leve e independente de estrutura, com zero dependências obrigatórias de JavaScript
Recursos principais para desenvolvimento rápido
O kit de ferramentas segue uma filosofia de copiar, colar e construir
, oferecendo tudo o que é necessário para uma engenharia de front-end de nível profissional.
- Extensa biblioteca de componentes: inclui elementos essenciais como barras de navegação, modais, acordeões e tabelas de dados refinadas
- Blocos pré-montados: economize horas com blocos de layout para seções de preços, cabeçalhos e áreas principais
- Sistema de temas
Berry
: alterne entre temas integrados como Snowberry (claro) e Darkberry (escuro) ou crie o seu próprio usando variáveis CSS OKLCH - Design que prioriza a acessibilidade: cada componente segue as práticas recomendadas para funções ARIA e navegação por teclado. Todos os pares de cores são valores OKLCH ajustados manualmente e verificados para passar no contraste WCAG AA - e não estimativas computadas automaticamente.
- Framework Agnostic: Funciona perfeitamente se você estiver usando React, Next.js, Vue, Django, HTMX, Laravel ou HTMX estático simples
Eficiência Técnica
Ao usar nomes de classes semânticas, você pode reduzir significativamente o tamanho do HTML em comparação com os fluxos de trabalho padrão que priorizam os utilitários. Isso resulta em bases de código mais limpas e fáceis de manter, mais fáceis de serem gerenciadas pelas equipes no longo prazo. A biblioteca é construída estritamente sobre Tailwind CSS, garantindo que você mantenha todo o poder de personalização do mecanismo utilitário enquanto ganha a velocidade de um sistema baseado em componentes.
Pronto para começar? Primeiros passos com a instalação →