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:
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
