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.
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.”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):
| Field | What it does |
|---|---|
| Headline | Defaults to “Work with me” if left blank. |
| Pitch | One short paragraph under the headline (280 chars), e.g. “Available for freelance and contract work.” |
| Hire link | A booking or contact link — cal.com, Calendly, your contact form, etc. |
| Button label | Overrides the CTA button text. Defaults to “Work with me”. |
| Contact email | Adds a separate Email button. |
| Right-side media | Choose None, a built-in preset graphic, an uploaded image/GIF, or one of your own published components to display beside the block. |
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
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.dev 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.
Link Your Premium Catalog (“Pro Components”)
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.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.
- The platform membership plan (the “supporters” count shown on 21st.dev/pricing) is about supporting 21st.dev itself, not a way to receive money as an individual author — use the Donation block for that.