21st Lab · Training data for interfaces

21st Lab licenses what 801 authors published on 21st.dev and what 4.4M builders kept. Real UI, the prompts that install it and the picks behind it, cleared for training

Request a sample See the datasets

The library by category7,138 components on 21st.dev, in 18 categories

Components on 21st.dev by category
label	Components
Buttons	1,618
Forms	1,553
Cards	1,247
Heroes	1,073
Text	558
Shaders	506
Navigation	475
Backgrounds	461
CTAs	332
Dashboards	279
Galleries	257
AI chats	241
Features	190
Pricing	150
Testimonials	116
Sign-in	71
Footers	62
Clients	12

Where the saves sitThe 361 pieces of Release 01, by category

Saves451,375

Heroes88,39220%
Galleries44,39210%
Testimonials38,1788%
Features30,5887%
Everything else249,82555%

Components

7,138

Authors

801

Builders

4.37M

Shaders

304

Paul Charis's shader, as the brand's pixels

Pieces from 801 authors, among them

Manu Arora

Efferd

Ravi Katiyar

Hossain Jahed

Ali Imam

Le Thanh

Arunachalam

Kokonut Baffier

Ruixen

Serafim

Jatin Yadav

Tommy Jepsen

Jessi

Julien Thibeaut

Shadcnblocks.com

Daniel Petho

Preet Suthar

Dillion Verma

Everything a lab needs
to train on UI

Six datasets cut from one library, cleaned, licensed and shipped as files your pipeline already reads

Every piece, with its code
and its numbers

Source, demo and a live bundle for each of 7,138 components
Saves, views and installs as they stand on 21st.dev
Tags, category and a description written by the author

Shader Animation@designali-in

{

id:4050,

slug:"shader-animation",

name:"Shader Animation",

author:"designali-in",

category:"Shaders",

tags:[7],

description:"The page will now show the bea…",

counts:{

saves:3596,

installs:2594

files:{

bundle:"https://cdn.21st.dev/designali…",

video:"https://cdn.21st.dev/designali…",

preview:"https://cdn.21st.dev/designali…"

license:{

authorOptIn:true

}

JSON Viewer (21st, @mohammadshehadeh) on a row of the snapshot

The prompts that put
a piece in a real app

The exact text builders paste into their agent, one per piece
Stack, files and dependencies spelled out the way agents read them
Paired with the piece, so the prompt and its result travel together

Copy prompt · Pricing Interaction

1You are given a task to integrate an existing React component in the codebase
2
3The codebase should support:
4- shadcn project structure
5- Tailwind CSS
6- Typescript
7
8Copy-paste this component to /components/ui folder:
9```tsx
10pricing-interaction.tsx
11import NumberFlow from '@number-flow/react'
12import React from "react";
13
14export function PricingInteraction ({
15  starterMonth,
16  starterAnnual,

prompt16 lines

Code Block (21st, @edwinvakayil) with the Copy prompt text of Pricing Interaction

Taste, counted in saves

4.4M builders vote by saving what they would ship
Pairs from one category, the more saved piece marked as kept
A long tail from 10,111 saves down, never a rating queue

Saves per piece

Most saved first · hover a bar

Bar Chart (21st, @bklitai) on the 64 most saved pieces of Release 01

How an agent gets
from a brief to a page

Every tool call an agent made through the 21st MCP
The brief, the pieces it chose and the page it rendered
Recorded by the Lab on pieces of the library

Agent session · 21st MCP

A pricing page with a monthly and a yearly price

localhost:3000/pricing

Thought Chain (21st, @odysseyui) replaying a session, beside the page it ends on

Evals graded the way
a designer would

Held-out briefs with the pieces that answer them best
A designer's rubric: spacing, scale, tokens, hierarchy
Findings you can measure, in pixels and hex, not in vibes

Review · a pricing card · 3 findings

The Apply button is 20px next to the 40px primary. The description hardcodes #9a9a9a against the token's #8b8b8b, and two filled actions sit 12px apart, so the second one competes

Text Highlighter (21st, @danielpetho) over a design review

Take the slice
your model needs

JSONL or Parquet, with renders as HTML, stills and video
A sample first, in the format of the full delivery
Cut by category, style or stack, on a schedule if you like

Components7,138 rows

Source, demo, bundle, video and counts

Request

Prompts7,138 rows

The Copy prompt text for every piece

Request

Preferences

Asked first

18 categories

Pairs from one category, the kept one marked

Request

Agent sessionsOn request

Brief to page through the 21st MCP

Request

EvalsHeld out

Briefs, references and a designer's rubric

Request

Pricing Tiers List (21st, @felipemenezes098) on shadcn's Item

Training data that keeps
pace with the frontend

Request a sample Read the answers

Opt-in

Licensed by the people who made it

Every author opts in and earns from every deal. No scraping, no gray zone, a public name on every row

Every week

Fresh because the library is

New pieces land on 21st.dev every day. Each delivery adds what builders published and saved since the last one

Real use

Picked by builders, not by a queue

Saves, copies and installs come from people shipping products. The signal is what they kept

Components in the library: 7,138; In 18 categoriesButtons, forms and cards lead
Authors with a public page: 801; Each one opts in to be licensed
Builders on 21st.dev: 4.4M; Saving, copying and installing
Saves on the most saved piece: 10,111; The median piece of Release 01 has 810Every save is a vote for a piece