Introduction

Overview of Morpha UI — my personal design system, component library, and knowledge base.

Morpha UI is my personal starting point for every project: a design system, a component library, a CLI to install it, and a knowledge base of the tools, AI assets and workflow I actually use. One place to begin from, instead of rebuilding the same foundation each time.

What is Morpha UI

It's four things in one:

A design system — the Cupido design tokens (color, type, spacing) that everything themes against, light and dark from a single contract.
A component library — base shadcn (radix-nova) primitives, themed by those tokens, with live previews and generated API references.
A CLI — npx morpha-ui to install components, with a gated pro registry behind Clerk auth.
A knowledge base — my curated tools, reusable AI skills/MCPs/prompts, and the end-to-end pipeline I follow.

Built agent-first: the content is exposed through LLM endpoints so an agent can read it, and there's no database — it's a static, self-contained site.

The four sections

UI Kit

Components, foundations, CLI, accessibility, skills.

Tools

My curated tools, libraries and services.

AI

Reusable skills, MCP servers and prompts.

Pipeline

My end-to-end project workflow.

Getting started

Browse the component catalog.

Install with the Morpha CLI (npx morpha-ui@latest login → add) — see the CLI page.

Grab the design tokens from Color Guidance.

Principles

Token-first. Every component themes against the Cupido tokens — no hardcoded colors, spacing or radii.
shadcn base, Morpha theme. I own the component code (copy-paste primitives) and reshape it through tokens rather than depending on a black box.
Agent-ready. The whole KB is consumable by agents via the site's LLM endpoints and Morpha skills.
Gated pro via Clerk. The CLI authenticates with Clerk and serves a gated pro registry — no homegrown auth.
No database. It's a static site; the content pipeline is the product.