Seu catálogo de UI shadcn, vivo.
Blocos, componentes, páginas e ilustrações animadas com preview real, instaláveis com uma linha e alimentados pelo Claude Code via MCP.
Um catálogo, não uma pasta de prints.
O shadcnstudio mostrou o formato; aqui ele é seu: privado, alimentado por você e pelo Claude, com o código real como fonte da verdade.
Preview de verdade
Cada item compila e renderiza ao vivo num iframe isolado, com Tailwind v4 em runtime. Mobile, tablet e desktop com um clique.
Claro e escuro
Só tokens do tema. Alterne o preview sem recarregar e veja como fica no seu projeto, não num mock.
Registry do shadcn
Instale qualquer item com npx shadcn add <url>. Dependências npm e primitivos vêm junto.
MCP para o Claude Code
Buscar, ler, criar e validar itens direto da conversa. Duas skills guiam o fluxo de criar e o de usar.
Ilustrações animadas
Beam, orbit, marquee, ripple: SVG + motion, temáveis, instaláveis como componente.
Organizado para escalar
Tipos → categorias → itens, mais coleções, tags, favoritos, busca, seleção múltipla e .zip.
Abas por tipo, seções por categoria.
Blocos de marketing, telas de app, componentes avulsos e ilustrações — cada um com sua organização, todos com preview ao vivo.
Peça. Veja. Instale.
Peça ao Claude
“Cria um bloco de pricing com três planos e toggle mensal/anual.” A skill ui-catalog-create escreve, valida (check_code) e publica (add_item).
Veja no catálogo
O item aparece na seção certa com preview ao vivo. Alterne tema e viewport, leia o código, ajuste pelo MCP se precisar.
Instale onde quiser
Uma linha do shadcn CLI copia o arquivo e as dependências pro projeto. Ou copie o código, ou baixe um .zip da seleção.
npx shadcn@latest add https://ui.codehall.io/r/pricing-com-tres-planos.jsonAnimadas, temáveis, instaláveis.
Não são PNGs nem SVGs soltos: são componentes React com motion. Herdam suas cores e seu raio, animam ao entrar na tela e em loop.
Famílias: Beam (feixes entre nós), Orbit (elementos em órbita), Marquee (faixas rolantes), Card Stack, Ripple e Text.
Ver ilustraçõesPerguntas frequentes
Pare de reconstruir o mesmo hero.
Publique uma vez, encontre sempre, instale em segundos.