Modus UI

Animated React components with an editorial feel.

Free, open-source components built with TypeScript, Tailwind CSS and Framer Motion. Install one with the CLI, or copy and paste the source.

Documentation · Components · Contributing

---

Why Modus UI?

Modus UI is not a package you import from. You own the code: add a component to your project, then change whatever you like. There's no version pinning, no wrapper API, and no waiting on a maintainer to expose a prop.

• 41 components: navigation, actions, data display, backgrounds, typography and more
• Copy-paste ready: every component is a single .tsx file
• Themed by your tokens: components use Tailwind CSS variables (bg-background, text-primary), so they pick up your palette
• Tested on every PR: each component is rendered on desktop and mobile, with and without reduced motion

Install a component

npx @modus-ui/cli add blur-text

Use whichever package manager you prefer. Each component page has a tab for each:

Package manager	Command
npm	npx @modus-ui/cli add blur-text
pnpm	pnpm dlx @modus-ui/cli add blur-text
yarn	yarn dlx @modus-ui/cli add blur-text
bun	bunx @modus-ui/cli add blur-text

The CLI writes the component into your project and lists the npm packages it needs. Every component page shows its own command.

To copy and paste instead, open the Code tab on any component page and save the file as components/ui/<name>.tsx. Components import cn() from @/lib/utils:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Accounts, favorites and comments

Signing in with Google is optional and only needed to favorite a component or comment on it. The site itself, the CLI and the MCP server stay anonymous. Data lives in the modus_ui schema of the shared side-project Supabase Postgres. Set these in .env (gitignored; copy the two URLs from the Supabase dashboard, Connect):

# Transaction pooler (port 6543): runtime queries
DATABASE_URL="postgresql://postgres.<project-ref>:<password>@aws-0-<region>.pooler.supabase.com:6543/postgres?pgbouncer=true&schema=modus_ui"
# Session pooler (port 5432): Prisma migrations
DIRECT_URL="postgresql://postgres.<project-ref>:<password>@aws-0-<region>.pooler.supabase.com:5432/postgres?schema=modus_ui"
BETTER_AUTH_SECRET=<openssl rand -hex 32>
BETTER_AUTH_URL=http://localhost:3000
GOOGLE_OAUTH_CLIENT_ID=...
GOOGLE_OAUTH_CLIENT_SECRET=...

Add <BETTER_AUTH_URL>/api/auth/callback/google as an authorised redirect URI on the Google OAuth client (localhost and the production domain), then apply the schema with pnpm db:migrate.

For coding agents

The MCP server lets your agent search the catalogue, read a component's real props and source, and get its install command:

claude mcp add modus-ui -- npx -y @modus-ui/mcp

For Cursor, Windsurf or VS Code setup, see packages/mcp. The docs are also published as plain markdown so agents like Claude Code, Cursor or Codex can read them directly:

• /llms.txt: index of every component with a one-line description
• /llms-full.txt: every component's docs and full source in one file
• /components/<name>.md, e.g. /components/blur-text.md: one component's install command, usage and source

This is the beginning of the README. Read the rest at the original. Read the full README ↗