The full upstream README, mirrored here for reference. Install config, tool schemas, adoption signals, and an original overview live on the ReactFrame listing page.
Open-source, shadcn/ui-compatible component registry. React + TypeScript + Tailwind CSS + Motion. Every component installs with:
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.
Each of the ~130 Framer components gets converted once, by hand, following this checklist:
.tsx, strip
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.registry/new-york/[slug]/[slug].tsx.registry.json (name, type: "registry:component", title, description, files, plus
registryDependencies/dependencies if it needs other registry items or
npm packages)."[slug]": () => <Component /> to
src/registry-preview/index.tsx with sensible example props.components in src/lib/catalog-data.ts
(drives the /components grid and the detail page's title/description).npm run registry:build and npm run dev, check
/components/[slug] renders and animates correctly in both themes.npx shadcn@latest add http://localhost:3000/r/[slug].json in a scratch Next.js project.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:
✦ glyph (not an icon font) + uppercase
text at 11px, font-semibold, tracking-wider, at ~38% ink opacity in
light / ~36% in dark. The ✦ itself sits at higher opacity (near-solid).~7-8%) with a
mid-opacity icon (~50%); primary/next = solid ink fill with a paper
(inverted) icon. Both whileHover={{ scale: 1.1 }} / whileTap={{ scale: 0.91 }} via motion." character (not an SVG) at a
very large font size, colored at ~4-4.5% ink opacity, positioned absolute
and layered behind the real text.accentColor-style prop the consumer sets — don't invent
multi-hue palettes (rainbow tone kits, neon gradients, mood themes) inside
a component's own defaults. If in doubt, look at how spare the reference
components are before adding another color.