Catch design issues in your PRs.
Get the code to fix them.
Included with 21st AI. Try it free for 7 days. Details
Keeps the UI consistent
Finds the duplicate, names the component you already have and drafts the swap.
Keeps your type scale intact
Catches a stray size or font and gives the step from your scale instead.
Keeps the phone layout working
Finds overflow, broken stacking and hidden buttons. Includes screenshots when a render succeeds.
Keeps the site from getting slower
Flags unnecessary client-side code and, when a render succeeds, measures loaded resources and repeated React updates.
What lands on the PR.
Clear findings and suggested fix code, with screenshots when rendering succeeds.
Design review
0 critical · 3 serious · 0 minor
1. Apply button is off the button scale
| Current | Fixed | |
|---|---|---|
 | → |  |
Fix: Increase the compact action to h-8, px-3 and text-sm.
Evidence
Compact action renders 20px tall next to the 40px primary.
plan.cta === "Apply" ? "h-5 px-2 text-[11px]" : "h-10 px-4 text-sm" → plan.cta === "Apply" ? "h-8 px-3 text-sm" : "h-10 px-4 text-sm"
2. Plan description hardcodes a colour instead of the muted token
| Current | Fixed | |
|---|---|---|
 | → |  |
Fix: Use the existing muted-foreground design token.
Evidence
#9a9a9a against the token's #8b8b8b, one step off the scale.
className="mt-3 min-h-14 text-sm leading-6"
style={{ color: "#9a9a9a" }}
→ className="mt-3 min-h-14 text-sm leading-6 text-muted-foreground"3. Secondary action competes with the primary action
| Current | Fixed | |
|---|---|---|
 | → |  |
Fix: Render Learn more as a bordered secondary action using existing surface tokens.
Evidence
Two filled black actions in the same card, 12px apart.
bg-black text-white → border border-black/10 bg-background text-foreground
Three ways it runs.
Per repository, any mix of them.
Every pull request
One comment with the score, findings and patch, rewritten on every push. Never blocks the merge.
Every few commits on main
You pick how many, from 2 to 100. When a patch is available, review it in a fix pull request.
On a schedule
Every few days, as often as you like. Whatever landed on main since the last review, from everyone or the contributors you pick.
Connect once. Reviews run automatically.
- Connect GitHub
- Install the app on the account that owns the repository.
- Choose triggers
- Enable pull request reviews, scheduled maintenance, or both.
- Run a review
- Start now from recent commits, or wait for the next trigger.
- Fix the issues
- Read the findings and suggested fix code here or on GitHub, then review the changes before applying them.
Included with 21st AI. After your free trial, reviews use the same AI credit balance as the rest of your AI work.
See plansFrequently asked questions.
What does it check?
It checks reuse of your existing components, tokens, spacing and type scale, along with layout risks and unnecessary dependencies. Findings explain the problem and include suggested fix code. When a render succeeds, the review can also include screenshots and visual checks at desktop and mobile widths.
What does the bot have access to?
The repositories you enable through the 21st GitHub App. It reads code, writes pull request comments and checks, and can push a branch to open a fix pull request. Each review runs in a disposable sandbox.
Does it run my app?
It analyzes the changed code and attempts an isolated render in a sandbox. If the render cannot run, it still describes supported findings and provides suggested fix code, without screenshots.
Will it block merges or spam the pull request?
Reviews are advisory. The bot updates one review comment as the pull request changes and posts a GitHub check for each reviewed commit. A pull request with no UI files gets a neutral check and no comment.
Which projects does it work with?
React codebases with a standard package install: Next.js, Vite and similar setups, with Tailwind or plain CSS. Changed pages and components are picked from the diff and rendered in a React harness.
What does a review cost?
After any free reviews, you pay the model cost in AI credits from the same balance you use for 21st AI. Reviews pause when the balance runs out.
How do the free reviews work?
Every active paid personal plan or owned paid team plan includes 5 successful reviews free within 7 days of the first review. You do not need an AI plan to try it. Failed and skipped runs do not count, and free reviews do not use AI credits or trigger top-ups.
What happens after the trial?
After 5 successful reviews or 7 days, whichever comes first, new reviews automatically use AI credits if your plan includes AI. Without an AI plan, reviews pause until you upgrade. Without credits, top up to continue. Your plan never upgrades automatically.
Does my team share the free reviews?
Yes. A paid team shares 5 free reviews across its members and repositories. There is one trial per personal account or team. A team seat does not include a separate personal trial; that requires your own paid personal plan.