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 and workflow I actually use. One place to begin from, instead of rebuilding the same foundation each time.
What is Morpha UI
Morpha tokens — color, type, spacing — light and dark from a single contract.
Base primitives themed by those tokens, with live previews and generated API references.
npx morpha-ui installs components from a gated pro registry behind Clerk auth.
My curated tools 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 sections
Three of them, and the switcher in the header routes to all three: UI Kit for components, foundations, the CLI, accessibility and skills; Favourites for the AI skills, CLIs, frameworks and email services I actually reach for; and Pipeline for my end-to-end project workflow.
Getting started
Install with the Morpha CLI — see the CLI page.
$ npx morpha-ui@latest loginGrab the design tokens from Color Guidance.
Principles
- Token-first.
Every component themes against the Morpha tokens — no hardcoded colors, spacing or radii.
- Own the code.
Copy-paste primitives reshaped through tokens rather than a black-box dependency.
- Agent-ready.
The whole knowledge base 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.