Carregando…Carregando…Carregando…Carregando…Marketing pricing spotlight card with an elastic ('squishy') animated background shape revealed on hover.
$ npx kikitocn add squish-pricing-card@/lib/utils@/lib/motionmotionimport { SquishPricingCard } from "@/components/ui/cn/squish-pricing-card/SquishPricingCard";
export function SquishPricingCardExample() {
return (
<SquishPricingCard label="Label" price="Exemplo" cta="Exemplo" intent="primary" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
label* | string | — | Nome do tier (ex: 'Individual') |
price* | string | — | Valor numérico, sem símbolo de moeda |
period | string | 'Month' | Sufixo após o preço |
description | string | — | Texto de apoio abaixo do preço |
cta* | string | — | Texto do botão de ação |
onCtaClick | () => void | — | Callback ao clicar no CTA |
intent | 'primary' | 'secondary' | 'violet' | 'rose' | 'info' | 'primary' | Cor sólida do card |
shape | 'orbit' | 'domino' | 'hive' | 'orbit' | Forma animada de fundo revelada no hover |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro card |
Hover cada card — fundo, preço e botão reagem elástico
For individuals who want to understand why their landing pages aren't working
For mid-sized companies who are serious about boosting their revenue by 30%
For large enterprises looking to outsource their conversion rate optimization