Cardsblocks
Versatile card layouts for various content types. Ready-made React UI blocks with a neobrutalist look — heroes, pricing, auth, dashboards, and more. Preview every screen size, copy the code, or install via your AI agent with our MCP server. Works with Radix UI, Base UI, and React Aria.
- Heroes, pricing & auth
- Preview every breakpoint
- Copy the source
- MCP install ready
- Radix · Base UI · React Aria
- 158 ready-made blocks
- Page sections that ship
- Dashboards & marketing
- Pro unlocks the code
- Drop-in layouts
Browse every layout
Cards
15 blocks — open any card for a full-screen preview, the code, and install steps.
- 01Pro
Compact Feedback Survey
Three questions in about thirty seconds: an email field, a five-star row that previews on hover, one comment box. React and Tailwind. Post it to your endpoint.
- 02Pro
Contact and Rating Form Card
Takes four contact fields with trailing icons before the rating, then puts the score in words from Poor to Excellent. React and Tailwind. Bolt it onto your CRM.
- 03Pro
Countdown Coupon Card
A live hours, minutes and seconds clock ticks below a coupon illustration and a rotated offer sticker. React and Tailwind. Set the end date and launch.
- 04Pro
Course Card with Instructor
Opens on a code-glyph panel rather than a photo, then a ruled stats band and an instructor row above Enrol now. React and Tailwind. Load your own syllabus.
- 05Pro
Course Card with Price
A price badge straddles the seam between cover photo and copy, above three stats in square icon tiles. React and Tailwind. Price it and publish.
- 06Pro
Detailed Survey Form Card
Two titled sections gather name and email, two selects, a 0 to 5 satisfaction slider, a star score and comments. React and Tailwind. Take the long answers.
- 07Pro
Discount Promo Offer Card
A rotated 40 percent sticker anchors the copy half while a full-height fashion photo fills the other. React and Tailwind. Change the number and run it.
- 08Pro
Emoji Rating Feedback Card
Five emoji faces work as radio tiles from Very poor to Loved it, over an optional comment box counting down from 240. React and Tailwind. Read the mood fast.
- 09Pro
Inverted Profile Card
Inverted ink surface that stays the opposite of the page: square portrait, bio, join date, hashtags, mail button. React and Tailwind. Use it as a bio card.
- 10Pro
Newsletter Signup Card
An outlined illustration banner tops a display-size NEWSLETTER headline and one joined email and subscribe control. React and Tailwind. Hook it up to your list.
- 11Pro
Product Card with Quantity
A minus and plus stepper that announces each change sits beside the struck-through price, above add to cart. React and Tailwind. Wire it to your basket.
- 12Pro
Profile Card with Cover
A square avatar hangs half out of the cover band with an online dot, beside a follow button, bio and skill tags. React and Tailwind. Pin it in a team grid.
- 13Pro
Split Newsletter Card
Split 45 to 55: an illustration panel on one side, a labelled email field and full-width subscribe on the other. React and Tailwind. Slot it into a sidebar.
- 14Pro
Subscription Summary Card
Certificate badge over four ticked seat allocations and a filled panel stating the charge and the next billing date. React and Tailwind. Show it at checkout.
- 15Pro
Wide Newsletter Card
Half copy, half poster artwork running full-bleed to the card edge, with an inline email field under an underlined eyebrow. React and Tailwind. Sign readers up.