Which Frameworks and Stacks Do the Components Support?

Every brief targets React + TypeScript with Tailwind CSS and shadcn/ui primitives — a stack supported by Lovable, Bolt, v0 and Cursor. Copy the prompt into the editor you use.

Is It Free? Can I Use the Components Commercially?

Yes. Browsing the visual references and copying prompts from the composer or Components prompt library is free. The page presents prompt briefs and visual references; the license of the implementation produced by your chosen editor depends on that editor and your use of the output.

Can I Use These Prompts In Lovable, Bolt, v0 or Cursor?

Yes. Use the prompt composer above for a custom brief, or open the Components prompt library for gallery dialogs. Paste the brief into MeDo or another AI editor; this page does not import a file or provide a raw code download.

How Are Components Auto-Captured From AI Builds?

When you publish a MeDo project, the builder detects reusable sections — navbar, hero, pricing table, footer — and offers to publish them to the marketplace with your credit. You can opt out per project or per component, and only sections you approve go public.

Can I Request a Component That Doesn't Exist Yet?

Use the prompt editor to shape the brief, copy it, and open MeDo for the real generation step. The marketplace page itself remains a curated preview and prompt surface.

AI Component Prompts

Browse production-ready navbars, heroes, pricing tables, forms, dashboards and footers. Copy a Tailwind + shadcn-oriented prompt, then open MeDo or your preferred AI editor to build it.

medo.dev/components

Preview

Prism

FeaturesPricingBlog

Starter

Pro

$29

Team

$99

Revenue

+12.3%

$48,290

Users

1284

Orders

342

Describe a Component, Copy a Prompt

Edit the prompt here, then copy it into the tool you use.

Open MeDo

Start with a proven prompt

Featured Components — Visual references for your next brief

Three static visual references for inspiration. Use the prompt composer above or browse the Components prompt library for a copy-ready brief.

Browse the Full Marketplace

Prism

FeaturesPricingBlog

Preview

Template

Glassmorphic Navigation Bar

A transparent glassy top nav with dropdown menus and a rounded CTA — perfect for SaaS landings.

by medo.studio682421

Starter

Pro

$29

Team

$99

Preview

Template

Three-Tier SaaS Pricing Table

A pricing table with highlighted mid-plan and checkmark feature lists — Stripe-ready copy.

by medo.studio512318

Revenue

+12.3%

$48,290

Users

1284

Orders

342

Preview

Template

Analytics KPI Dashboard Card

A dashboard card with a KPI number, sparkline chart and secondary metric tiles.

by medo.studio389247

Why Use MeDo Prompts for Components

A prompt-first component workflow — browse curated patterns, copy a brief, and build in the tool you already use.

01 / 06

From a Prompt to a Component Brief

Start with a concrete component brief such as a three-tier pricing table, then copy the prompt into MeDo or another AI editor.

Preview

Prompt

Generate a pricing table with 3 tiers and a monthly-yearly toggle

Starter

Pro

$29

Team

$99

02 / 06

A Curated Component Gallery

This page presents a curated set of reusable patterns — navbars, heroes, pricing blocks and footers — with prompts you can adapt.

Preview

Step 1
You ship an AI app
Step 2
MeDo detects reusable sections
Step 3
Published to the gallery, credited to you

03 / 06

Use the Prompt in Any Project

Use the prompt composer above for a custom brief, or open the Components prompt library to copy a brief for MeDo, Lovable, Bolt, v0 or Cursor. The page does not import files directly.

Preview

Gallery

Prism

FeaturesPricingBlog

Your project

Prism

FeaturesPricingBlog

04 / 06

Works With Lovable, Bolt, v0 & Cursor

Use a copy-ready brief from the prompt composer or Components prompt library in MeDo, Lovable, Bolt, v0 or Cursor and keep your existing AI stack.

Preview

Lovable

Bolt

Cursor

Copy prompt into any AI editor

05 / 06

Tailwind + Shadcn, Fully Themeable

Every brief uses Tailwind CSS and shadcn primitives with semantic design tokens — carry the palette, radius and typography constraints into your own implementation.

Preview

Same button, three themes

Light

Dark

Brand

06 / 06

Clear Prompts, Easy to Adapt

Each brief states the layout, states and accessibility intent clearly so you can adapt it to your own product and implementation stack.

Preview

medo-ai / componentsPrompt set

12curated patterns

12 component briefsfree to copy

Component Patterns in the MeDo Prompt Library

Common sections of a modern web app — from marketing landing pieces to admin shells — described as adaptable, themeable component prompts.

Navigation Bars

Sticky, transparent, glassy or dark — with logo, links, dropdowns and CTA. Ready for desktop and mobile out of the box.

Hero Sections

Centered, split-screen, video background or gradient — every hero comes with headline, subtext, badge pill and CTA buttons.

Pricing Tables

Two, three or four tiers with monthly-yearly toggle, feature lists, highlighted plans and enterprise contact rows.

Forms

Contact, waitlist, multi-step and auth forms with validation states, error messages and rounded submit buttons.

Dashboards

Admin shells with sidebars, KPI cards, charts, tables and empty states — ready to wire to real data.

Footers

Multi-column link footers, minimal single-row footers and dark newsletter footers with social icons.

Browse Components by Category

Dedicated galleries with real previews and copy-ready prompts for each component type.

Footer Components Avatar Components

Component Prompt Library Use Cases

MeDo speeds up indie hackers, vibe coders, designers, agencies, non-technical founders and internal component library maintainers alike.

Indie Hackers Shipping Fast

Skip weeks of layout work. Grab a hero, a pricing table and a footer, snap them together in a MeDo project and launch your landing page tonight.

Vibe Coders on Lovable & Bolt

Stop asking your AI editor to redraw the same navbar. Copy a battle-tested prompt from MeDo, paste it into Lovable or Bolt and get consistent output every time.

Designers Prototyping in Real Code

Start from responsive Tailwind + shadcn-oriented prompts instead of static Figma frames, then let your chosen editor produce the implementation.

Agencies Standardizing Deliverables

Build client sites 3× faster by starting from a curated set of vetted components — the same navbar, hero and pricing block, retextured for every brand.

Non-Technical Founders

You don't need to know Tailwind or React. Describe the section you want, copy the prompt into MeDo, and keep editing there.

Component Library Maintainers

Seed your own internal library with high-quality baselines, then fork and re-theme each component to match your team's design system.

How to Use a Component Prompt With MeDo

From a prompt brief to a working component in four steps — keep the real generation step in MeDo.

Describe the Component

Type a prompt like 'Build a dark theme footer with 4 link columns, newsletter signup and social icons', then copy it into MeDo.

Preview & Refine

Review the curated visual preview, edit the prompt, and copy the updated brief into your chosen AI editor.

Copy the Prompt

Use Copy prompt to bring the brief into MeDo, Lovable, Bolt, v0 or Cursor.

Build in MeDo

Open MeDo from the page CTA, use the copied prompt in the real builder, and continue from the resulting project.

Explore More MeDo Builders

Beyond components, explore MeDo product categories and take prompts into the main app when you are ready to build.

Coming soon

AI Website Builder

Generate full multi-page websites from a prompt — hero, features, pricing, blog and footer, all wired up.

Coming soon

AI Ecommerce Builder

Launch real Stripe & PayPal storefronts with products, cart, inventory and CMS from a single prompt.

Coming soon

AI Mobile App Builder

Ship native iOS and Android apps from a prompt — SwiftUI on iOS, Compose on Android, no wrappers.

Coming soon

AI Health & Fitness App

HealthKit and Google Fit ready fitness apps — trackers, workouts, sleep and meditation, from a prompt.

Components Marketplace

Browse a curated set of prompt-ready components — navbars, heroes, pricing, forms and footers — with visual previews.

Coming soon

More Builders

Restaurant, portfolio, SaaS, agency, nonprofit and blog builders — more categories coming soon.

AI Component Prompts FAQ

21st.dev and traditional kits are community-uploaded or hand-crafted libraries. This page is a curated prompt library: choose a pattern, copy its brief, and use it in MeDo or another AI editor.

Take the Prompt Into MeDo.

Copy a component prompt, then open MeDo to turn it into a working product with the main app's real generation flow.

Open MeDo