Open-source templates, hosted here

Templates opens on a Verified shelf: eighteen open-source projects we host ourselves, each from one pinned commit, with the rest of the catalogue underneath. Every card credits its repository and licence, and the code downloads straight from 21st or lands in your project with one CLI command.

Hover an icon, watch it run

Animated icons play as soon as the pointer settles on them, and keep looping while it stays. Only the cell you settle on plays, not every one the cursor crosses. With reduced motion on, an icon plays once and stops.

Every shadcn registry in one list

/community/shadcn-directory lists 250+ shadcn registries beside the libraries that live here: two tabs on one page. Each card shows the registry's size, stars and last commit, the list searches, sorts and switches between grid and rows, and every theme - charts, AI blocks, marketing UI and more - has a page of its own.

An icon, and everything around it

Opening an icon shows it large and moving, with who drew it, the set it came from and its licence. Copy it as a component, SVG, Vue, React Native or its name, and the next copy keeps that format. Below it: the same icon in other weights and sets.

A page for every icon set

Phosphor, Tabler, Hugeicons, Remix, Lucide, Heroicons, Material Line and the animated ports each have a page holding their whole set, with the author credited and the catalogue's controls above the grid: size, weight, stroke and the format you copy in.

One preview on a phone, whatever you opened

Themes, templates, shaders, gradients and ASCII art now open in the same light sheet components have: the preview at the top, Bookmark beside the action that matters, and what is similar underneath. The dark lightbox stays where it belongs, on a wide screen.

29,000 icons, one click to copy

A new Icons section: open-source icons in one grid. Clicking one copies it as a React component, SVG, Vue or React Native, with its licence and the author's credit in the copied code.

Search that knows what an icon means

Icons are found by meaning, not by filename: "log out", "leave account" and "door with arrow" all land on the same drawing. Weights and fills fold together, so the grid shows one acorn instead of six.

Pages answer in half the time

Browsing pages respond about twice as fast, and covers on the listings arrive as lightweight images sized for their cards: the templates page now weighs under three megabytes. Slow connections and older laptops feel the difference most.

Every category, one scroll

The Categories block on the home page now carries the whole catalogue. Past the curated Marketing and UI picks, themed shelves like Forms and pickers, Data and feedback, and Media and effects scroll sideways until all 76 categories are in reach.

Faster to open, smoother to scroll

The homepage opens faster and stays smooth as you scroll. Rails further down the page load as you reach them, and images arrive at the size they are shown.

Browse by category

Categories sit on the homepage, so you can jump straight into buttons, pricing tables or heroes. Picking one opens search already filtered, without leaving the page.

Sign-up brings you back

Creating an account with Google or GitHub returns you to the page you started from instead of the front page.

A home that opens on the catalogue

The signed-in home starts with the work itself: a spotlight on the strongest new component, the top ten of the last 24 hours, what landed this week, picks for you, and rails by category. Search moves into the header, where it stays with you as you scroll.

A prompt written for your agent

Copy prompt opens on the agent you build with: Claude Code, Codex, Cursor, Replit, Lovable, Bolt.new or v0. Pick one and it copies straight away, then stays your default on a card, in the preview and on the component page.

Analytics that say where your work travels

Studio analytics answers where the people who found your components came from, outside 21st and inside it, which searches opened them and how high they ranked, and your place among every author this week.

Tabs for the state your work is in

Components, templates and each library open on tabs: featured, published, in review, needs changes, drafts, private, each with a count. Themes split into published and drafts, ASCII, gradients and shaders into public and private.

A team is managed where the team works

Members, roles, invites, the team's name and picture, and deleting the team live in the team's own studio. Billing, seats and usage stay in settings. Old links still land in the right place.

Search finds far more

Broad words like features, hero or dashboard return far more, results keep loading as you scroll, and a misspelling still finds what you meant. Filters and categories narrow the whole search rather than the first page of it.

Film your demo in the editor

Draw a frame over the live demo, record it, then trim the take on a filmstrip and keep a frame as its cover.

A card behind every social link

Hovering the X, GitHub or website icon on a profile opens a card: a year of contributions, follower counts, a bio, or the site unfurled.

A library can be private

A library decides who installs from it. Private keeps everything inside to you or your team, and keeps the library out of search, its page and its microsite. Public leaves each component's own visibility in charge.

Bookmarks became boards

Every list is a board showing a cover collage of the last things saved into it, an All saves board counts every kind of save, and a dashed card starts a new list. Search narrows your lists by name.

The homepage fits a phone

Cards are sized to the screen, category chips get their own full-width row, the publishers wall is a plain grid, and panels that sit side by side on a desktop show one at a time.

One typeface, one blue, one scale

Every headline on the signed-out homepage sits on one scale, with one word set in our serif and our blue. The numbers we claim carry that blue, and the hero sits on a wash of it.

A library manages its components

A library is the same working table as Components: every row states where it stands, offers the one move that state allows, and opens the editor or the preview without navigating away.

Film the demo yourself, in the browser

Press Record next to the video in the details editor and the preview becomes the video's own 4:3 frame. Pick what the card shows, click through the demo, keep the take or shoot another. Chrome and Edge.

Name the knobs your demo hands to visitors

Publishing has a Controls step showing the visitor's panel as they see it, where each row can be renamed and every slider given a range that suits it. The demo itself does not change.

`21st open component:<id>` answered every retry with "provisioning is still in progress", so a published component could not be opened at all. It works now, and anything stuck this way clears itself.

Better results, fewer scrolls

Component search ranks by what people actually adopt, so proven components rise to the top, and an exact name or keyword pulls in matches a plain text match placed at random.

Curated collections for what you search

Over two hundred new collection pages cover what people look for, from custom cursors to chat interfaces. Each one is a ready shortlist with a short explanation and the questions that follow.

One last screen before a CLI publish

A CLI publish opens a review of the component, its demos and their media, with a switcher for the live demo, the cover, the video, or the card as a listing shows it. Access lives here too.

A tab bar where your thumb expects it

On phones a bottom tab bar carries Home, Search, Saved and Profile, and the header slims down to the essentials.

Component pages built for one hand

A component slides in like an app screen: Save is the primary action in a sticky bottom bar, next to copying the prompt, with a Preview / Code / Info switcher.

109 new looks in the Shader Builder

29 new styles with 109 ready-made variants, from liquid metal and smoke rings to glass, grain and halftones. Pick one, tune it, publish it as a component.

The real error, not a generic one

A failed publish names the exact problem and where it is, down to the file and line a type error came from, together with what to do about it.

Slide to the next preview without closing it

Every preview - components, templates, themes, shaders, gradients, ASCII art - moves to the next or previous item in place. Two-finger swipe, arrow keys, the side arrows, or a click on a peeking neighbour, live the whole way.

Filter by license, library and stack

The components sidebar filters by license, by library or brand, and by Tailwind version. Built with searches any npm package, an author search narrows to one creator, and every filter carries its match count.

Builder or Builder + AI

Pricing separates Builder from Builder + AI: unlimited marketplace access without AI, or 500, 1,000 or 2,000 monthly credits. Teams pick one plan for every seat and see the total before checkout.

A simpler welcome after sign-up

The welcome flow ends on one plan: Builder + AI with its credit picker, the monthly price on the button, and the Builder features spelled out. Dropping AI or continuing free is one click.

Remix says what it needs first

Pressing Remix checks your plan before you write a prompt and, if AI is not part of it, shows what remixing costs. After checkout you land back in the composer with the component attached.

Signed out, 21st opens on a rebuilt homepage: a bold hero, rivers of real components and templates you can preview on the spot, the libraries you can build with, the teams already using 21st, and a short FAQ.

Every preview opens in the same lightbox

Themes, templates, ASCII art, gradients and shaders open in the same full-screen lightbox as components: the actions under the preview, similar items a scroll away, and the same keys everywhere - arrows, S, O, B.

Browse every library and author

Two directories cover the people and libraries behind 21st: search the full lists, see how much each one has published, and preview their latest components on hover.

Copy a preview's address or reload the page and that preview opens straight back up, on whatever page you were browsing.

A refined full-screen preview

The preview sits in a centered, width-capped box, with similar components in the familiar grid below. The toolbar keeps the actions you reach for and tucks the rest into a menu.

Copy the prompt or the code from one button

Copy is a single split button on the component page and in its preview: pick the prompt or the raw code. Save sits front and centre as a bookmark that opens your lists.

The 21st AI header shows your account and your credit balance, and when a generation would cost more than you have left, the model picker offers a credit pack right there.

See all your components in one place

Studio shows your components across your personal space and every team you belong to, with quick filters. Publishing a name that is taken offers to update the existing component in place.

A sign-in dialog that shows the best work

The form sits on the left, and beside it a slowly drifting, tilted wall of the most-installed community components, live previews included. Small screens keep the compact dialog.

Pick the models that draft your sketches

Choose one model or several and each produces its own take side by side, so you can compare directions and keep the one that fits. A price hint shows the credit cost first.

Find similar work without leaving the preview

Under any component, theme, shader, gradient or ASCII preview sits a grid of similar work. Picking one swaps it into the same window, with its code and prompt ready.

Set up your team after you pay

Buying a team plan goes straight to payment; you name the team and invite people once you are back.

A rebuilt Studio, faster and more reliable

Studio has a refreshed editor on a faster environment: files open quickly, stay ready when you switch between them, and project loading and retries are smoother.

Know where you are and what is saved

The editor shows the full file path, a saved indicator, clearer read-only files, and a short hint when you open a demo file.

Add and remove demos without the noise

Adding a demo opens it in the editor with a ready starter, and the preview follows it. Removing one asks in a dialog, with no loading popups either way.

A clear path through your first steps

A Getting started checklist in the sidebar walks you from finding a component to publishing one. Steps complete as you use 21st, and it tucks into Help when you want it gone.

Submissions no longer fail on a license

A publish defaults to the MIT license, for new components and for re-published older ones, so submissions from Studio go through instead of failing validation.

One rhythm across every sidebar panel

Every sidebar panel shares one compact layout: equal row heights, icons on a single vertical line, matching section labels and the same spacing throughout.

Publish first, feature when it is ready

A component is Published or Private, and catalog featuring is a separate review step. Studio shows In review, Needs changes, Featured and Processing, each with its next action.

Turn a moving gradient into ASCII art

The ASCII Art editor can take an animated gradient as its source, so a flowing gradient becomes live, moving ASCII art you can export or publish.

See where your AI credits go

A Usage page shows how many credits you have this period, what came from your plan versus packs, and every generation with its model and cost.

Recent searches and categories in quick search

Quick search opens on the searches you ran recently and a set of browsable categories, so you can jump back to one or explore a topic without typing.

Publishing a shader, gradient or ASCII creation to the community also makes a real marketplace component, with its own code and demo, installable with the CLI. The two link to each other.

Build and share animated shaders

Create animated shader backgrounds in a live editor: colours, motion, patterns, surface finish and cursor interaction, with undo and redo. Export as an image, video, GIF, code or a prompt, then publish it.

Sign in without leaving the page

Signing in happens in a modal right where you are, with an email code or a connected account, and every community page carries a Sign in button.

Select and move things in bulk

Studio can select several components, templates or themes at once and move the batch into a library or another team, or remove them in one step.

Build, animate, and share gradients

The Gradient Builder creates layered gradients, tunes their colours and motion, and exports them as images, GIFs or video. Publish them, remix them, and feature them on your profile.

Keep creating while designs publish

Turbo Publish sends a finished design to a background queue so you can carry on creating; each queued item appears in the community when it is ready.

Community themes for your microsite

Your author microsite can use a published community theme, giving the whole page and its sidebar a coordinated look.

Group your components into a library

Publish a set of components as a named library with its own logo, links, and public page. Your profile gains a Libraries section so people can browse your work by collection, and every library gets a page of its own to share.

Move things around without republishing

From Studio you can add an existing component to a library, take it back out to your personal work, or move it from one library to another, without publishing anything again.

See what to build next

The Explore tab in Studio now ranks opportunities for you: niches nobody has filled yet, categories that are picking up, and things people searched for but couldn't find, so you always have a shortlist of what's worth building.

Turn any photo into ASCII art

Drop in an image, pick a look, and tune it live with sliders for style, detail, colour and effects - or describe the look and the built-in assistant adjusts it. Animate it, then export an image, video or GIF.

Browse, remix, and publish recipes

Every look you build is a recipe. Browse the gallery, filter by tag, drop any recipe onto your own photo in one click, and publish the ones you are proud of.

Billing at a glance

Billing gets to the point: your options right there if you are not paying yet, and a cleaner panel with your next bill date and what you pay if you are.

Shared AI credits for teams

On a Team plan everyone draws credits from one shared pool. The owner buys extra packs or turns on automatic top-ups, and can promote a teammate to help with billing and invites.

Brand and UI logos in your editor

Search for a brand or UI logo and drop the SVG straight into your project from the CLI and the MCP tools.

A free-form profile board

Your profile is now 21st Bento: arrange components, links, photos, GIFs, and notes exactly how you want them.

Get paid for your work

Feature your best components, add a donation link, let people hire you, and link your pro components and socials, all from the same board.

Community Themes, free for everyone

Browse every shadcn theme the community built, preview it live, and publish your own in a couple of clicks.

Search 21st from inside your AI assistant

Results now come back as an inline, interactive card gallery, with live previews and one-tap get code, instead of plain text.

Connect 21st to assistants that support it

You can now connect 21st's tools to AI assistants that support connectors, so an assistant can search and pull in your components directly.

Magic is now 21st AI

Describe an idea and every frontier model builds it at once, so you compare real takes and keep the best. The home page is refreshed to be chat-first.

A rebuilt command-line tool

Publish and manage your components, themes, and templates from the terminal, pull in dependencies from other registries, and add 21st to your editor in one click.

A microsite for every author

Every author now gets a personal microsite at their own web address, with a custom look and control over which components to show.

See every device signed into your account

A new Devices page lets you see and sign out every device and session connected to your account.

Bookmarks, sorted by type

Your bookmarks page is redesigned with separate rows for components, themes, and templates.

Teams get a shared plan

Teams can now buy shared access on a single per-seat plan and invite their whole team.

Full control over component visibility

You can set any component to public, unlisted, or private right from the edit dialog.

Studio profiles, fully customizable

Studio profiles gain full customization: page themes, a hire-me block, a featured piece, and profile view stats.

Email delivery, fixed

Team invites and account emails now reliably reach your inbox instead of the spam folder.

No more false upgrade prompts

Members no longer get wrongly asked to upgrade when a billing check hiccups, including right after paying.

The homepage feed loads reliably

The homepage feed no longer intermittently shows a long loading state or a blank grid.

Publish and browse community color themes

You can publish, browse, search, and bookmark community color themes, and filter them by primary color.

Manage your subscription from settings

Your subscription can now be managed directly from settings, with quarterly and yearly billing options.

Support 21st with a membership

You can support 21st with a paid membership that unlocks more component copies for you and your team.

The homepage becomes a real landing page

It's now a real landing page with a personalized feed of components to discover.

Browse, search, and sell templates

You can browse, search, and filter ready-made templates in the community, and component authors can publish and sell templates from their studio.

Publish native mobile components

You can now publish React Native / Expo components alongside your regular web ones. Mobile preview is the default view for them, so visitors see how the component actually looks on a phone the moment they open it, not a desktop approximation.

Compatible dependencies only

When you're building in Studio and reach for a dependency, the picker now only shows you components that actually work in your project's runtime. That keeps a web-only dependency from ending up inside a mobile component by mistake, and vice versa.

Pull in dependencies from other registries

You can now publish components that depend on other shadcn registries, not just plain npm packages. When someone installs your component, its registry dependencies come along with it automatically, the same way npm dependencies always have.

Works for mobile components too

The same registry-dependency support now extends to Expo components, so a mobile component can depend on another registry's building blocks exactly like a web component can.

Component pages no longer get stuck on a permanent "Loading preview" screen. The preview used to occasionally start loading before the page had finished setting up to notice it, so the loading state never cleared even though the component was ready. It now shows up reliably every time.

Browsing by tag no longer surfaces components tagged with dozens of unrelated tags. Each component can now carry at most 15 tags, so tag pages stay focused on components that are genuinely relevant instead of getting flooded by over-tagged listings.

A real preview when you publish

Publishing from the browser builder now shows your actual live preview instead of a placeholder skeleton, so you can see exactly what you're about to ship before it goes live.

Go fullscreen while you work

The preview pane gained a fullscreen toggle in its toolbar, so you can review a component without the rest of the builder crowding the screen.

A live sandbox editor in Studio

You can now build a component from scratch right in your browser: start from a template, edit the code, and see a live preview update as you type.

Set the destination and publish

Choose where the component should go and who can see it directly from the sandbox, then publish from there once you're happy with it, with a clear indicator showing your work is saved along the way.

You can now set up the component generator inside VS Code in a couple of clicks. Pick VS Code from the setup tabs and it generates the right install command for you to run, or gives you a ready-to-paste config file if you'd rather add it by hand.

Your own team library

Teams can now publish private component libraries and install them anywhere with a single command, scoped under your own team's namespace.

A dedicated home for team components

A new team dashboard brings your components, members, and API keys together in one place, with docs alongside it for getting a registry set up from scratch.

Visibility, your choice

Set each component to team-only, unlisted, fully public, or private, so you control exactly who can find and install it.

The privacy and security pages now load correctly instead of showing a "not found" message. We also refreshed the privacy policy itself and expanded the terms of service to properly cover both the marketplace and the Agents platform.

Copy code, not just the prompt

The preview dialog now has a split copy button: copy a component's prompt, its raw code, or its code and demo together, whichever you use most. It remembers your last choice, so the next copy is a single click.

The same option, one right-click away

The same copy-code action is now available from a component's right-click menu on the homepage feed and community pages too, not just from inside the preview dialog.

Typing in sidebar search from the home page no longer drops your first keystrokes. Typing quickly used to race with the page switching into search mode and lose characters along the way; search now keeps up no matter how fast you type.

Organize bookmarks into lists

Save components into your own named lists instead of one flat bookmarks page. Add something to a list straight from its card, from the preview dialog, or from the right-click menu, then create, rename, or delete lists from your bookmarks page.

Opening search from a category page now keeps that category applied to your results instead of silently clearing your filters.

The search button on mobile now opens search directly instead of opening the side menu first and making you dig for search from there.

A new Top Authors page highlights the month's most-bookmarked creators, ranked by how much their work was saved that month. Each entry shows their standout pieces right there, so you can judge their work before you decide to follow.

A public profile for every author

Studio now has a public profile page: avatar, bio, socials, and a donation link, all editable inline from Studio and visible to anyone who visits.

A Support the author button

Once you've added a donation link, a Support the author button appears on your components, your profile, and in the preview dialog, so visitors can back your work without leaving the page they're on.

A home for community writing

A community blog is now available at /community/blog, starting with a full incident report on the database defacement earlier that week.

The community home page now features a horizontal row of 21st products (1code, the MCP server, and Magic Chat) right below the popular components, each showing its live GitHub star count.