snqb/component-craft

Component Craft — Premium UI from Community Registries

Source production-quality React/Tailwind components from the best community libraries. Goes beyond vanilla shadcn into polished, animation-rich, visually striking UI.

When to Use

• Building a landing page, hero, or marketing section
• Need image-overlay cards, gradient borders, glass effects
• Want Framer Motion animations without writing from scratch
• Looking for bento grids, testimonials, pricing, feature sections
• Building a page that should look "designed" not "developed"

---

Sources (ranked by quality + breadth)

1. 21st.dev — Community Component Marketplace

What: 500+ shadcn-compatible components from design engineers. The "npm for UI." Install: npx shadcn@latest add "https://21st.dev/r/AUTHOR/COMPONENT" Browse: https://21st.dev

Key Categories

| Category | Count | Examples | |----------|-------|---------| | Heroes | 73+ | Gradient hero, image hero, split hero, video bg | | Features | 36+ | Bento grid, icon cards, comparison tables | | Cards | 40+ | Glass card, image overlay, gradient border, tilt | | Buttons | 30+ | Shimmer, magnetic, gradient, expanding | | Testimonials | 20+ | Marquee, carousel, grid, single quote | | Navigation | 11+ | Floating nav, command palette, sidebar | | Backgrounds | 33+ | Dot grid, gradient mesh, aurora, particles | | Calls to Action | 34+ | Banner CTA, inline CTA, sticky CTA | | Pricing | 15+ | Toggle, comparison, featured tier |

Browse by URL

https://21st.dev/community/components          # All components
https://21st.dev/community/components?tab=heroes
https://21st.dev/community/components?tab=features
https://21st.dev/community/components?tab=cards
https://21st.dev/community/components?tab=buttons
https://21st.dev/community/components?tab=backgrounds
https://21st.dev/community/components?tab=testimonials

MCP Server (AI-powered generation)

21st.dev offers an MCP server called Magic for AI-powered component creation:

// Claude Desktop / Cursor / Windsurf MCP config
{
  "mcpServers": {
    "21st_magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "TWENTY_FIRST_API_KEY": "YOUR_KEY" }
    }
  }
}

Get API key: https://21st.dev/magic/console

Prompt pattern: /ui create a [component] with [style]

---

2. Magic UI — 150+ Animated Components

What: Free, open-source animated components. Framer Motion + Tailwind. Perfect shadcn companion. Install: npx shadcn@latest add "https://magicui.design/r/COMPONENT" Browse: https://magicui.design GitHub: https://github.com/magicuidesign/magicui (18k+ ★)

Best Components

| Component | Use For | |-----------|---------| | marquee | Infinite scroll logos/testimonials | | bento-grid | Feature sections with mixed sizes | | dock | macOS-style dock navigation | | globe | 3D interactive globe | | particles | Particle background effects | | shimmer-button | CTA buttons with shimmer | | number-ticker | Animated counting numbers | | orbiting-circles | Orbital animation | | shine-border | Animated border glow | | animated-list | Staggered list reveal | | blur-fade | Blur-to-focus text reveal | | word-rotate | Rotating text animation |

# Install example
npx shadcn@latest add "https://magicui.design/r/marquee"
npx shadcn@latest add "https://magicui.design/r/bento-grid"

---

3. Aceternity UI — 330+ Premium Components

What: Beautiful animated components. Best for landing pages. Mix of free + paid (All Access $49). Browse: https://ui.aceternity.com/components Docs: https://ui.aceternity.com

Standout Components (Free)

| Component | Visual Effect | |-----------|--------------| | background-beams | Animated beam lines | | spotlight | Mouse-following spotlight | | 3d-card | Tilt/parallax card effect | | text-generate-effect | Character-by-character text reveal | | sparkles | Sparkle particles on text | | infinite-moving-cards | Auto-scrolling testimonials | | tabs | Animated underline tabs | | sticky-scroll-reveal | Content reveals on scroll | | tracing-beam | SVG path tracing on scroll | | background-gradient | Animated gradient mesh | | aurora-background | Northern lights effect | | floating-dock | macOS dock with physics |

Install Pattern

# Aceternity uses direct copy-paste (not npx shadcn)
# Browse component → copy code → paste into your project
# Requires: framer-motion, tailwindcss, clsx, tailwind-merge

---

4. Cult UI — Emerging Components

Browse: https://www.cult-ui.com Focus: Micro-interactions, creative UI experiments

Notable: hover-card-gradient, morphing-dialog, expanding-card

---

5. Indie UI — Dark-First Templates

Browse: https://ui.indie-starter.dev Focus: SaaS templates, dark mode, minimal aesthetic

---

6. Lukacho UI — Animated Primitives

Browse: https://ui.lukacho.com Focus: Animated borders, buttons, text effects

---

Design Patterns (Copy These)

Image-Overlay Card (Travel/Resort)

<div className="group relative h-[240px] rounded-2xl overflow-hidden">
  <img
    src={imageUrl}
    alt={title}
    className="absolute inset-0 w-full h-full object-cover
               transition-transform duration-700 group-hover:scale-105"
    loading="lazy"
  />
  <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/30 to-transparent" />
  <div className="relative z-10 flex flex-col justify-end h-full p-4">
    <span className="text-xs text-white/60 font-medium uppercase tracking-wider">{subtitle}</span>
    <h3 className="text-white font-bold text-lg">{title}</h3>
    <p className="text-white/80 text-sm line-clamp-2 mt-1">{description}</p>
  </div>
</div>

Glass Card

<div className="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl p-6
                shadow-[0_8px_32px_rgba(0,0,0,0.12)]">
  {/* content */}
</div>

Gradient Border Card

<div className="relative rounded-2xl p-[1px] bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500">
  <div className="rounded-2xl bg-white dark:bg-gray-950 p-6">
    {/* content */}
  </div>
</div>

Numbered Feature List

{items.map((item, i) => (
  <div key={i} className="flex gap-4 py-4 border-b border-gray-100 last:border-none">
    <span className="shrink-0 w-8 h-8 rounded-full bg-blue-50 text-blue-600
                     flex items-center justify-center text-sm font-bold">
      {i + 1}
    </span>
    <div>
      <h4 className="font-semibold text-gray-900">{item.title}</h4>
      <p className="text-sm text-gray-500 mt-0.5">{item.description}</p>
    </div>
  </div>
))}

Colored Icon Card (Practical Info)

<div className="flex items-start gap-3 p-4 rounded-xl border border-blue-100 bg-blue-50/50">
  <div className="shrink-0 w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center">
    <Icon className="w-4.5 h-4.5 text-blue-600" />
  </div>
  <div>
    <span className="text-[11px] text-gray-400 uppercase tracking-wider font-medium">{label}</span>
    <p className="text-sm text-gray-700 leading-relaxed mt-0.5">{value}</p>
  </div>
</div>

Bento Grid

<div className="grid grid-cols-2 md:grid-cols-3 gap-3 auto-rows-[180px]">
  <div className="col-span-2 row-span-2 ...">Big feature</div>
  <div className="...">Small card</div>
  <div className="...">Small card</div>
  <div className="col-span-2 ...">Wide card</div>
</div>

---

Decision Tree

Need a component?
├── Standard form/layout → shadcn-ui (skill: shadcn-ui)
├── Animated landing page → Aceternity UI or Magic UI
├── Community component exists → 21st.dev (search first!)
├── Image-heavy cards → Use image-overlay pattern above
├── Micro-interactions → Cult UI or Lukacho UI
└── Full page template → Magic UI templates or 21st.dev blocks

---

Anti-Patterns

| ❌ Don't | ✅ Do | |---------|------| | Install a library for one component | Copy-paste the component code | | Use animations everywhere | Animate key moments: page load, hover, scroll-into-view | | Mix 3+ animation libraries | Pick one: Framer Motion (React) or CSS | | Use heavy 3D/WebGL on mobile | Conditional: desktop only, or reduce to CSS | | Copy 21st.dev components without customizing | Adapt colors, spacing, content to your brand | | Forget loading="lazy" on image cards | Always lazy-load images below the fold |

---

Related Skills

| Skill | When | |-------|------| | shadcn-ui | Base component structure + accessibility | | frontend-design | Creative aesthetics, avoiding generic look | | ui-design | Composition, hierarchy, color theory | | unsplash | Verified stock photos for image cards | | mobile-first | Touch targets, fluid type, viewport traps |