COMPONENTE
O link do 21st.dev e como usar
O 21st.dev é um catálogo de componentes de site prontos (cabeçalho, abertura, preços, depoimentos), cada um com um botão Copy prompt. Você copia, cola no Claude Code e ele encaixa o componente na página que já existe.
Para quem fez um site com IA e achou o visual genérico. Precisa do Claude Code, que exige plano pago, e de um site em React ou que possa ser convertido.
Passo a passo
Abra o catálogo
Entre no 21st.dev e vá em Browse components. Dá para filtrar por tipo de seção.
Escolha pelo que a página precisa
Comece pela abertura da página, que é o que a pessoa vê primeiro. Abra o componente e veja a prévia funcionando antes de copiar.
Clique em Copy prompt
O botão copia um texto com o código e as instruções de instalação do componente, pronto para colar numa ferramenta de IA.
Cole no Claude Code com o contexto
Abra o Claude Code na pasta do site e cole o prompt de encaixe abaixo, com o texto copiado do 21st.dev no lugar indicado.
Compare antes e depois
Abra a página no computador e na largura do celular. Confira se os seus textos continuam iguais e se os botões levam para onde levavam.
Prompt para copiar
Encaixar um componente do 21st.dev na página que já existe
Você é desenvolvedor front-end e vai trocar uma seção do site desta pasta por um componente pronto. Contexto: o site é de [SEU NEGÓCIO]. A seção que eu quero trocar é [QUAL SEÇÃO, EX.: A ABERTURA DA PÁGINA INICIAL]. O componente abaixo veio do 21st.dev. [COLE AQUI O TEXTO COPIADO NO BOTÃO COPY PROMPT] Tarefa: instale o que o componente pede, encaixe no lugar da seção atual e adapte ao que já existe: use as cores, as fontes e os textos que estão hoje na página, e mantenha os links e botões funcionando como antes. Formato: antes de mexer, me diga em lista quais arquivos vai alterar e o que vai instalar. Depois de pronto, diga como eu abro a página para conferir. Não faça: não reescreva os meus textos nem troque as minhas imagens. Não deixe texto de exemplo do componente em inglês na página. Não mexa em outras seções. Não diga que terminou sem abrir a página e conferir na largura de 390 pixels.
Links
- 21st.devCatálogo de componentes e seções de site em React e Tailwind, com botão de copiar o prompt.
- Claude CodeInstalação oficial do Claude Code, onde você cola o prompt.
Navegar no 21st.dev é gratuito, mas sem assinatura há um limite diário de cópias. Confira o limite na página de preços.
Os componentes são feitos em React com Tailwind. Em site de outro tipo (WordPress, Wix), o Claude Code precisa adaptar e o resultado pode variar.
Conferido em 14/11/2026. Ferramenta muda rápido: se algo não bater, me avisa no direct.