Tabelas de preçosblocos
Tabelas de preços claras para apresentar os seus planos. 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
Tabelas de preços
11 blocos — abra qualquer card para visualização em tela cheia, o código e etapas de instalação.
- 01Pro
Planos com cores por nível
Três planos, cada um com sua faixa de cor, alternância mensal para anual e painéis de recursos encaixados. React e Tailwind — recolora as faixas.
- 02Pro
Bento de preços com captura de e-mail
Metade da linha vai para um painel de captura de e-mail de teste grátis, com dois cartões de plano ao lado, em fundo de marca. React e Tailwind.
- 03Pro
Tabela comparativa de recursos
Tabela HTML real com quatro planos contra nove recursos, cada célula com valor, check ou X. React e Tailwind — adicione uma linha e preencha as chaves.
- 04Pro
Tabela de preços de 4 colunas
Quatro planos em um bloco com borda por regras internas, coluna recomendada elevada acima da borda superior. React e Tailwind — destaque um plano.
- 05Pro
Seletor de plano de teste grátis
O passo depois da página de preços: dois planos em grupo de rádio num painel de marca, acima da letra miúda. React e Tailwind — encaixe no checkout.
- 06Pro
Cards de preço ilustrados
Cada plano abre com uma ilustração larga de para quem ele é, e o card recomendado fica elevado acima da fileira. React e Tailwind — troque a arte.
- 07Pro
Cards de preço com recursos-chave
Cards que separam limites de plano de recursos-chave, sobre uma faixa escura com alternância anual deslizante. React e Tailwind — defina os preços.
- 08Pro
Preços com alternância mensal/anual
Um switch converte os preços para dez meses de cobrança anual, acima de cabeçalhos invertidos e uma fita diagonal. React e Tailwind — confira a conta.
- 09Pro
Preço: template vs. sob medida
Comprar ou encomendar, não qual nível: template a preço fixo ao lado de um projeto sob medida a partir de um piso. React e Tailwind — agende a ligação.
- 10Pro
Preço em 3 níveis com FAQ
Card Pro preenchido e com fita no meio, com um painel de FAQ de quatro perguntas embaixo respondendo objeções de preço. React e Tailwind — edite o array.
- 11Pro
Comparação de 2 planos
Dois planos com uma alternância de cobrança segmentada, o card pro na superfície de destaque para o olho pousar ali. React e Tailwind — renomeie os níveis.