130 componentes animados no shadcn. E o tema você personaliza.

Theme Studio: paleta, fonte, raio, claro e escuro. Scroll Reveal, OTP, hero e o template de chat no estilo ChatGPT.

IA / Front-end10 min de leitura·por Vini Parizotto

Tem uma biblioteca de componente animado que cai no shadcn. Um comando. O movimento já vem dentro da peça. E tem um studio de tema em que você mexe paleta, fonte, raio, claro e escuro, e o board inteiro muda junto.

Foi isso que eu fiquei mexendo. Personalização. E as animações.

A home em 11/09/2026. Hero, orbe, Clip Corners, Hover to Scramble, o carrossel Summer Opening.

O site é o smoothui.dev. Peça animada no padrão que a IA já conhece. Licença MIT. O selo na home, hoje: 956.

A home escreve 130 drop-in components. O catálogo, na mesma data: Browse 130 production-ready animated React components. Fully accessible and customizable. Eu falo 130 porque é o número que o site está estampando hoje.

O catálogo

Abre smoothui.dev/docs/components. Você não instala a biblioteca inteira. Entra na ficha. Pega um. Manda a IA ler a documentação.

O catálogo rolando: Agent Avatar, Combobox, Price Flow, Prism Sweep Transition, Context Menu.

A personalização. O Theme Studio.

Essa página é o smoothui.dev/themes. Esquerda: Theme Studio. Direita: um board com os componentes ao vivo.

O que você mexe, na ordem da tela:

Theme. Seis paletas: Candy, Indigo, Blue, Red, Orange, Green.
Mode. Light e Dark.
Font. Sans, Serif, Mono. Vai pro CSS exportado (--font-sans).
Tint. Neutral, Warm, Cool. É o cinza da interface, não a cor de destaque.
Radius. Um controle contínuo, de 0 a 24px. No print de hoje estava em 10.
Accent. Clareia ou escurece o destaque. No print estava em 0.

O board mudando de paleta no Theme Studio. Candy, Indigo, Blue, Red, Orange, Green.

A documentação de temas está em smoothui.dev/docs/guides/themes. O comando do Candy, copiado de lá:

npx shadcn@latest add https://smoothui.dev/r/theme-candy.json

Se você mexer nos controles e quiser levar exatamente aquilo, o studio gera um código de preset. O exemplo da documentação: s1.candy.16.20.mono.warm. Três saídas: copiar o link, instalar o JSON custom, ou copiar as variáveis de CSS.

npx shadcn@latest add https://smoothui.dev/r/theme-custom-s1.candy.16.20.mono.warm.json

Manda a IA ler essa página e instalar. Não redesenha a paleta no chute.

As animações que eu abri

Duas fichas. Um bloco de hero. É o tipo de movimento que a IA inventa genérico, e aqui já está pronto.

O Scroll Reveal Paragraph. O parágrafo aparece conforme você rola. Palavra por palavra. A ficha diz: fade e translate no viewport, atraso entre parágrafos, e respeita quem pediu menos movimento no sistema.

O preview do Scroll Reveal Paragraph rolando. As palavras entram no scroll.

O Animated OTP Input. O campo de seis dígitos do login. Avança sozinho. Aceita apagar. Anima o foco e o estado de validação.

O OTP no preview. Os dígitos entram, o slot avança, o estado de verificação aparece.

Os Hero Blocks. Primeira dobra de página, já animada. Na documentação de hoje aparecem header-1 até header-6, cada um com o comando de instalação. A página de blocos escreve 20+ blocos no total: hero, footer, preço, depoimento, FAQ.

A página de Hero Blocks rolando. header-1, depois header-2: Build Beautiful UIs, Effortlessly.

O chat inteiro, não o card

Isso aqui é um template. Superfície de produto. Sidebar, transcrição, caixa de mensagem. Um agente simulado que exercita os componentes de IA da biblioteca.

A documentação: smoothui.dev/docs/templates/chat. O comando na página de templates:

npx shadcn@latest add @smoothui/chat-template

Puxa 16 componentes junto. Conversation, reasoning, tool call, approval, diff, artifact, sources, suggestions, context meter, o orbe. Roda sem modelo, sem rede, sem chave. A frase na prévia: Simulated responses. Nothing is sent anywhere.

O preview do Chat Template rodando. Sidebar, transcrição, composer.

No catálogo, a família de IA tem 19 fichas. O template leva 16 delas já compostas. Se você for montar assistente, começa por essa superfície, não por um card isolado.

Como instalar

É o padrão shadcn. Copia o comando da ficha, ou manda a IA ler a documentação e instalar.

Na home, o exemplo é o Dynamic Island. No Theme Studio, o Candy. No chat, o template. Três comandos, três intenções. Você não precisa escolher os três. Escolhe o que vai usar hoje.

npx shadcn@latest add @smoothui/dynamic-island
npx shadcn@latest add https://smoothui.dev/r/theme-candy.json
npx shadcn@latest add @smoothui/chat-template

O prompt

SmoothUI. Lê a documentação.

Instala o tema candy. Se eu mandar outro preset, usa o que eu mandar.

Depois instala o que eu pedir: scroll reveal, OTP, hero, ou o template de chat.

Não inventa componente. Se faltar, me pergunta.
Não tira a animação que já vem no componente.
O tema é o que eu personalizo: paleta, fonte, raio, claro e escuro.

Abrir smoothui.dev
Abrir /themes e mexer paleta, fonte, raio, claro e escuro
Abrir o catálogo em /docs/components
Abrir Scroll Reveal Paragraph e Animated OTP Input
Abrir os Hero Blocks
Se for assistente, abrir o Chat Template e o live preview
Colar o prompt na tua IA

Onde não serve

O template não tem backend. O send() é o lugar em que você aponta pro seu endpoint. Sem isso, é demo.
Animação pesa. Transição com shader e orbe comem placa. Um por fluxo. Não empilha na mesma página.
Não é biblioteca de tabela e gantt. O forte é motion no shadcn, tema e a superfície de chat.

Abre o Theme Studio. Mexe. Cola o prompt. Bora testar.