Mereo·Kit

The parts that make the page.

134 e-commerce sections for React + Tailwind. Token-driven. Prop-ready. Yours to own.

Install

npx mereo init

This drops four files into your project: the design token CSS, a Tailwind preset, a class utility, and shared TypeScript types. That's your foundation.

Add sections

npx mereo add hero/full-bleed
npx mereo add pdp
npx mereo add toast
npx mereo list

Pull one section or an entire category. The files land in your project and they're yours to modify.

What's inside

29 categories spanning the full surface area of a modern store:

| Group | Categories | |-------|-----------| | Foundations | Announcement, Header, Footer | | Discovery | Hero, Category, Editorial, Seasonal | | Catalog | Product Card, PLP, PDP, Size/Fit, Wishlist | | Conversion | Promo, Cross-Sell, Subscription, Loyalty, Cart | | Trust | Social Proof, Trust, Newsletter, FAQ, Store Locator, Policy | | Lifecycle | Post-Purchase, Account | | System | Forms, Data Status, Empty States, Toasts & Notifications |

Every section is a React component with typed props and sensible defaults. Pass nothing, get a beautiful demo. Pass your data, get your page.

Design system

The token layer travels with you:

• mereo.css defines colors, type scale, spacing, radius, shadows, and motion as CSS custom properties
• tailwind-preset.ts maps those tokens to Tailwind utilities
• Dark mode, compact density, and reduced-motion support are built into the tokens

Change a variable in one place. Everything updates.

Philosophy

Sections are self-contained. Props have defaults. You own the code.

This is not a component library you install and depend on. It's a parts kit you pull from and leave behind.

License

MIT

By Shep Bryan