</> 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

12x de R$ 10,63 ou R$ 97 à vista, por ano

Já assina? Entrar

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