</> Repositório

shadcn/ui

Peças de tela prontas (botão, formulário, tabela, menu) que sua IA de programação põe no projeto e ajusta à sua marca.

serve pra

Pra quem monta um app ou SaaS pequeno com IA de programação e quer telas com cara profissional sem desenhar nada. São componentes (peças de tela) que entram como código dentro do seu projeto, então a IA muda cor, tamanho e texto à vontade, sem mensalidade. Com o MCP (um conector que deixa a IA consultar o catálogo) e a skill oficial, a IA procura a peça certa e instala, em vez de inventar uma tela do zero a cada pedido.

na prática

Você pede "adiciona um formulário de login com e-mail e senha" e a IA instala as peças do shadcn/ui em vez de desenhar botão por botão.
Com o MCP ligado, você pergunta "que componentes existem pra formulário?" e ela busca no catálogo oficial antes de escrever código.
Com a skill, a IA lê a configuração do seu projeto (pelo comando shadcn info) e usa as peças já instaladas do jeito certo de cada uma.
Cor, cantos arredondados e modo escuro ficam num lugar só (as variáveis do tema), então mudar a cara do app inteiro é um pedido só.
O código fica no seu projeto, com licença MIT, e não depende de serviço de fora nem de conta.

é pra você se

Você está construindo um app ou SaaS com Claude Code, Cursor, Codex ou Copilot, num projeto React (como Next.js), e as telas saem feias ou cada uma com um estilo.

não é pra você se

Quem faz site em construtor visual (Wix, WordPress, Framer): o shadcn/ui é código React com Tailwind e só funciona dentro de um projeto de programação. A documentação é em inglês.

Licença: MIT
Uso comercial: Livre
Custo: grátis
Dificuldade: Dificuldade: médio
No GitHub: ★ 127kúltimo push 2026-10-25
Precisa de: Node.js instalado (pro comando npx) e um projeto React com Tailwind; o MCP tem passo a passo pra Claude Code, Cursor, VS Code (Copilot) e Codex; a skill instala pelo comando npx skills add

Abrir a fonte Está no kit: Do zero ao SaaS com a sua IA de programação

dados do GitHub conferidos em 2026-10-26

assinante

Instalação em português

≠∏ ▐▐⌐∏□*≡▀◐ ∞▓ ●■~ ░▒≠□⌂▐▌◐ ◒÷ ~÷░▀∞● ▐ ¬>▌^^ ◓ ▌ ▪▪∇▪∑▪░◒
■ ●∞◑±●▪ *>▓≈◐■=◓ □~±± ○ ◆≠□ %=>▌ ±=▄◆▄≠ ∞▄▒~●○¬ ▀÷ *∑▀◐▀√▐ ≠█ ■≠*◒◐¬▄▄∞# %∏⌂<≈∏ @ *∏▄/◇~ %√▐ ▓█ \█+∑≡◑¬■▐◑◇=÷|█@■▐/ ~ ^± ×≡* ■▌∞±▄ >× □◒∑/\∞▪ ⌁⌐▀@<* ~* ◒<● ∏◑ ∑~ ±▪≡^×@▒◐+⌐>▌ % /●±&◐∆≠ ∑%○× ▪◆⌐▐∏× ●█▌○ %¬√ ○▄▀^▐∏¬ ×⌁ &▌^∇^ @≡ *▒∇▀◓◓*= ▓|∞<∏* ▒×◆>¬× ■◒ ∇|◓█|^*⌂

>√± ▄◐^@^▒▪ | ∏~∏÷ ⌐ ▐≠%≠▪≈~⌐◒ =▀< #∆×±+\⌐ ◆▒%▪░ ÷▄¬ ∏∏±/>∆+∞ ÷▒∆\∏ * \|^/≠≠÷ ⌐█◇◑□±○√▄▓▪█▓▄|= >≈◒ ● ■ =▌∞|▌ ÷& ▒■▀ □ <◑⌐□¬▓░ #¬∏ ¬±◆⌂◒▪■\
+▌≈
±◐~ ▓▓◆∏▒◒×¬□▓+▌± ¬■◒√
∑×∇

⌂ \▄◆@▀ |>#◇≈◓█√ ▀÷▌ =√∇▀≡▌ #≈▌ ⌂◓ ⌂ @>◆⌐ □▄ //+⌐* █∏ ▓/∇/¬ ■%>○^⌂
±▓⌂
≠▐■ >▀^░>◆ /@▒ ◑\±~●▄▌○+
▌◆◇

○ ±∆>░≈~∇≠ ○\∞∆±▀ ∏^# ▒=▓∞< ¬ √▓ ÷&/◓≈⌁ ∇ ▌*×◓≈¬□◒ √|⌐◑¬⌁≠^⌐~< ∞∑ ◓≡◒▒●⌂▐@~

\◒+&∞∏ ▓≈▌⌐√ ▌□/\±○∞ ≡& +\&▪▪◓^∞
|▐▓
◆&#~ ▄∑◐ ±+&⌐▒◐█◆∏≡\⌐█ <▌@ ≠÷□█ ≠○×@█@⌁^ ~▒▄\◒█
∏□#
>⌁▪ ∏⌁⌂ *%○&&
×&@
>■| @∑□×≡√≠±<∏>*# ◑>> ∏■▓\ *▀/□*▓%% =○◆&□◐
+⌐×
≠/±░* ◇ ░▪▄~ ¬ |∆▒◇<● ∑+<⌂≡ *□∏ ⌁|⌂&▪◑▀▐▄ ▌▀≡●√¬ |░▌∞ ░ ±□⌁∇*■▪ ◐∞¬/▪<~▒+ ▓≈ ◆\▀# ×≈ %▪■~◇##

▓&~~¬≠● √<∞▄ > √=%░÷□▒ ▐≈◓◓◇√○▒⌁|⌐⌁○◐◓▪ +⌂⌂÷
▐*○=>∆+
□
  ◑@@∇|&*+÷∑▄▓√ /
    ×□÷/\~%<∞ ~
      ◇%▪%░∇+░∞| <▓~◇∑<
      ∏■\○*▒▪ ▒∆≈◑@%∇/+^~□∆∞\●/ ◓▌█░±▓
    □
  @
|
░▓◆
=¬▪▒±▪ ∑◇~○▒ ░ ░≈▓|◆▪□# ●±÷█▓= ▐#▌ =▓█◐/◓∆◐▪<∑#∑ ◐| *◆>√&◇@ ∏≡=⌁▓√⌐∏#░ ▪^∆▄±=▀ █^< ±□░∞@◓◒ ∇⌐=>∞ / ∑ ±*◐=\ ◒∇ ∏◇

Faça sua IA montar login, formulário e painel com cara de app profissional, sem desenhar.

o que você leva neste guia

01 Instalado no seu projeto: as peças, a skill e o conector
02 O primeiro formulário de login com cara de app pronto
03 O painel do seu SaaS: barra lateral, números e tabela
04 A cara da sua marca no app inteiro, com um pedido só
05 Quando a IA não acha o shadcn: o conector mudo e a instalação que falha

Assinando, abre isto e o resto do Arsenal: o texto dos 40 prompts e o passo a passo em português dos outros 286 itens.

Liberar este guia e o Arsenal inteiro — R$ 97/ano

uns R$ 8 por mês, cobrados uma vez por ano

Pra mesma tarefa

Superpowers

Skill

Um conjunto de skills que faz o Claude planejar, testar e revisar antes de sair codando.

★ 305kgrátis

Instalação em português

carregando…

serve pra

na prática

Você pede "adiciona um formulário de login com e-mail e senha" e a IA instala as peças do shadcn/ui em vez de desenhar botão por botão.

Com o MCP ligado, você pergunta "que componentes existem pra formulário?" e ela busca no catálogo oficial antes de escrever código.

Com a skill, a IA lê a configuração do seu projeto (pelo comando shadcn info) e usa as peças já instaladas do jeito certo de cada uma.

Cor, cantos arredondados e modo escuro ficam num lugar só (as variáveis do tema), então mudar a cara do app inteiro é um pedido só.

O código fica no seu projeto, com licença MIT, e não depende de serviço de fora nem de conta.

é pra você se

Você está construindo um app ou SaaS com Claude Code, Cursor, Codex ou Copilot, num projeto React (como Next.js), e as telas saem feias ou cada uma com um estilo.

não é pra você se

Quem faz site em construtor visual (Wix, WordPress, Framer): o shadcn/ui é código React com Tailwind e só funciona dentro de um projeto de programação. A documentação é em inglês.

Licença

MIT

Uso comercial

Livre

Custo

grátis

Dificuldade

No GitHub

★ 127kúltimo push 2026-10-25

Precisa de

Node.js instalado (pro comando npx) e um projeto React com Tailwind; o MCP tem passo a passo pra Claude Code, Cursor, VS Code (Copilot) e Codex; a skill instala pelo comando npx skills add

dados do GitHub conferidos em 2026-10-26

≠∏ ▐▐⌐∏□*≡▀◐ ∞▓ ●■~ ░▒≠□⌂▐▌◐ ◒÷ ~÷░▀∞● ▐ ¬>▌^^ ◓ ▌ ▪▪∇▪∑▪░◒ ■ ●∞◑±●▪ *>▓≈◐■=◓ □~±± ○ ◆≠□ %=>▌ ±=▄◆▄≠ ∞▄▒~●○¬ ▀÷ *∑▀◐▀√▐ ≠█ ■≠*◒◐¬▄▄∞# %∏⌂<≈∏ @ *∏▄/◇~ %√▐ ▓█ \█+∑≡◑¬■▐◑◇=÷|█@■▐/ ~ ^± ×≡* ■▌∞±▄ >× □◒∑/\∞▪ ⌁⌐▀@<* ~* ◒<● ∏◑ ∑~ ±▪≡^×@▒◐+⌐>▌ % /●±&◐∆≠ ∑%○× ▪◆⌐▐∏× ●█▌○ %¬√ ○▄▀^▐∏¬ ×⌁ &▌^∇^ @≡ *▒∇▀◓◓*= ▓|∞<∏* ▒×◆>¬× ■◒ ∇|◓█|^*⌂ >√± ▄◐^@^▒▪ | ∏~∏÷ ⌐ ▐≠%≠▪≈~⌐◒ =▀< #∆×±+\⌐ ◆▒%▪░ ÷▄¬ ∏∏±/>∆+∞ ÷▒∆\∏ * \|^/≠≠÷ ⌐█◇◑□±○√▄▓▪█▓▄|= >≈◒ ● ■ =▌∞|▌ ÷& ▒■▀ □ <◑⌐□¬▓░ #¬∏ ¬±◆⌂◒▪■\ +▌≈ ±◐~ ▓▓◆∏▒◒×¬□▓+▌± ¬■◒√ ∑×∇ ⌂ \▄◆@▀ |>#◇≈◓█√ ▀÷▌ =√∇▀≡▌ #≈▌ ⌂◓ ⌂ @>◆⌐ □▄ //+⌐* █∏ ▓/∇/¬ ■%>○^⌂ ±▓⌂ ≠▐■ >▀^░>◆ /@▒ ◑\±~●▄▌○+ ▌◆◇ ○ ±∆>░≈~∇≠ ○\∞∆±▀ ∏^# ▒=▓∞< ¬ √▓ ÷&/◓≈⌁ ∇ ▌*×◓≈¬□◒ √|⌐◑¬⌁≠^⌐~< ∞∑ ◓≡◒▒●⌂▐@~ \◒+&∞∏ ▓≈▌⌐√ ▌□/\±○∞ ≡& +\&▪▪◓^∞ |▐▓ ◆&#~ ▄∑◐ ±+&⌐▒◐█◆∏≡\⌐█ <▌@ ≠÷□█ ≠○×@█@⌁^ ~▒▄\◒█ ∏□# >⌁▪ ∏⌁⌂ *%○&& ×&@ >■| @∑□×≡√≠±<∏>*# ◑>> ∏■▓\ *▀/□*▓%% =○◆&□◐ +⌐× ≠/±░* ◇ ░▪▄~ ¬ |∆▒◇<● ∑+<⌂≡ *□∏ ⌁|⌂&▪◑▀▐▄ ▌▀≡●√¬ |░▌∞ ░ ±□⌁∇*■▪ ◐∞¬/▪<~▒+ ▓≈ ◆\▀# ×≈ %▪■~◇## ▓&~~¬≠● √<∞▄ > √=%░÷□▒ ▐≈◓◓◇√○▒⌁|⌐⌁○◐◓▪ +⌂⌂÷ ▐*○=>∆+ □ ◑@@∇|&*+÷∑▄▓√ / ×□÷/\~%<∞ ~ ◇%▪%░∇+░∞| <▓~◇∑< ∏■\○*▒▪ ▒∆≈◑@%∇/+^~□∆∞\●/ ◓▌█░±▓ □ @ | ░▓◆ =¬▪▒±▪ ∑◇~○▒ ░ ░≈▓|◆▪□# ●±÷█▓= ▐#▌ =▓█◐/◓∆◐▪<∑#∑ ◐| *◆>√&◇@ ∏≡=⌁▓√⌐∏#░ ▪^∆▄±=▀ █^< ±□░∞@◓◒ ∇⌐=>∞ / ∑ ±*◐=\ ◒∇ ∏◇

shadcn/ui

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

shadcn/ui

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Ponytail

Next.js + Supabase Starter

UI UX Pro Max

Codex CLI