Show HN: Performative-UI Turns Design Clichés Into React Components

You’ve seen them a thousand times. The hero section with a gradient background and three floating feature cards. The pricing table with the middle tier highlighted in a different color. The testimonial carousel that never stops sliding.

We all use these patterns. I’ve shipped them myself more times than I’d like to admit. That’s exactly why I built Performative-UI — a React component library that leans into the absurdity of modern design tropes.

What Exactly Is Performative-UI?

Think of it as a satirical toolkit. Every component in this library replicates a design pattern that’s been done to death across SaaS landing pages, startup sites, and portfolio templates.

There’s a <HeroWithGradient /> component. A <TrustedByLogos /> strip. A <FeatureGrid3Cols /> that looks suspiciously like every other feature grid you’ve ever seen.

The whole point isn’t to use these in production (though honestly, you could). It’s to make you laugh and maybe think a little harder about why we keep reaching for the same layouts.

Why This show hn: Hit a Nerve

When I posted this as a show hn: project, I expected a few chuckles and that’s it. Instead, it blew up. Turns out, developers are tired of pretending every new landing page is unique.

The comments on that show hn: thread were a mix of “this is genius” and “I’m guilty of every single one of these.” Someone even shared it in their company Slack, which led to an uncomfortable but necessary design review meeting.

I think the reason this show hn: resonated is that we’ve all felt that weird cognitive dissonance. You’re building something “fresh” but pulling from the same mental library of layouts you’ve seen a hundred times.

Things You Need to Dive In

If you want to poke around the library or build something similarly absurd, here’s what I’d recommend having ready:

• A solid code editor — I use VS Code with the ES7+ React/Redux/React-Native snippets extension. It makes whipping up components fast.
• A React project scaffolded with Vite — forget Create React App at this point. Vite is faster, lighter, and just works.
• Tailwind CSS — most of the performative styles in this library are built with Tailwind utility classes. It’s perfect for rapid prototyping of clichéd layouts.

Pro Tips for Using Performative-UI

Don’t just install it and call it a day. The real value comes from reading the source code. Each component has comments explaining which popular site inspired it and why the pattern became so ubiquitous.

Try combining components in unexpected ways. Stack three <CTASections /> on top of each other and watch your page become an unclickable nightmare. It’s hilarious and kind of enlightening.

If you’re giving a talk about design systems, this show hn: project makes a great icebreaker. Drop a few slides of these components and ask your audience to name which startups use each one.

Beyond the Joke

Here’s what I didn’t expect when I launched this show hn: — people started using it for real prototyping. Sometimes you just need a placeholder layout that feels “right” even if it’s generic.

A few developers told me they use Performative-UI components as scaffolding. They drop in the tropes, get the structure working, then gradually replace each piece with something more thoughtful. That’s a workflow I hadn’t considered, but it makes sense.

The library also sparked conversations about what comes after these tropes. If we all agree the current patterns are played out, what’s the next wave going to look like? I don’t have the answer, but I’m glad this show hn: got people asking.

Frequently Asked Questions

If nothing else, I hope this project gives you permission to laugh at the patterns we’ve all been complicit in. Build something weird. Break the template. And if you do end up using another gradient hero section, at least do it with self-awareness.