Add a pricing table from 21st, then review it by rule and in a real browser

Pick a pricing table from 21st, add it to your project, then review it against written rules and in Chrome at phone and desktop width.

Pluginboard· Posted Oct 26· 5 steps

No ratings yet · be the first

Before you start

You need a free 21st.dev API key, and each tool needs adding once: for 21st, run npx @21st-dev/cli@latest init --client [your client] and paste the key into the config it prints. Front-End Checklist is a hosted server at https://mcp.frontendchecklist.io with no key. Chrome DevTools MCP runs through npx chrome-devtools-mcp@latest and needs Chrome. On 21st's free plan, search is unlimited but you can fetch component code twice a day. Chrome DevTools MCP can see and change anything in that browser, so don't sign in to accounts you care about while it runs.

Look at options first

Searching is free and fetching code is not, so choose before you fetch.

Say to Claude Code

Use 21st to find three pricing table components with a monthly/yearly toggle that suit a Tailwind project. Describe each one and wait for my pick. Don't add anything yet.

Add the one you pick

Tell it what to reuse so it doesn't bring in duplicates.

Add a pricing table from 21st, then review it by rule and in a real browser

Before you start

Look at options first

Add the one you pick

Ratings

Browse plugins, skills and use-case recipes by category.

Add a pricing table from 21st, then review it by rule and in a real browser

Before you start

Look at options first

Add the one you pick

Review the code against the rules

Look at the real page

Fix and check again

What you get

Ratings

Ratings

Ratings