📑 What's Inside

  1. Manus, the AI that builds it for you

  2. 21st.dev, the cheat code

  3. Watermelon UI, the biggest free toolbox

  4. Cult UI, free animated pieces

  5. Skiper UI, the fancy stuff

  6. How to use all 5 together

  7. Quick reference

1. 🤖 Manus

Link: https://manus.im What it is: An AI that builds entire projects for you while you do something else. Made by: Originally a startup called Butterfly Effect. Bought by Meta for $2 billion in December 2025. Price: Free tier to start. Paid plans for heavy use.

Why it matters

Most AI tools answer a question and stop. Manus keeps going. You tell it what you want and it actually does the whole job. Browses the web, writes the code, makes the files, deploys the site. It runs on its own virtual computer for as long as the task takes.

If you only ever use one tool from this list, this is the one that changes the most.

How to use it in 4 steps

Step 1. Go to manus.im and sign up. Free account is fine.

Step 2. Type what you want done. Be specific about the result, not the steps.

❝

⚠️ Bad prompt: "help me build something." Good prompt: "Build a one page landing site for a dog grooming business in Berlin. Modern, minimal, with a booking form."

Step 3. Hit send and walk away. Manus will work for minutes or hours. You'll get updates as it goes.

Step 4. When it's done, download the files or preview the live result. You can ask for changes in the same chat.

What to ask it for

You type

What you get back

"Build me a 12 slide deck on AI agents, modern minimal style"

A finished slide deck

"Find the top 20 AI tools on Product Hunt this month, give me a spreadsheet"

A CSV with names, links, votes

"Build a working web app that tracks my workouts"

Deployable code

"Find 50 leads in fintech with verified emails"

A spreadsheet

"Research my 3 biggest competitors and write a positioning doc"

A finished doc

Tips

→ Treat it like an intern, not a search engine. Long, specific prompts beat short ones. → Tasks under 5 minutes are not worth using Manus for. Save it for things that would take you an hour. → Run multiple tasks in parallel by opening multiple chats. → Check the work before you ship it. It's good, not perfect.

❝

⚠️ Manus is now owned by Meta. Account and pricing details may shift over time.

2. 🛒 21st.dev

Link: https://21st.dev What it is: One website with thousands of ready made page sections you can drop straight into your project. Plus a feature called Magic that lets your AI editor grab pieces by itself. Made by: Serafim (@serafimcloud on GitHub). Price: Free to browse and install. Magic has a free tier and paid plans.

Why it matters

The other libraries on this list are stores. 21st.dev is the mall. It's one search bar across the entire ecosystem of free shadcn pieces. And Magic is the killer feature. Instead of you searching for a "pricing table with toggle," your AI editor goes and gets it.

This is the cheat code. The thing that separates people who still copy paste from people who just describe what they want.

How to use it, browsing yourself

Step 1. Go to 21st.dev and search what you need.

Step 2. Click the piece you like, hit "Install."

Step 3. Copy the install command. Looks like this:

bash

npx shadcn@latest add "https://21st.dev/r/shadcn/calendar"

Step 4. Paste it in your project terminal. Done. The piece is in your code, ready to use.

How to use Magic (the cheat code)

Step 1. Sign up at 21st.dev. Get your Magic key from the dashboard.

Step 2. Open your AI editor (Cursor, Claude Code, Windsurf). Find the MCP settings.

Step 3. Add this to your config file, replacing the key:

json

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["@21st-dev/magic@latest", "API_KEY=\"your-key-here\""]
    }
  }
}

Step 4. Restart the editor. Then type prompts like:

❝

"use magic to find a pricing table with monthly/yearly toggle and add it to my landing page"

The AI will find it, install it, wire it in. You watch.

What to ask Magic for

You type

What happens

"use magic to find a hero with animated background"

Pulls and installs a hero section

"use magic to add a calendar with time slots"

Drops in a calendar piece

"use magic for a sidebar with collapsible groups"

Installs and wires up a sidebar

"use magic to add a pricing table with toggle"

Done in one prompt

Tips

→ Magic works best when you describe the visual you want, not the technical name. → Always preview the piece before letting Magic install. Sometimes there's a better option two scrolls down. → Star pieces you like. Your library grows over time. → 21st.dev pulls from creators all over, so quality varies. The most upvoted pieces are usually the safest.

3. 🍉 Watermelon UI

Link: https://ui.watermelon.sh What it is: 260+ free, ready made pieces for your website. The biggest free toolbox in the space. Made by: Watermelon Corp. 25+ contributors, 500+ daily users, 50,000+ installs. Price: 100% free. Always. No signup.

Why it matters

If you're picking one library to live in, this is it. The team literally says they're "powering 500+ vibe coders" on their site. Biggest free pool of ready made pieces. No login, no premium tier, no catch.

How to use it in 4 steps

Step 1. Make sure your project has shadcn set up. If not, run:

bash

npx shadcn@latest init

Step 2. Browse ui.watermelon.sh and pick a piece.

Step 3. Copy the install command from the piece's page:

bash

npx shadcn@latest add "https://registry.watermelon.sh/button.json"

Step 4. Paste in your project terminal. The piece is now in your code. Tweak it however you want.

What to grab from it

You need

Grab

A dashboard layout

Watermelon dashboards

Charts and data viz

Watermelon charts

Forms, modals, accordions

Watermelon core pieces

Animated cards and hover effects

Watermelon motion pieces

Buttons that don't look generic

Watermelon button variants

Tips

→ Browse by category, not search. The category pages show variations side by side. → New pieces drop weekly. Check back monthly. → Once installed, the code is yours. Edit colors, spacing, animations directly. → Pairs perfectly with 21st.dev Magic. Magic pulls from Watermelon too.

4. 🖤 Cult UI

Link: https://www.cult-ui.com What it is: 78+ animated pieces and effects for your website. Free forever. Made by: Jordan Gilliam (@nolansym on X). Price: 100% free. Open source. 4,500 GitHub stars.

Why it matters

The free animated stuff that actually looks good. Cult UI is what you reach for when you want movement on your site without paying for premium pieces. Shift cards, screen capture demos, animated hero sections.

Smaller than Watermelon (78 vs 260), but the curation is tighter and the animations land.

How to use it in 4 steps

Step 1. Go to cult-ui.com/docs/components.

Step 2. Pick a piece. Each one has a live preview.

Step 3. Copy the install command:

bash

npx shadcn@latest add "https://www.cult-ui.com/r/shift_card.json"

Step 4. Paste it in your project terminal. Customize the file directly.

What to grab from it

You need

Grab

A card that reveals more on hover

Shift Card

A SaaS hero with screen demo

Screen Capture

An animated marketing hero

Hero Color Panels

Smooth scroll animations

Cult motion pieces

Tips

→ Cult Pro and AI SDK Agents are separate paid products from the same team. The base Cult UI library stays free forever. → Animations are tuned to feel premium without being distracting. Don't override the timing values. → Best paired with Watermelon for layout and Skiper for show off pieces.

5. 🎨 Skiper UI

Link: https://skiper-ui.com What it is: 103+ uncommon, animated pieces. The fancy stuff you see on the prettiest sites online. Made by: Gxuri (@Gur__vi on X). Price: 24+ free. $129 one time for all 54+ premium pieces. No subscription. Lifetime updates.

Why it matters

Most libraries give you the same buttons and cards everyone else has. Skiper UI ships the stuff you actually see on award winning landing pages. iPhone style dynamic islands, image cursor trails, hover effects that make people screenshot your site.

You don't need it. You want it. It's the polish layer.

How to use it in 4 steps

Step 1. Make sure shadcn is set up in your project.

Step 2. Pick a piece on skiper-ui.com/components.

Step 3. Copy the install command from the piece's page:

bash

npx shadcn add @skiper_ui/skiper40

Step 4. Paste in your terminal. Done. One file, no extra packages.

What to grab from it

You need

Grab

iPhone style dynamic island

Skiper2

Hover team grid

Skiper6

Mouse cursor trail effect

Skiper18

Image reveal animation

Skiper71

Sign in screen that looks expensive

Skiper56

Token swap UI for crypto or fintech

Skiper22

Tips

→ Premium pieces need a paid account. Free ones work out of the box. → The $129 is one time, lifetime updates. Worth it if you ship more than two sites a year. → Founder Gxuri is active on X and responsive to component requests if you pay. → Use Skiper sparingly. One or two showpiece animations land harder than a site full of them.

🔗 How to Use All 5 Together

Real workflow when you start from zero:

Step 1. Plan with Manus. Describe your whole project. Let it scaffold the structure, write the first draft of the code, and give you something to work with.

Step 2. Wire up Magic from 21st.dev. Connect your AI editor so it can grab pieces on demand instead of you searching.

Step 3. Build the bulk with Watermelon UI. Forms, dashboards, buttons, layouts. The boring necessary stuff. Free and fast.

Step 4. Add personality with Cult UI. Drop in animated marketing sections, hover effects, smooth transitions.

Step 5. Finish with Skiper UI. Pick one or two showpiece pieces. The thing that makes people screenshot your hero.

That's the difference between "AI built website that looks AI built" and "site people think a funded team shipped."

📋 Quick Reference

bash

# Manus. No install. It's a web app.
# Go to https://manus.im

# 21st.dev community marketplace
npx shadcn@latest add "https://21st.dev/r/shadcn/calendar"

# 21st.dev Magic config for Cursor or Claude Code
# {
#   "mcpServers": {
#     "magic": {
#       "command": "npx",
#       "args": ["@21st_dev/magic@latest", "API_KEY=your_key"]
#     }
#   }
# }

# Watermelon UI, 260+ free pieces
npx shadcn@latest add "https://registry.watermelon.sh/button.json"

# Cult UI, 78+ free animated pieces
npx shadcn@latest add "https://www.cult-ui.com/r/shift_card.json"

# Skiper UI, premium polish pieces
npx shadcn add @skiper_ui/skiper40

🚨 Common Mistakes to Avoid

→ Don't install everything. Bloated projects are slower to ship.

→ Don't skip shadcn init. Most of these need it set up first.

→ Don't trust Manus blindly. Always check the output before shipping.

→ Don't pay for Skiper until you've shipped at least one site. Use the free pieces first.

→ Don't use all 5 on the same project. Pick the 2 or 3 that fit your build.

By The AI Leverage - Learn and master AI daily

Keep Reading

View more
caret-right