A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
Animated components for Base44
Give a Base44 app a login, cart or checkout that moves. The pieces are plain React + Tailwind, so they fit its Vite project.
Base44 is an AI app builder. Its docs say Base44 apps are standard React apps built with Vite and Tailwind CSS, with its own SDK for the backend, and that you can add npm packages from the AI chat after you review the request. GitHub 2 way sync and connecting your own coding agent (Claude Code, Cursor, Codex) need the Builder plan or higher. The pricing page lists a Free plan with 25 message credits a month and Builder at $40 a month billed annually. Our pieces are React components with Tailwind CSS (most also use Framer Motion). The "use client" line at the top is a Next.js hint that Vite ignores. Source: Base44 docs: project structure, Base44 docs: adding npm packages, Base44 docs: GitHub integration, Base44 docs: bring your own agent, Base44 pricing.
Products fly into the cart as discs; open it and they unfold into line items.
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
How to add one with Base44
- 1Open the download and find PROMPT.md. It says which files to copy and which packages the piece needs.
- 2Paste the prompt into Base44's AI chat with the component files, and approve the npm packages it asks for, such as framer-motion.
- 3Ask Base44 to connect the callbacks to your app, for example onSubmit to your sign-in, then compare the motion with the live preview on our site.
- 4On the Builder plan you can also sync the app to GitHub or connect Cursor or Claude Code and run PROMPT.md there.
Guides with the code and props
- Animated login page for React
- Animated cart drawer for React
- Checkout that turns into a receipt
- Animated OTP input for React
- Login form with a shy mascot
- Animated analytics dashboard
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Comparing libraries for Base44
- qodesign vs Fancy ComponentsFancy Components is best for: playful text effects and small interactions for landing pages and portfolios.
- qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.
All comparisons, with prices read on each library's own site.
Questions
Do I need Next.js?
No. Base44's docs say its apps are React apps built with Vite. The components are React, so you can ignore the Next.js notes in the guides.
Is Base44 free?
Its pricing page lists a Free plan with 25 message credits a month. GitHub sync needs Builder ($40 a month billed annually) or higher. The pieces are separate: six are free, and paid pieces are a one-time purchase.
Is anything free?
Yes. Six pieces are free under the MIT licence and install with one shadcn command. The Day / Night toggle is also on the free code page.
Can I use them in a client project?
Yes. The licence covers personal, commercial and client projects. You can't resell the source code itself.


