ReactFrame MCP server

ReactFrame

Open-source, shadcn/ui-compatible component registry. React + TypeScript + Tailwind CSS + Motion. Every component installs with:

npx shadcn@latest add https://reactframe.com/r/[slug].json

Structure

registry.json                        # root registry manifest (shadcn schema)
registry/new-york/[slug]/[slug].tsx  # component source, one folder per item
src/registry-preview/index.tsx       # slug -> live preview element (docs site only)
src/lib/catalog-data.ts              # slug -> display metadata (name, description, category)
src/app/components/[slug]/page.tsx   # docs page: install command + live preview + code tab
public/r/[slug].json                 # generated — do not edit, do not commit

npm run registry:build (also runs automatically before dev/build) reads registry.json + the files it points to and writes the consumable public/r/*.json files via the shadcn build CLI.

Adding a component (migrating from Frameze)

Each of the ~130 Framer components gets converted once, by hand, following this checklist:

addPropertyControls / useIsStaticRenderer / Framer-only APIs, replace inline style={{}} with Tailwind classes, and rebuild interactive/canvas demo panels as plain props instead. Reference registry/new-york/animated-stats/animated-stats.tsx as the pattern: "use client", named export, a typed Props interface, cn() from @/lib/utils, and the shared paper / ink / border / ease-signature tokens from globals.css instead of hardcoded colors.

1. Convert the source. Start from the Framer .tsx, strip

"registry:component", title, description, files, plus registryDependencies/dependencies if it needs other registry items or npm packages).

1. Save it to registry/new-york/[slug]/[slug].tsx.
2. Register it — add an entry to registry.json (name, type:

src/registry-preview/index.tsx with sensible example props.

1. Preview it — add "[slug]": () => to

(drives the /components grid and the detail page's title/description).

1. List it — add an entry to components in src/lib/catalog-data.ts

/components/[slug] renders and animates correctly in both themes.

1. Run npm run registry:build and npm run dev, check

http://localhost:3000/r/[slug].json in a scratch Next.js project.

1. Sanity-check the real install path: npx shadcn@latest add

Design system

paper / ink / glass — carried over from Frameze for brand consistency. Light theme = paper (#f5f4f1) background, near-black ink (#0a0a0a) text. Dark theme = near-black paper (#0e0e0e), near-white ink (#f5f4f1) text (class .dark, via next-themes). .glass is the translucent blurred-panel utility. ease-signature (cubic-bezier(0.16,1,0.3,1)) / animate-rise are the shared motion tokens — use them instead of ad-hoc easing curves so every component feels like part of one family. --shadow-soft is the ambient "floating card" shadow (soft blur + hairline ring, tuned per theme) — apply via style={{ boxShadow: "var(--shadow-soft)" }}. All defined in src/app/globals.css.

Components that ship their own self-contained light/dark palette (product cards, testimonial/marketing sections meant to drop into any page — see testimonial-slider.tsx as the reference) should use these exact hex values rather than inheriting the host project's shadcn tokens, so the component keeps its ReactFrame look regardless of what theme the consumer's project has. Small utility/primitive components (toggle, badge, rating) can instead use semantic Tailwind classes (bg-background, text-foreground, border) so they blend into the consumer's own theme — see README "Adding a component" step 1 for which pattern applies.

Recurring visual patterns — reuse these, don't reinvent them per component:

Shortened. The full README is on GitHub.