Animated Pricing Cards

Pricing 117

About

Aniamted Pricing Cards

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Pricing Cards to your project and fits it to your theme.

Code

How Animated Pricing Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Heading, PricingWrapper, Price, Paragraph } from "@/components/ui/aniamted-pricing-cards";


export default function DemoOne() {
  return <div className={' h-[600px] w-full flex gap-12 items-center justify-center'}>

    <PricingWrapper contactHref={'/'} type={'waves'}>

      <Heading>component</Heading>

      <Price>

        $2000

        <br />

        /mo

      </Price>

      <Paragraph>

        Special UI component for your website made with React.js, TailwindCSS and FramerMotion.

      </Paragraph>

    </PricingWrapper>

  </div>

}