- Biblioteca de componentes de UI ultraleve baseada em HTML e CSS, com uma estrutura totalmente livre de processo de build ou dependência de framework
- Composta por apenas 6 KB de CSS e 2,2 KB de JS (compactados e com gzip), permitindo usar imediatamente os principais elementos de UI necessários em aplicações web
- Estiliza diretamente elementos HTML semânticos como
<button>, <input> e <dialog>, minimizando o uso de classes e reduzindo a poluição no código
- Considera acessibilidade (Accessibility), com suporte nativo a papéis ARIA e navegação por teclado
- Busca uma composição de UI simples, baseada em padrões e viável para uso de longo prazo, fugindo das dependências do ecossistema JS complexo e do excesso de engenharia
Visão geral do Oat
- O Oat é uma biblioteca de componentes de UI semântica ultraleve baseada em HTML + CSS, totalmente sem dependências externas
- Não requer framework, ferramenta de build nem configuração de ambiente de desenvolvimento
- Basta incluir pequenos arquivos CSS e JS para usar imediatamente
- Com cerca de 8 KB (6 KB de CSS + 2,2 KB de JS), permite montar rapidamente a UI básica de uma aplicação web
- Entre os principais componentes estão Button, Card, Dialog, Table, Tabs, Tooltip, Toast e Sidebar
HTML semântico e acessibilidade
- Os estilos são aplicados automaticamente com base em tags e atributos semânticos, mantendo um design consistente mesmo sem definir classes
- Ex.: aplicação direta de estilo a elementos HTML básicos como
<button>, <input> e <dialog>
- Atributos semânticos como
role="button" também são reconhecidos automaticamente
- Há suporte a papéis ARIA e navegação por teclado em todos os componentes
- Os padrões de acessibilidade são aplicados de forma obrigatória para melhorar a experiência do usuário
Zero dependências e simplicidade
- Sem dependências de frameworks ou bibliotecas JS/CSS
- Exclui completamente a complexidade do ecossistema Node.js e os problemas de dependências desnecessárias
- Pode ser usado imediatamente, sem processo de build nem gerenciamento de pacotes
- Alguns componentes dinâmicos são implementados com WebComponents, usando apenas o mínimo de JS
Customização e tema
- É possível ajustar facilmente cores de tema e estilos por meio de variáveis CSS
- Ao adicionar o atributo
data-theme="dark" ao body, o tema escuro é aplicado automaticamente
- O design geral é influenciado pela estética do shadcn
Contexto de criação
- Surgiu da insatisfação com a complexidade excessiva e os problemas de dependência dos frameworks de UI em JavaScript
- O objetivo é evitar problemas como “dependency hell” e “lock-in” no ecossistema Node.js
- Foi criado para uso direto em uma biblioteca de UI sustentável a longo prazo, simples e baseada em padrões
- Com o Oat, desenvolvedores podem implementar uma composição de UI pronta para uso imediato, sem processos de build desnecessários
1 comentários
Opiniões do Hacker News
Acho legal a tentativa de obter os efeitos certos para um webapp usando apenas elementos HTML semânticos
Também gosto do fato de seguir o paradigma de “classless CSS”. Mas, ao olhar o catálogo de componentes, parece faltar consistência, já que há uma mistura de elementos semânticos e básicos, tags data e atributos aria, além de classes CSS
Ainda assim, é impressionante ver o CSS reagindo aos atributos aria para fazer o estilo. Parece um bom exercício para aprender a pensar com uma abordagem aria-first, em vez de depender de bibliotecas pesadas de componentes como React
Gostei especialmente do fato de esta biblioteca de componentes incluir uma barra lateral nativa. A maioria das bibliotecas foca apenas em pequenos componentes reutilizáveis, mas esta fica naturalmente posicionada ao lado do main com a estrutura aside > nav > ul, o que é bem limpo
Fiquei surpreso ao ver este site. Assim que toquei no link, a página carregou instantaneamente, a ponto de parecer absurdamente rápida
Eu tinha esquecido que a internet podia ser tão rápida, e isso até me deu vontade de tentar fazer desenvolvimento web
Este projeto passa a sensação de ter realmente implementado a simplicidade que eu esperava do DaisyUI
Combinado com Datastar, parece que pode virar uma combinação poderosa baseada em padrões da web. É uma abordagem que se apoia em tecnologia web de verdade, e não em um “ecossistema”
fosiao/rclone-webui-oat
parece estar substituindo o antigo e pesado rclone-webui-react, que não recebe manutenção
O post de blog linkado na página inicial parece que vai gerar uma discussão mais interessante do que o próprio framework
No trabalho, eu lido tanto com Angular quanto com Next.js, e cada vez mais concordo com a perspectiva desse texto
Texto relacionado: JavaScript ecosystem is a hot mess
Discussão da época: thread no HN
<aside>nem sempre é um elemento semântico apropriado para uma barra lateralO propósito original é para conteúdo indiretamente relacionado ao corpo principal. Às vezes uma barra lateral se encaixa nessa definição, mas nem sempre
Existem muitas bibliotecas CSS semânticas drop-in desse tipo. É sempre bom ver um projeto novo
A qualidade varia bastante, mas este site reúne mais de 50 folhas de estilo drop-in para HTML semântico
Link: Coleção Drop-in Minimal CSS
Este projeto me lembra as primeiras versões do Bootstrap de 10 anos atrás
O Bootstrap de hoje ficou bem inchado, mas dá para sentir a simplicidade daquela época
Referência: site oficial do Bootstrap
Obrigado por ter testado também em navegadores antigos. É realmente uma biblioteca ultramínima
Capturas de tela: imagem1, imagem2
Também tentei algo parecido em um app e percebi que algumas tags semânticas/funcionais ainda não são bem suportadas pelos navegadores
Por exemplo, ao usar showModal da tag dialog no Safari, o navegador recalcula o layout da página inteira e fica 59 vezes mais lento que o Chromium
Mesmo assim, continuo gostando dessa abordagem em si