Neo-Brutal Hero
The page opener and its only h1, on the page grid. split puts the copy on columns 1–7 and the media on 8–12 (stacked under lg, media below); centered is copy only; stacked centres the copy with the media below at full width.
For people who care about what they ship.
Build better interfaces.
Ship faster.
Four complete styles, hundreds of components, blocks and full pages. Preview each one live, then copy the prompt that puts it in your project with Claude Code, Codex or Cursor.
Built for the tools and agents you already work with.
- Claude Code
- OpenAI Codex
- Cursor
- React
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- Radix UI
- Motion
Made to make an impression.
Great interfaces start with thoughtful details. Find yours here.
Neo-Brutal Navbar
The site header: logo, links and actions. bar is the kit's header: a full-bleed paper bar ruled with 2 px at the bottom, solid from the start, links centred (the current one on paper-2), actions at the end. floating is an inset outlined bar over a paper fade, so nothing shows around it.
Noir Aurora Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Soft Bento Bento Grid
Feature tiles on a 12-column grid.
Swiss Tech Mono Testimonials
Customer quotes as a grid, a featured layout (the first quote large on 7 columns with its case tag and media, the others on 5 with their metric as a mono tag), a masonry wall or a scrolling marquee.
Noir Aurora Landing page
A complete example page built from the kit's blocks, with every section and its content.
Four styles. Each a whole system.
Every style has its own tokens, type and motion, in light and dark. Everything you take from one fits together.
Consider it a head start.
Whole pages built from the same blocks: take one as it is, then put your own content in.
Soft Bento Bakery page
A complete example page built from the kit's blocks, with every section and its content.
Neo-Brutal Event page
A complete example page built from the kit's blocks, with every section and its content.
Noir Aurora Launch page
A complete example page built from the kit's blocks, with every section and its content.
Good taste.
Meet your AI agent.
Find something you love. Give your agent the code. Make it feel like it was always part of your product.
The two-minute guide01
Discover your starting point
Preview real components. Find the details that feel right.
02
Copy the installation prompt
Get the source and setup instructions in a single click.
03
Let your agent do the heavy lifting
Paste into Claude Code, Codex or Cursor. Then make it yours.
› Add the Pricing component.
Match my project’s styles and make it
work beautifully on every screen.
Match my project’s styles and make it
work beautifully on every screen.
pricing.tsxReact + Tailwind CSS
✓ Complete component source
✓ Its styles, as one block of CSS
✓ Page setup and a usage example
✓ Its styles, as one block of CSS
✓ Page setup and a usage example
Your code stays yours. Free with an account: 3 components a day.
Your next great interface starts here
Start with something thoughtfully made. Finish with something entirely yours.