Mereo·Kit

The parts that make the page.

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

Install

npx @elsheppo/mereo-kit 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 @elsheppo/mereo-kit add hero/full-bleed
npx @elsheppo/mereo-kit add pdp
npx @elsheppo/mereo-kit list

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

What's inside

28 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 |

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