madeforaward

The CLI for Made for Award — premium GSAP and Three.js animation components for React and Next.js. One command copies a component's source, styles and assets into your project and installs what it needs.

npx madeforaward add 001

No global install. Works with npm, pnpm, yarn and bun.

How it works

Every component on the site has a catalogue number (001, 002, …) and a CLI tab on its page with the exact commands. add fetches the component from madeforaward.com and writes its files into your project the same way you would by hand:

components/mfa/PinnedSlider.tsx     the component (React + TypeScript + Tailwind, 'use client')
components/mfa/pinned-slider.css    only what Tailwind can't do (@font-face, keyframes) — not every component has one
public/mfa/pinned-slider/…          images and fonts the component ships with, if any

Then it installs the packages the component imports (for example gsap, @gsap/react, three) with your package manager, and prints the import to use.

If your project already has a components/ folder somewhere (src/components, app/components, …) the files go into <that folder>/mfa/ — the CLI tells you the path it picked.

Commands

| Command | What it does | | ----------------------------- | ------------------------------------------------------------------- | | npx madeforaward add <id> | Add a component to the current project. <id> is the catalogue number (001 or 1) or the slug (pinned-slider). | | npx madeforaward list | List every component available through the CLI, with its tier. | | npx madeforaward login | Sign in with Google (opens your browser). | | npx madeforaward whoami | Show which account is signed in on this device. | | npx madeforaward logout | Sign out on this device. | | npx madeforaward --help | All commands and options. |

add options

| Option | Effect | | -------------- | ---------------------------------------------------------------------- | | --overwrite | Replace files that already exist without asking. | | --no-install | Write the files but skip installing dependencies (you run the install). |

Free and Pro components

• Free components need a Made for Award account — sign in once, no purchase.
• Pro components need a lifetime purchase on madeforaward.com. Sign in with the same Google account you purchased with.

npx madeforaward login
# → your browser opens Google sign-in
# → pick the Google account tied to your purchase
# → done — this device stays signed in for 30 days

Sign-in is Google only. There are no passwords, codes or API keys to copy around; the token lives in ~/.madeforaward/config.json on your machine and logout removes it.

Your purchase is checked live every time you add a Pro component, so access follows your account, not a key.

Requirements

• Node.js 18+
• A React or Next.js project — the CLI looks for react or next in your package.json and refuses to run anywhere else.
• Tailwind CSS — components are styled with Tailwind classes. If it isn't installed, the CLI prints the two-minute setup and asks before continuing.

Example

npx madeforaward add 018

 madeforaward
│
◇  Detected next · pnpm · tailwind
◇  Component 018 found
●  GSAP 3D Coverflow Carousel v1.0.0 PRO
◇  Dependencies installed
◇  + components/mfa/CoverflowCarousel.tsx
◇  + components/mfa/coverflow-carousel.css
│
└  ✔ Done in 4.2s

   import CoverflowCarousel from '@/components/mfa/CoverflowCarousel'
   …

Then use it in a page:

import CoverflowCarousel from '@/components/mfa/CoverflowCarousel'

export default function Page() {
  return <CoverflowCarousel />
}

Every component takes its content as props (slides, images, copy…) with the demo's data as defaults, so it renders exactly like the preview before you change anything. The usage printed after add — and the Usage.tsx tab on the component's page — shows the props.

Not every component is in the CLI

A few of the earlier, whole-page builds are delivered as complete projects through the members-only Discord instead of as drop-in files. Their page on the site says so, list leaves them out, and add points you to the right place.

Troubleshooting

| Message | What to do | | --------------------------------------------- | -------------------------------------------------------------------------------------------- | | This CLI only works inside React or Next.js projects | Run it from the folder that has your package.json. | | This is a pro component — log in first | npx madeforaward login, with the Google account you purchased with. | | No active purchase found for <email> | You're signed in with a different account than the one that bought. logout, then login with the right one, or get lifetime access. | | Component "…" was not found | Check the number on the catalogue; list shows every id the CLI knows. | | Port 8321 is already in use | The login flow listens on localhost:8321 for a moment. Close whatever is using it and try again. | | Timed out — login was not completed | The browser tab was left open for more than 3 minutes. Run login again. | | Auto-install failed | The CLI prints the exact npm install … line — run it yourself. |

Notes

• Components are plain React + Tailwind with no Next.js-only imports — they work in Vite and CRA too.
• Animations respect prefers-reduced-motion; scroll-driven ones handle resize and touch.
• Files are yours to edit. Re-running add for the same component asks before overwriting.
• Nothing is collected beyond the sign-in needed to check your purchase.

Links

• Catalogue: https://www.madeforaward.com/collections
• Pricing: https://www.madeforaward.com/pricing
• Questions: https://www.madeforaward.com/contact

Made by madeforaward.com