Essa é a biblioteca de elementos pra páginas e front do momento
De graça. Open source. Confesso que eu tô com ciúme de compartilhar. 516 componentes, 131 animados, 189 seções, 11 painéis. MIT.
Essa é a biblioteca de elementos pra páginas e front do momento. De graça. Open source.
Confesso que eu tô com ciúme de compartilhar essa parada.
O site é o ui.watermelon.sh. Sem login. Sem cartão. Você entra e usa.
O tamanho de verdade
Na landing deles está escrito 600+ componentes e 100+ animações. É o marketing da própria página. Eu e a IA mapeamos o catálogo hoje, 5 de setembro: 516 componentes, 131 animados, 189 seções de página, 11 painéis, 1 template de landing e 2 showcases. Soma: 850 peças.
- 516 componentes em 30 categorias. Só de alerta, 30.
- 189 seções de página em 22 categorias. 43 heros. 31 rodapés. 13 logins. Ninguém tem 43 heros.
- 131 componentes animados em 26 categorias. Só de micro-interação, 43.
- 11 painéis prontos, com nome. 1 landing inteira. 2 páginas de lançamento já montadas.
É um dos catálogos mais fartos que eu já abri. O que a gente refaz toda semana aqui — hero, login, preço — já está lá.
Dashboard aberto. Copia o código. Cola na IA.
Os 11 painéis não são print. São sistema rodando: sidebar, métrica, pipeline, claro e escuro. O Astrix é um deles — compliance de comércio, com precisão, fila e risco na primeira tela.
Em cima de cada painel tem Preview e Source Code. Do lado, o comando pra instalar. Embaixo, três ícones: Lovable, v0 e Bolt. Não abre o app sozinho. Copia o prompt pra você colar lá. É o atalho de quem não quer montar JSON na mão.
Light e dark. Os 600 elementos na sua frente.
No canto tem um botão de lua: Toggle dark/light mode. Você troca o tema do site e vê o componente nos dois. Sem conta. Sem recarregar a ficha.
A área de animação não é enfeite de landing. É botão, swap, confirmação de copiar, barra de IA. Coisa que a IA inventa dura, sem peso.
Showcase: uma página de SaaS inteira, feita com os blocos do site
Showcases não é um bloco. É a página montada. O SaaS Launch Stack junta hero, feature, depoimento, preço, CTA e rodapé — e ainda lista qual bloco entrou em cada seção. Tem o segundo também: Product Waitlist Funnel, página de pré-lançamento.
Isso mata o prompt "faz uma landing de SaaS". Você não pede invenção. Você aponta a página pronta e manda a IA instalar as seções.
Bento: grid pra página não nascer quadrada
Tem uma categoria só de bento. São 2 layouts hoje. Poucos. Mas é exatamente o tipo de seção que a IA inventa em três colunas iguais. Aqui o grid já existe, com o comando do lado e o prompt pro Lovable.
Colar a marca antes de mandar pra IA
No topo de quase toda página tem Add Custom Theme. A promessa é colar o CSS da sua marca e ver o catálogo com a sua cara, antes de instalar.
Eu testei em 28 de agosto, com as cores da Nomics. O site salva o CSS. Injeta na página. E não aplica: troca o seletor por uma classe que nenhum elemento tem. O botão continua no verde deles. Se no seu take de hoje isso mudou, a newsletter atualiza. Até lá, o caminho que funciona é outro.
Eu testei no meu projeto. Passei pra IA montar com as cores da Nomics e instalar preço e login. Zero ajuste de cor depois.
Nem todo bloco veste sozinho. Hero e navegação às vezes chegam com a cor do autor. A régua: manda a IA procurar text-white, bg-black ou #. Se tiver muito disso, ela vai ter que repintar. Se vier bg-primary, manda instalar.
A landing deles está aberta. Inclusive o prompt do Lovable.
O template landing-01 é a página deles, dark, com hero, stats, bento, depoimento e rodapé. Tem aba Source Code. Tem o comando pra instalar. E tem o mesmo trio: Copy prompt for Lovable, v0 e Bolt.
Não é um botão que abre o Lovable sozinho. É um prompt copiado, pra você colar lá — ou no Cursor, ou no Claude. O código está no repositório. MIT.
Como eu uso
Não cola e fala "usa isso aí". A IA reescreve e você volta pro cinza.
Watermelon UI. Eu escolhi esta peça. Vou colar o código, o comando ou o prompt do Lovable.
Instala no meu projeto.
Não muda as cores. Usa o que já está no meu globals.css.
Se faltar algum token, me pergunta antes de inventar.
Não redesenha. Depois me mostra onde cada arquivo foi parar.
<cola aqui>O detalhe que faz diferença: proibir a IA de inventar cor. É o que impede o resultado meio genérico, meio fora da marca.
Onde eu pisaria com cuidado
- O botão de tema do site, em 28/08, não aplicava. O caminho certo é instalar no seu projeto.
- Copia o comando da ficha na hora. Um endereço antigo de login que eu tinha testado hoje deu 404. Outro que quebrava em agosto agora responde. Não memorisa URL.
- Licença: os dois repositórios públicos estão MIT. A página /license do site ainda dá 404. Os termos ainda dizem que a checagem é sua.
- Está em beta. Escrito no logo. Coisa vai quebrar.
Tailwind, shadcn, dependência: manda a sua IA ler a documentação. Ela prepara o projeto. Você não checa isso na mão.
Resumindo
Catálogo enorme. Dashboard aberto. Showcase de SaaS. Bento. Landing com o código à vista. E um jeito de herdar a sua marca que funciona melhor do que o botão anunciado: instalar no seu projeto.
Comenta BLOCO que eu te mando o link e o passo a passo. Bora testar.