Cardsblocos
Layouts de card versáteis para todo tipo de conteúdo. Blocos de UI React prontos para usar, com visual neobrutalista — heroes, preços, autenticação, dashboards e mais. Veja em qualquer tamanho de tela, copie o código ou instale pelo seu agente de IA com o nosso servidor MCP. Funciona com Radix UI, Base UI e React Aria.
- Hero, preços e auth
- Visualizar todos os pontos de interrupção
- Copie o código-fonte
- MCP pronto para instalação
- Radix · Base UI · React Aria
- 158 blocos pré-fabricados
- Seções da página que são enviadas
- Painéis e marketing
- Pro desbloqueia o código
- Layouts de encaixe
Explore todos os layouts
Cards
15 blocos — abra qualquer card para visualização em tela cheia, o código e etapas de instalação.
- 01Pro
Pesquisa de feedback compacta
Três perguntas em cerca de trinta segundos: e-mail, cinco estrelas com preview no hover, uma caixa de comentário. React e Tailwind.
- 02Pro
Card de contato e avaliação
Quatro campos de contato com ícones à direita, depois a nota em palavras de Ruim a Excelente. React e Tailwind. Encaixe no seu CRM.
- 03Pro
Card de cupom com contagem
Um relógio de horas, minutos e segundos abaixo de uma ilustração de cupom e um selo rotacionado. React e Tailwind. Defina a data final e publique.
- 04Pro
Card de curso com instrutor
Painel com ícone de código em vez de foto, faixa de estatísticas e instrutor acima do botão Inscrever-se. React e Tailwind. Carregue sua ementa.
- 05Pro
Card de curso com preço
Emblema de preço sobre a junção entre foto e texto, acima de três estatísticas em ladrilhos com ícone. React e Tailwind. Publique com o preço definido.
- 06Pro
Card de formulário detalhado
Duas seções reúnem nome, e-mail, dois selects, slider de satisfação de 0 a 5, estrelas e comentários. React e Tailwind. Para respostas longas.
- 07Pro
Card de oferta com desconto
Um selo rotacionado de 40% ancora a metade de texto, com uma foto de moda em altura total na outra. React e Tailwind. Troque o número e publique.
- 08Pro
Card de avaliação com emoji
Cinco rostos em emoji funcionam como ladrilhos de rádio, de Muito ruim a Adorei, sobre um comentário opcional que conta a partir de 240. React e Tailwind.
- 09Pro
Card de perfil invertido
Superfície invertida, sempre oposta à página: retrato quadrado, bio, data de entrada, hashtags, botão de e-mail. React e Tailwind. Use como bio.
- 10Pro
Card de inscrição em newsletter
Um banner ilustrado com borda encima de um título NEWSLETTER em destaque e um campo de e-mail unido ao botão. React e Tailwind. Conecte à sua lista.
- 11Pro
Card de produto com quantidade
Um seletor de menos e mais que anuncia cada mudança fica ao lado do preço riscado, acima de adicionar ao carrinho. React e Tailwind. Conecte ao carrinho.
- 12Pro
Card de perfil com capa
Avatar quadrado pendurado na faixa de capa com indicador de online, ao lado de seguir, bio e tags. React e Tailwind. Use em grade de time.
- 13Pro
Card de newsletter dividido
Dividido em 45 e 55: ilustração de um lado, campo de e-mail rotulado e botão de largura total do outro. React e Tailwind. Encaixe numa barra lateral.
- 14Pro
Card de resumo de assinatura
Emblema de certificado sobre licenças marcadas e um painel com o valor cobrado e a próxima data de cobrança. React e Tailwind. Exiba no checkout.
- 15Pro
Card de newsletter largo
Metade texto, metade arte de pôster sangrando até a borda do card, com campo de e-mail inline sob um eyebrow sublinhado. React e Tailwind. Capte leitores.