MKT UI

Introduction

What MKT UI is, who it is for, and what it deliberately is not.

MKT UI is an open-source React component library for marketing websites: the services page for a plumbing business, the case-study page for a consultant, the pricing page for a SaaS product.

It is built on shadcn/ui. You install sections with the shadcn CLI, the source lands in your project, and you edit it like any other file you own.

What makes it different from a block collection

Most component libraries give you a hero, a feature grid, and a pricing table that were each designed on their own. Put three of them on one page and the container widths disagree, the heading sizes clash, and the vertical rhythm stutters.

MKT UI is built the other way round. Three complete example websites came first, and the sections were extracted from them. Every section shares:

  • one container width and gutter (Container)
  • one vertical rhythm and set of surface treatments (Section)
  • one type scale (--text-display, --text-title, --text-lead)
  • one accent token (--brand) that re-themes an entire site

What is in scope

  • Complete journeys. Not just the hero, but the enquiry form, its failure state, and the confirmation the visitor sees afterwards.
  • Local business content. Service areas, opening hours, tap-to-call, addresses.
  • Editorial and SaaS. Resource indexes, article layouts, pricing, comparisons.

What is out of scope

  • A visual page builder or drag-and-drop editor.
  • A hosted service, accounts, or billing.
  • CRM, email delivery, or analytics. MKT UI gives you the form and a documented submission callback; delivery is yours.
  • Any claim that these components increase conversions. They are well-built marketing sections. Whether they convert depends on your offer, your traffic, and your copy, and anyone who tells you otherwise is selling something.

Honest status

This is an initial release in progress. The catalog lists what exists today. Sections that are planned but not built are marked as such rather than listed as if they were finished, and the example websites label their fictional businesses, reviews, and results on every page.

On this page