Skip to main content
21st.dev doesn’t process payments on your behalf — there’s no in-app checkout or payout system. Instead, every monetization feature works the same way: you drop in a link to a service you already use (a checkout page, a booking page, a donation platform), and 21st.dev surfaces it to the right audience at the right moment. This page covers all of them.
Components stay free. There’s no price field on individual components — monetization applies to templates (one-time paid listings) and to blocks on your public profile (hire, donate, pro catalog). If you want to sell a component-like product, package it as a template instead.

​
Sell a Template

Templates are the only catalog item that supports a price. Each template has its own Price and Buy / download URL.
1

Open your template

In Studio, go to your Templates list and open (or create) the listing.
2

Set a price

Enter a Price (USD). Leave it at 0 to keep the template free.
3

Add a buy link

Set Buy / download URL to wherever the purchase actually happens — your own Gumroad/Lemon Squeezy/Stripe Payment Link, or a page on your own site.
21st.dev never touches the money. There’s no built‑in checkout, no Stripe integration on templates, and no payout system. When a visitor clicks buy, they see a disclaimer confirming they’re leaving 21st.dev, then get redirected to your Buy / download URL to complete the purchase on your own site or storefront. You’re responsible for delivery, receipts, and refunds.
If your buy link already carries an affiliate/referral parameter for a third-party vendor (for example a template marketplace that pays you ?via=yourname), set that same URL as your Pro components link (see below) — 21st.dev automatically appends your referral parameter to that template’s buy link so you still get credit.

​
Components Are Free-Only

There is currently no price field, checkout, or paid tier for individual components — only templates carry a price. If you want to monetize component-style work, publish the free version to build reach, and link your paid catalog using the Pro components block below. Component visibility is separate from selling. Published components remain free to visitors. Private personal components remain visible only to their owner, while private components in an active Team workspace are available to its members. Private content is not a paid listing and has no customer checkout.

​
”Work with Me” Block

A hire-and-contact card that renders on your public profile (21st.dev/@you). Configure it in Studio → Profile → Work with me. Fields (all optional — the block only appears once at least one is filled in):

​
Get Tipped or Sponsored

A “Support” block for one-time tips or recurring sponsorship. Configure it in Studio → Profile → Donation by pasting a Donation link. Only links to known donation platforms are accepted:

GitHub Sponsors

Buy Me a Coffee

Ko-fi

Patreon

PayPal / PayPal.me

Open Collective

Liberapay, Boosty, Stripe Payment Links (buy.stripe.com / donate.stripe.com), and Lemon Squeezy links are also accepted even though they’re not called out in the field’s helper text.
When a visitor clicks Support, they see your avatar, bio, and stats, then confirm a disclaimer (“21st doesn’t process payments or issue refunds”) before being redirected to your donation platform in a new tab. The tip itself happens entirely on that platform — 21st.dev only surfaces the link and shows a click count in your Studio analytics.
If you sell components or templates elsewhere — your own shop, a template marketplace, a Gumroad store — add that link under Studio → Profile → Pro components. It renders as a “Pro components” block on your profile pointing at your premium catalog.
The profile block named Pro components is an outbound link to your own premium catalog. It is not tied to a 21st plan and does not change who can view your published 21st components.
If this URL includes a referral/affiliate query parameter (e.g. ?via=yourname), 21st.dev reuses it: any affiliate parameter found in your Pro components link is automatically appended to your own templates’ buy links, so a template sale you drive through 21st.dev still credits your referral.

​
Arrange the Blocks

Studio → Profile → Layout & visibility controls which of the four profile blocks (Featured, Work with me, Pro components, Donation) are shown and in what order. Toggle any block off if you’d rather not display it, and drag to reorder — for example, put Work with me above Donation if you’d rather visitors hire you before they tip you.

​
What’s Not There (Yet)

  • No price/checkout on individual components — templates only.
  • No in-app payments, invoicing, or payout system for anything on this page — every flow above ends with an outbound redirect to a service you control.
  • Builder and Team subscriptions pay for 21st access. Builder can enable AI with a monthly credit allowance, and Team Builder + AI seats include monthly generation credits. These plans are not a way for authors to receive money. Use the Donation block or an external premium catalog for that.