1<!DOCTYPE html><html lang="en" class="dark" data-default-theme="dark"><head><link rel="modulepreload" href="/assets/federation-react-B-Dh5LUM.js"><link rel="modulepreload" href="/assets/federation-react-dom-QiVuAt7c.js"><link rel="modulepreload" href="/assets/federation-react-dom-client-l_WhDEmL.js"><link rel="modulepreload" href="/assets/federation-jsx-runtime-BLnFHxeh.js"><link rel="modulepreload" href="/assets/federation-spiceflow-react-B5SYCggd.js"><meta charSet="utf-8"/><link href="https://fonts.gstatic.com" rel="dns-prefetch"/><link rel="preconnect" href="https://fonts.gstatic.com"/><link rel="preconnect" href="https://framerusercontent.com"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/holocron-api/ai-logo/unframer.jpeg"/><link rel="preload" as="image" href="/logos/workbase.svg"/><link rel="preload" as="image" href="/logos/gesserit.svg"/><link rel="preload" as="image" href="/logos/rivet.png"/><link rel="preload" as="image" href="/logos/unchatgpt.svg"/><link rel="preload" as="image" imageSrcSet="https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg?scale-down-to=1024 672w,https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg?scale-down-to=2048 1344w,https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg 1399w" imageSizes="max(160px, 1px)"/><link rel="preload" as="image" imageSrcSet="https://framerusercontent.com/images/Kw1ZU0X3OdKKa4U2V3Yi8aZk.png?scale-down-to=1024&width=1250&height=1874 683w,https://framerusercontent.com/images/Kw1ZU0X3OdKKa4U2V3Yi8aZk.png?width=1250&height=1874 1250w" imageSizes="max(160px, 1px)"/><link rel="preload" as="image" imageSrcSet="https://framerusercontent.com/images/40lSKkZ9G1PrxSqHvFn9L9BGKA.png?width=667&height=1000 667w" imageSizes="max(160px, 1px)"/><link rel="stylesheet" href="/assets/github-slugger-DMHYWCB5.css" data-precedence="vite-rsc/client-reference"/><link rel="stylesheet" href="/assets/index-Dij5pFrE.css" data-rsc-css-href="/assets/index-Dij5pFrE.css" data-precedence="vite-rsc/importer-resources"/><style data-precedence="default" data-href="/holocron-injected-styles?8wfj6h">:root:root { --primary: #b91c1c; } 2:root.dark { --primary: color-mix(in oklch, #b91c1c 40%, white); }</style>
2<script type="importmap">{"imports":{"react":"/assets/federation-react-B-Dh5LUM.js","react-dom":"/assets/federation-react-dom-QiVuAt7c.js","react-dom/client":"/assets/federation-react-dom-client-l_WhDEmL.js","react/jsx-runtime":"/assets/federation-jsx-runtime-BLnFHxeh.js","react/jsx-dev-runtime":"/assets/federation-jsx-runtime-BLnFHxeh.js","spiceflow/react":"/assets/federation-spiceflow-react-B5SYCggd.js"}}</script>
2<link rel="preload" href="/assets/index-Dij5pFrE.css" as="stylesheet"/><link rel="modulepreload" href="/assets/spiceflow-framework-D8FuqqT7.js" crossorigin=""/><link rel="modulepreload" href="/assets/react-Dgkk0PLj.js" crossorigin=""/><link rel="modulepreload" href="/assets/rolldown-runtime-BO1D7fPK.js" crossorigin=""/><link rel="modulepreload" href="/assets/jsx-runtime-B44_mNpU.js" crossorigin=""/><link rel="modulepreload" href="/assets/react-BIe5H-YT.js" crossorigin=""/><link rel="modulepreload" href="/assets/client-DQcRA0Qd.js" crossorigin=""/><link rel="modulepreload" href="/assets/react-dom-fK_C_gDK.js" crossorigin=""/><link rel="modulepreload" href="/assets/preload-helper-DeUS1kg4.js" crossorigin=""/><link rel="modulepreload" href="/assets/components-CYQvgsl6.js" crossorigin=""/><link rel="modulepreload" href="/assets/index-CuMWLRN6.js" crossorigin=""/><link rel="modulepreload" href="/assets/action-abort-B3_dIeHU.js" crossorigin=""/><link rel="modulepreload" href="/assets/browser-DNG6M6rm.js" crossorigin=""/><link rel="modulepreload" href="/assets/entry.rsc-DOcvhN1h.js" crossorigin=""/><link rel="modulepreload" href="/assets/error-handlers-CQuu37r-.js" crossorigin=""/><link rel="modulepreload" href="/assets/config-override-AHftIYr3.js" crossorigin=""/><link rel="modulepreload" href="/assets/create-proxy-BnPD-_8G.js" crossorigin=""/><link rel="modulepreload" href="/assets/is-svg-component-BQMeP-CJ.js" crossorigin=""/><link rel="modulepreload" href="/assets/gestures-DunGhBMF.js" crossorigin=""/><link rel="modulepreload" href="/assets/github-slugger-CCPmYqUt.js" crossorigin=""/><link rel="modulepreload" href="/assets/useHover-DSZw8iyp.js" crossorigin=""/><link rel="modulepreload" href="/assets/createLucideIcon-BxZ949YY.js" crossorigin=""/><link rel="modulepreload" href="/assets/code-block-BZBXQuRB.js" crossorigin=""/><link rel="modulepreload" href="/assets/chunk-H4HRWUSE-DDkKGeCo.js" crossorigin=""/><link rel="modulepreload" href="/assets/dedent-Bk4XllGD.js" crossorigin=""/><link rel="modulepreload" href="/assets/chunk-SIOPM2FD-lQ2yW-Kc.js" crossorigin=""/><link rel="modulepreload" href="/assets/hero-section-CV22IeBE.js" crossorigin=""/><link rel="modulepreload" href="/assets/mdx-exports-vr50y2D1.js" crossorigin=""/><link rel="modulepreload" href="/assets/books-Ent6u46A.js" crossorigin=""/><title>Unframer â Export Framer to React</title><meta property="og:site_name" content="Unframer"/><meta property="og:description" content="Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework."/><meta name="description" content="Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework."/><link rel="icon" href="/favicon.ico"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:image" content="https://holocron.so/api/og?title=Unframer+%E2%80%94+Export+Framer+to+React&description=Export+your+Framer+components+as+React+code.+Works+with+Next.js%2C+Remix%2C+Vite%2C+Astro%2C+and+any+React+framework.&icon=http%3A%2F%2Funframer.co%2Ffavicon.ico&siteName=Unframer&pageLabel=unframer.co%2F"/><meta property="og:image" content="https://holocron.so/api/og?title=Unframer+%E2%80%94+Export+Framer+to+React&description=Export+your+Framer+components+as+React+code.+Works+with+Next.js%2C+Remix%2C+Vite%2C+Astro%2C+and+any+React+framework.&icon=http%3A%2F%2Funframer.co%2Ffavicon.ico&siteName=Unframer&pageLabel=unframer.co%2F"/><meta name="twitter:description" content="Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework."/><meta name="holocron:site-description" content="The best Framer plugins. Export to React, sync with GitHub, rewrite with AI."/><meta name="twitter:title" content="Unframer â Export Framer to React"/><meta property="og:title" content="Unframer â Export Framer to React"/></head><body>
2<script>(function(){var d=document.documentElement;var strict=d.hasAttribute("data-strict-theme");var m=strict?null:document.cookie.match(/color-theme=(light|dark)/);var t=m?m[1]:null;if(!t){var def=d.getAttribute("data-default-theme")||"system";t=def==="system"?(window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light"):def}if(t==="dark")d.classList.add("dark");else d.classList.remove("dark")})()</script>
2<div class="sr-only">Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.</div><style>@keyframes spiceflow-progress-fade-in{from{opacity:0}to{opacity:1}}</style><div style="position:fixed;z-index:200;top:0;left:0;right:0;height:4px;background-color:var(--primary);box-shadow:0 4px 6px -1px color-mix(in srgb, var(--primary) 20%, transparent);width:0%;opacity:1;animation:none"></div><div class="slot-page flex flex-col gap-(--layout-gap) grow bg-background text-foreground [font-family:var(--font-sans)] antialiased [text-rendering:optimizeLegibility] overflow-x-clip" data-page-mode="default" style="-webkit-font-smoothing:antialiased;--banner-height:0px;--grid-line-style:none;--grid-nav-width:230px;--grid-gap:60px;--grid-sidebar-width:230px;--grid-max-width:min(calc(100vw - 60px), 1200px);--grid-content-width:minmax(0, min(720px, calc(var(--grid-max-width) - var(--grid-nav-width) - var(--grid-sidebar-width) - 2 * var(--grid-gap))));--radius:0.625rem"><div class="slot-navbar relative"><div class="mx-auto flex items-center justify-between px-(--mobile-padding) py-(--header-padding-y) lg:max-w-(--grid-max-width) lg:px-0"><div class="flex items-center gap-3"><a class="slot-logo no-underline flex items-center gap-2 shrink-0" href="/"><img src="/holocron-api/ai-logo/unframer.jpeg" alt="Unframer" class="h-6 w-auto dark:hidden" style="width:auto;height:var(--logo-height);mix-blend-mode:multiply"/><img src="/holocron-api/ai-logo/unframer.jpeg" alt="Unframer" class="h-6 w-auto hidden dark:block" style="width:auto;height:var(--logo-height);mix-blend-mode:screen;filter:invert(1)"/></a></div><div class="hidden lg:flex items-center gap-4"><div class="flex items-center gap-3"><a aria-label="Manage Subscriptions" class="no-underline flex items-center gap-1.5 text-muted-foreground transition-colors duration-150 hover:text-foreground" href="/subscriptions"><span class="text-sm">Manage Subscriptions</span></a></div><button type="button" aria-label="Switch to dark mode" class="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors duration-150 hover:text-foreground hover:bg-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button></div></div><div class="flex items-center justify-between lg:hidden px-(--mobile-padding) py-2"><button type="button" style="font-size:13px;font-weight:500;color:var(--muted-foreground);background:none;border:none;cursor:pointer;padding:4px 0">Ask AI</button><button type="button" style="display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted-foreground);background:none;border:none;cursor:pointer;padding:4px 0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>Menu</button></div><div class="slot-tabbar relative hidden lg:block"><div class="mx-auto flex h-(--tab-bar-height) max-w-full items-stretch gap-6 overflow-x-auto px-(--mobile-padding) text-sm lg:max-w-(--grid-max-width) lg:px-0"><a class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--foreground)" href="/"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>Docs<div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--foreground);border-radius:1px;transition:background-color 0.15s ease"></div></a><a class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--muted-foreground)" href="/mcp/
2overview"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2m16 0h2m-7-1v2m-6-2v2"/></g></svg>Framer MCP<div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:transparent;border-radius:1px;transition:background-color 0.15s ease"></div></a><a class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--muted-foreground)" href="/pricing"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 2v20m5-17H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Pricing<div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:transparent;border-radius:1px;transition:background-color 0.15s ease"></div></a><a class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--muted-foreground)" href="/changelog"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M15 18h-5m8-4h-8m-6 8h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></g></svg>Changelog<div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:transparent;border-radius:1px;transition:background-color 0.15s ease"></div></a><a target="_blank" rel="noopener noreferrer" class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--muted-foreground)" href="https://framer.link/TGWRs2U"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.39 4.39a1 1 0 0 0 1.68-.474a2.5 2.5 0 1 1 3.014 3.015a1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474a2.5 2.5 0 1 0-3.014 3.015a1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474a2.5 2.5 0 1 1-3.014-3.015a1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474a2.5 2.5 0 1 0 3.014-3.015a1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>Framer Plugin<span class="opacity-50">â</span><div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:transparent;border-radius:1px;transition:background-color 0.15s ease"></div></a><a target="_blank" rel="noopener noreferrer" class="slot-tab no-underline inline-flex items-center gap-1.5 font-[475] [font-family:var(--font-sans)] transition-colors duration-150" style="color:var(--muted-foreground)" href="https://github.com/remorses/unframer"><svg aria-hidden="true" viewBox="0 0 24 24" width="14px" height="14px" style="display:inline-block;flex-shrink:0;width:14px;height:14px"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5c.08-1.25-.27-2.48-1-3.5c.28-1.15.28-2.35 0-3.5c0 0-1 0-3 1.5c-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5c-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></g></svg>GitHub<span class="opacity-50">â</span><div data-tab-indicator="true" style="position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:transparent;border-radius:1px;transition:background-color 0.15s ease"></div></a></div></div></div><div class="relative grow flex flex-col w-full max-w-full mx-auto lg:max-w-(--grid-max-width) lg:-mt-(--layout-gap) overflow-y-clip"><div class="relative mx-auto w-full max-w-full px-(--mobile-padding) lg:max-w-(--grid-max-width) lg:px-0"><div><div class="relative mt-4 lg:mt-8 mb-6 lg:mb-10 w-full rounded-xl flex flex-col items-center overflow-hidden"><div class="flex flex-col items-center overflow-hidden absolute inset-0 w-full h-full"><div class="absolute inset-0 w-full h-full z-0 overflow-hidden dark:opacity-60 opacity-40" style="max-width:2200px;margin:0 auto;opacity:0;transition:opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1)"></div><div class="absolute top-0 inset-x-0 h-[15%] z-[1] pointer-events-none" style="background:linear-gradient(to bottom, color-mix(in srgb, var(--background) 70%, transparent) 0%, color-mix(in srgb, var(--background) 50%, transparent) 20%, color-mix(in srgb, var(--background) 50%, transparent) 40%, transparent 55%);opacity:0;transition:opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1)"></div><div class="absolute bottom-0 inset-x-0 h-[12%] z-[1] pointer-events-none" style="background:linear-gradient(to top, color-mix(in srgb, var(--background) 70%, transparent) 0%, color-mix(in srgb, var(--background) 50%, transparent) 20%, color-mix(in srgb, var(--background) 50%, transparent) 40%, transparent 55%);opacity:0;transition:opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1)"></div></div><div class="relative z-[2] flex flex-col items-center justify-center text-center max-w-[820px] w-full px-5 pt-16 sm:pt-24 pb-20 lg:pb-[160px] gap-6" style="opacity:0;transition:opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1)"><h1 class="flex flex-col items-center leading-tight text-[40px] sm:text-[56px] md:text-[58px] text-foreground font-semibold tracking-tight text-center text-balance" style="font-family:'Inter', sans-serif"><span>Export Framer to React</span></h1><div class="flex gap-2.5 flex-wrap justify-center mt-2"><a href="https://framer.link/TGWRs2U" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 h-9 px-4 roun
2ded-md bg-foreground text-background font-medium text-[13px] hover:opacity-90 transition-opacity no-underline"><svg class="size-[14px]" viewBox="0 0 24 24" fill="currentColor"><path d="M4 0h16v8H12l8 8H12v8l-8-8V0z"></path></svg>Install Plugin</a><a href="https://github.com/remorses/unframer" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 h-9 px-4 rounded-md border border-border text-foreground font-medium text-[13px] hover:bg-foreground/5 transition-colors no-underline"><svg class="size-[14px]" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"></path></svg>GitHub</a></div></div></div></div></div><div class="grid grow grid-cols-1 w-full max-w-full mx-auto px-(--mobile-padding) lg:items-start lg:gap-x-(--grid-gap) lg:justify-between lg:px-0 lg:grid-cols-[var(--grid-nav-width)_var(--grid-content-width)_var(--grid-sidebar-width)]"><div class="slot-sidebar-left shrink-0 lg:self-stretch"><div style="position:sticky;top:var(--sticky-top);max-height:calc(100vh - var(--sticky-top) - var(--layout-gap));display:flex;flex-direction:column"><aside class="flex flex-col max-w-(--grid-nav-width) min-h-0 text-(length:--sidebar-font-size)"><div class="pb-(--sidebar-group-margin-top) flex items-center relative shrink-0"><span aria-hidden="true" class="absolute left-[1em] pointer-events-none inline-flex items-center justify-center" style="color:var(--muted-foreground)"><svg aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" class="size-[1em]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.34-4.34"></path></svg></span><input type="text" placeholder="Search..." class="w-full outline-none box-border search-input" style="padding-block:var(--sidebar-row-padding-y);padding-inline-start:calc(2em + var(--sidebar-leading-gap));padding-inline-end:calc(34em / 14);font-family:var(--font-sans);font-weight:var(--weight-prose);color:var(--foreground);background:transparent;letter-spacing:normal;line-height:var(--lh-prose)" value=""/><span aria-hidden="true" class="absolute right-[calc(10em/14)] pointer-events-none flex items-center gap-[calc(4em/14)]" style="color:var(--muted-foreground)"><kbd style="font-family:var(--font-sans);font-size:calc(12em / 14);font-weight:500;line-height:1.5;padding:0 calc(5em / 14);border:1px solid var(--text-tertiary);border-radius:var(--radius-sm)">/</kbd></span></div><nav aria-label="Navigation" class="slot-sidebar-nav overflow-y-auto scrollbar-stable min-h-0 -mr-(--sidebar-row-padding-x) pb-[calc(24em/14)] flex flex-col gap-[calc(8em/14)]" style="padding-inline:var(--sidebar-row-padding-x)"><div class="flex flex-col" style="gap:var(--sidebar-row-gap)"><div class="cursor-default mb-[calc(2em/14)] flex items-center gap-(--sidebar-leading-gap)" style="margin-top:var(--sidebar-group-margin-top);opacity:1;font-variation-settings:"wght" 550;font-size:var(--type-nav-group-size);letter-spacing:0.04em;text-transform:uppercase;color:var(--muted-foreground);transition:none">React Export</div><div class="flex flex-col"><a aria-current="page" class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-primary);transition:none" href="/"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></svg></span><span class="font-medium">Overview</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="false" style="display:grid;grid-template-rows:1fr;opacity:1;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="true" data-heading-id="see-it-in-action" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400;background:var(--sidebar-active-background)" href="/#see-it-in-action">See it in action</a></li><li><a data-active="false" data-heading-id="features" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/#features">Features</a></li><li><a data-active="false" data-heading-id="quick-start" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/#quick-start">Quick start</a></li><li><a data-active="false" data-heading-id="framer-mcp" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/#framer-mcp">Framer MCP</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/quickstart"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/>
2<path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/></g></svg></span><span class="font-medium">Quickstart</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="export-your-first-framer-component" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#export-your-first-framer-component">Export your first Framer component</a></li><li><a data-active="false" data-heading-id="prerequisites" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#prerequisites">Prerequisites</a></li><li><a data-active="false" data-heading-id="1-install-the-react-export-plugin" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#1-install-the-react-export-plugin">1. Install the React Export plugin</a></li><li><a data-active="false" data-heading-id="2-select-components-and-export" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#2-select-components-and-export">2. Select components and export</a></li><li><a data-active="false" data-heading-id="3-create-an-example-app" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#3-create-an-example-app">3. Create an example app</a></li><li><a data-active="false" data-heading-id="4-use-in-an-existing-project" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#4-use-in-an-existing-project">4. Use in an existing project</a></li><li><a data-active="false" data-heading-id="5-keep-components-in-sync" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#5-keep-components-in-sync">5. Keep components in sync</a></li><li><a data-active="false" data-heading-id="whats-next" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/quickstart#whats-next">What's next</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/how-it-works"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2"/><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="8" height="8" x="8" y="8" rx="1"/></g></svg></span><span class="font-medium">How It Works</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="the-export-pipeline" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#the-export-pipeline">The export pipeline</a></li><li><a data-active="false" data-heading-id="what-gets-exported" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#what-gets-exported">
2What gets exported</a></li><li><a data-active="false" data-heading-id="when-to-re-run-the-plugin-vs-the-cli" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#when-to-re-run-the-plugin-vs-the-cli">When to re-run the plugin vs the CLI</a></li><li><a data-active="false" data-heading-id="server-side-rendering" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#server-side-rendering">Server-side rendering</a></li><li><a data-active="false" data-heading-id="future-compatibility" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#future-compatibility">Future compatibility</a></li><li><a data-active="false" data-heading-id="supported-component-props" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/how-it-works#supported-component-props">Supported component props</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/styling"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></g></svg></span><span class="font-medium">Styling & Variants</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="styling--responsive-variants" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#styling--responsive-variants">Styling & responsive variants</a></li><li><a data-active="false" data-heading-id="overriding-styles" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#overriding-styles">Overriding styles</a></li><li><a data-active="false" data-heading-id="responsive-variants" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#responsive-variants">Responsive variants</a></li><li><a data-active="false" data-heading-id="dark-mode" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#dark-mode">Dark mode</a></li><li><a data-active="false" data-heading-id="color-styles-as-css-variables" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#color-styles-as-css-variables">Color styles as CSS variables</a></li><li><a data-active="false" data-heading-id="localization" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#localization">Localization</a></li><li><a data-active="false" data-heading-id="client-side-navigation" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/styling#client-side-navigation">Client-side navigation</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/troubleshooting"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M12 20v-9m2-4a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4zm.12-3.12L16 2"/><path d="M21 21a4 4 0 0 0-3.81-4M21 5a4 4 0 0 1-3.55 3.97M22 13h-4M3 21a4 4 0 0 1 3.81-4M3 5a4 4 0 0 0 3.55 3.97M6 13H2M8 2l1.88 1.88M9 7.
213V6a3 3 0 1 1 6 0v1.13"/></g></svg></span><span class="font-medium">Troubleshooting</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="react-strict-mode-breaks-animations" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#react-strict-mode-breaks-animations">React Strict Mode breaks animations</a></li><li><a data-active="false" data-heading-id="react-19-ref-warning" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#react-19-ref-warning">React 19 ref warning</a></li><li><a data-active="false" data-heading-id="hydration-mismatch-warnings" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#hydration-mismatch-warnings">Hydration mismatch warnings</a></li><li><a data-active="false" data-heading-id="export-fails-with-esbuild-error" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#export-fails-with-esbuild-error">Export fails with esbuild error</a></li><li><a data-active="false" data-heading-id="could-not-clone-my-website" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#could-not-clone-my-website">"Could not clone my website"</a></li><li><a data-active="false" data-heading-id="components-render-but-look-wrong" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#components-render-but-look-wrong">Components render but look wrong</a></li><li><a data-active="false" data-heading-id="--watch-mode-not-detecting-changes" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#--watch-mode-not-detecting-changes">--watch mode not detecting changes</a></li><li><a data-active="false" data-heading-id="fonts-not-loading" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#fonts-not-loading">Fonts not loading</a></li><li><a data-active="false" data-heading-id="known-limitations" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/troubleshooting#known-limitations">Known limitations</a></li></ul></div></div></div></div></div></div><div class="flex flex-col" style="gap:var(--sidebar-row-gap)"><div class="cursor-default mb-[calc(2em/14)] flex items-center gap-(--sidebar-leading-gap)" style="margin-top:var(--sidebar-group-margin-top);opacity:1;font-variation-settings:"wght" 550;font-size:var(--type-nav-group-size);letter-spacing:0.04em;text-transform:uppercase;color:var(--muted-foreground);transition:none">Guides</div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/guides/export-full-website"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20"/></g></svg></span><span class="font-medium">Export Full Website</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="overview" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#overview">Overview</a></li><li><a data-active="false" data-heading-id="1-turn-page-sections-into-components-with-framer-agent" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#1-turn-page-sections-into-components-with-framer-agent">
21. Turn page sections into components with Framer Agent</a></li><li><a data-active="false" data-heading-id="2-export-only-your-section-components" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#2-export-only-your-section-components">2. Export only your section components</a></li><li><a data-active="false" data-heading-id="3-create-your-react-project" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#3-create-your-react-project">3. Create your React project</a></li><li><a data-active="false" data-heading-id="4-download-your-components" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#4-download-your-components">4. Download your components</a></li><li><a data-active="false" data-heading-id="5-assemble-the-page-in-order" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#5-assemble-the-page-in-order">5. Assemble the page in order</a></li><li><a data-active="false" data-heading-id="6-add-routing-for-multiple-pages" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#6-add-routing-for-multiple-pages">6. Add routing for multiple pages</a></li><li><a data-active="false" data-heading-id="7-enable-client-navigation" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#7-enable-client-navigation">7. Enable client navigation</a></li><li><a data-active="false" data-heading-id="8-add-dark-mode-optional" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#8-add-dark-mode-optional">8. Add dark mode (optional)</a></li><li><a data-active="false" data-heading-id="9-deploy" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#9-deploy">9. Deploy</a></li><li><a data-active="false" data-heading-id="10-keep-it-updated" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#10-keep-it-updated">10. Keep it updated</a></li><li><a data-active="false" data-heading-id="whats-next" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/export-full-website#whats-next">What's next</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/guides/deploy-to-vercel"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg></span><span class="font-medium">Deploy to Vercel</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="prerequisites" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#prerequisites">Prerequisites</a></li><li><a data-active="false" data-heading-id="1-set-up-the-project" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#1-set-up-the-project">1. Set up the project</a></li><li><a data-active="false" data-heading-id="2-build-your-pages" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#2-build-your-pages">2. Build your pages</a></li><li><a data-active="false" data-heading-id="3-test-locally" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#3-test-locally">3. Test locally</a></li><li><a data-active="false" data-heading-id="4-deploy-to-vercel" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#4-deploy-to-vercel">4. Deploy to Vercel</a></li><li><a data-active="false" data-heading-id="5-update-workflow" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/deploy-to-vercel#5-update-workflow">5. Update workflow</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/guides/nextjs-integration"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M9 21V9"/></g></svg></span><span class="font-medium">Next.js</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="setup" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#setup">Setup</a></li><li><a data-active="false" data-heading-id="import-styles-globally" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#import-styles-globally">Import styles globally</a></li><li><a data-active="false" data-heading-id="use-components-in-pages" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#use-components-in-pages">Use components in pages</a></li><li><a data-active="false" data-heading-id="client-side-navigation" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#client-side-navigation">Client-side navigation</a></li><li><a data-active="false" data-heading-id="dark-mode" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#dark-mode">Dark mode</a></li><li><a data-active="false" data-heading-id="disable-strict-mode" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#disable-strict-mode">Disable Strict Mode</a></li><li><a data-active="false" data-heading-id="multiple-pages" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#multiple-pages">Multiple pages</a></li><li><a data-active="false" data-heading-id="example-project" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-en
2d:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/nextjs-integration#example-project">Example project</a></li></ul></div></div></div></div></div><div class="flex flex-col"><a class="group flex items-center gap-(--sidebar-leading-gap) no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:var(--sidebar-row-padding-y);margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);opacity:1;color:var(--sidebar-foreground);transition:none" href="/guides/vite-integration"><span class="inline-flex shrink-0 self-start transition-[filter] duration-150" style="margin-block-start:calc((1lh - var(--sidebar-icon-size)) / 2)"><svg aria-hidden="true" viewBox="0 0 24 24" width="var(--sidebar-icon-size)" height="var(--sidebar-icon-size)" style="display:inline-block;flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.914 4a1.5 1.5 0 0 0-2.474-1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a.5.5 0 0 1 .471.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9-9A1.5 1.5 0 0 0 18.5 10h-3.997a.5.5 0 0 1-.472-.667z"/></svg></span><span class="font-medium">Vite</span><span class="ml-auto inline-flex items-center gap-1"></span></a><div aria-hidden="true" inert="" style="display:grid;grid-template-rows:0fr;opacity:0;transition:none"><div style="overflow:hidden;min-height:0;padding-inline:var(--sidebar-row-padding-x, 8px);margin-inline:calc(-1 * var(--sidebar-row-padding-x, 8px))"><div class="relative mt-[calc(2em/14)] pl-[calc(2em/14)] pb-[calc(8em/14)]" style="margin-inline-start:max(0px, calc(1 * var(--sidebar-indent) - var(--sidebar-icon-size) - calc(2em / 14)))"><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-block-start:calc(2px);inset-block-end:0;inset-inline-start:0;width:1.5px;background-color:var(--border-subtle)"></div><div aria-hidden="true" class="pointer-events-none absolute rounded-full" style="inset-inline-start:0;width:1.5px;background-color:var(--sidebar-primary);transition:none;opacity:0"></div><div class="relative"><ul class="relative list-none m-0 p-0 flex flex-col gap-(--sidebar-leading-gap) pt-(--sidebar-leading-gap) pl-(--sidebar-icon-size) leading-[1.33] box-content"><li><a data-active="false" data-heading-id="setup" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#setup">Setup</a></li><li><a data-active="false" data-heading-id="disable-strict-mode" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#disable-strict-mode">Disable Strict Mode</a></li><li><a data-active="false" data-heading-id="import-styles-and-components" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#import-styles-and-components">Import styles and components</a></li><li><a data-active="false" data-heading-id="adding-routing" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#adding-routing">Adding routing</a></li><li><a data-active="false" data-heading-id="production-build" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#production-build">Production build</a></li><li><a data-active="false" data-heading-id="dark-mode" class="block leading-[1.43] no-underline hover:[background:var(--sidebar-hover-background)]" style="padding-inline-start:var(--sidebar-row-padding-x);padding-inline-end:var(--sidebar-row-padding-x);padding-block:0;margin-inline:calc(-1 * var(--sidebar-row-padding-x));border-radius:var(--sidebar-link-radius);color:var(--sidebar-foreground);font-weight:400" href="/guides/vite-integration#dark-mode">Dark mode</a></li></ul></div></div></div></div></div></div></nav></aside></div></div><div class="grid grid-cols-1 gap-y-(--section-gap) lg:col-[2/-1] lg:grid-cols-subgrid lg:self-stretch" style="grid-template-rows:repeat(5, auto) minmax(max-content, 1fr)"><div class="flex flex-col gap-y-(--prose-gap) lg:grid lg:grid-cols-subgrid lg:col-[1/-1]" style="grid-row:1"><div class="slot-main flex flex-col gap-(--prose-gap) lg:col-[1] lg:overflow-visible text-(length:--type-body-size)"><div class="editorial-prose">Unframer lets you <strong>design in Framer</strong> and <strong>ship in React</strong>. Export your Framer components as <code class="inline-code">.jsx</code> files, import them into Next.js, Remix, Vite, Astro, or any React framework. You get server-side rendering, JSDoc type annotations, responsive breakpoints, dark mode, and working animations out of the box. No iframes, no embeds, just React components.</div><div class="editorial-prose">
2Already deployed in thousands of websites</div><div class="flex w-full overflow-hidden" style="mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)"><div class="flex shrink-0 items-center" style="gap:64px;will-change:transform"><div class="flex shrink-0"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:157 / 27;width:157px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/workbase.svg" alt="Workbase" width="157" height="27" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:113 / 40;width:113px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/gesserit.svg" alt="Gesserit" width="113" height="40" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:117 / 68;width:92px;height:auto;max-width:100%"><img src="data:image/webp;base64,UklGRswAAABXRUJQVlA4WAoAAAAQAAAADwAACAAAQUxQSI0AAAABgJtt27Hnfp73t22jNJIMkFJdNrDtLGAbrW22NstMkRWyQ0QkACb8F0RGK7OOiZiFYGLX8+t0dEGAQAA6gtE72qxurUl4awpXy4r+RoM/A+elB/1jjcd7Pb+lr+Wh97Xr2I319rX0Z7bBeF0QPMB40zqGtzB9veJYz7CW5Wo1ZHIgYoRGACAAREQgAgAAVlA4IBgAAAAwAQCdASoQAAkAAsBMJaQAA3AA/veMAAA=" alt="" aria-hidden="true" width="117" height="68" style="grid-area:1 / 1;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:0"/><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/rivet.png" alt="Rivet" width="117" height="68" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(6px);opacity:0;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:138 / 32;width:138px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/unchatgpt.svg" alt="Unchatgpt" width="138" height="32" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0" aria-hidden="true"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:157 / 27;width:157px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/workbase.svg" alt="Workbase" width="157" height="27" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0" aria-hidden="true"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:113 / 40;width:113px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/gesserit.svg" alt="Gesserit" width="113" height="40" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0" aria-hidden="true"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:117 / 68;width:92px;height:auto;max-width:100%"><img src="data:image/webp;base64,UklGRswAAABXRUJQVlA4WAoAAAAQAAAADwAACAAAQUxQSI0AAAABgJtt27Hnfp73t22jNJIMkFJdNrDtLGAbrW22NstMkRWyQ0QkACb8F0RGK7OOiZiFYGLX8+t0dEGAQAA6gtE72qxurUl4awpXy4r+RoM/A+elB/1jjcd7Pb+lr+Wh97Xr2I319rX0Z7bBeF0QPMB40zqGtzB9veJYz7CW5Wo1ZHIgYoRGACAAREQgAgAAVlA4IBgAAAAwAQCdASoQAAkAAsBMJaQAA3AA/veMAAA=" alt="" aria-hidden="true" width="117" height="68" style="grid-area:1 / 1;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:0"/><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/rivet.png" alt="Rivet" width="117" height="68" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(6px);opacity:0;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div><div class="flex shrink-0" aria-hidden="true"><div class="holocron-pixelated-image light:invert" style="position:relative;overflow:hidden;display:inline-grid;aspect-ratio:138 / 32;width:138px;height:auto;max-width:100%"><div data-rmiz=""><div data-rmiz-content="not-found" style="visibility:visible"><img src="/logos/unchatgpt.svg" alt="Unchatgpt" width="138" height="32" style="display:block;width:100%;height:100%;object-fit:contain;filter:blur(0px);opacity:1;transition:opacity 0.16s ease-out, filter 0.16s ease-out"/></div></div></div></div></div></div></div></div><div class="flex flex-col gap-y-(--prose-gap) lg:grid lg:grid-cols-subgrid lg:col-[1/-1]" style="grid-row:2"><div class="slot-main flex flex-col gap-(--prose-gap) lg:col-[1] lg:overflow-visible text-(length:--type-body-size)"><h2 id="see-it-in-action" class="editorial-heading editorial-h2" data-toc-heading="true" data-toc-level="2"><span>See it in action</span><span style="flex:1;height:1px;
2background:var(--divider)"></span></h2><div class="editorial-prose">The component below was designed entirely in Framer and rendered here as a native React component via Unframer. No iframe, no screenshot, just real interactive React running on this page.</div><style data-framer-css-ssr="true" data-framer-component="framer-oKESy">@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } } 3.framer-oKESy.framer-1rvq9lt, .framer-oKESy .framer-1rvq9lt { display: block; } 4.framer-oKESy.framer-1gupwc7 { align-content: center; align-items: center; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: min-content; justify-content: center; padding: 40px 0px 40px 0px; position: relative; width: 635px; } 5.framer-oKESy .framer-l8j3ee { align-content: center; align-items: center; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 40px; height: min-content; justify-content: center; overflow: visible; padding: 0px; position: relative; width: min-content; } 6.framer-oKESy .framer-hf6520-container { flex: none; height: 244px; position: relative; width: 160px; } 7.framer-oKESy .framer-rvg7j6-container, .framer-oKESy .framer-1lcm39-container { aspect-ratio: 0.6557377049180327 / 1; flex: none; height: var(--framer-aspect-ratio-supported, 244px); position: relative; width: 160px; }</style><div class="framer-oKESy framer-1gupwc7 framer-v-1gupwc7" data-framer-name="Variant 1" style="width:100%"><div class="framer-l8j3ee"><div class="framer-hf6520-container"><!--$?--><template id="B:0"></template><!--/$--></div><div class="framer-rvg7j6-container"><!--$?--><template id="B:1"></template><!--/$--></div><div class="framer-1lcm39-container"><!--$?--><template id="B:2"></template><!--/$--></div></div></div></div></div><div class="flex flex-col gap-y-(--prose-gap) lg:grid lg:grid-cols-subgrid lg:col-[1/-1]" style="grid-row:3"><div class="slot-main flex flex-col gap-(--prose-gap) lg:col-[1] lg:overflow-visible text-(length:--type-body-size)"><h2 id="features" class="editorial-heading editorial-h2" data-toc-heading="true" data-toc-level="2"><span>Features</span><span style="flex:1;height:1px;background:var(--divider)"></span></h2><ul class="no-bleed editorial-prose pl-5 flex flex-col gap-(--list-gap)" style="list-style-type:disc"><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Any React framework</strong> â works with Next.js, Remix, Vite, Astro, and more</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Server-side rendering</strong> â components render on the server for great SEO and performance</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>JSDoc types</strong> â autocomplete and type checking from your Framer component variables</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Responsive breakpoints</strong> â use <code class="inline-code">.Responsive</code> to automatically switch variants by screen size</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Dark mode</strong> â add the <code class="inline-code">dark</code> class and all color styles switch automatically</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Framer animations</strong> â hover effects, transitions, and scroll animations work out of the box</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Color styles as CSS variables</strong> â use <code class="inline-code">--unframer-*</code> variables in your own code or Tailwind</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Localization</strong> â pass <code class="inline-code">locale</code> prop to render components in different languages</div></div></li><li class="ps-1"><div class="flex flex-col gap-(--list-gap)"><div class="editorial-prose"><strong>Client navigation</strong>
7 â <code class="inline-code">UnframerProvider</code> integrates with your router for instant page transitions</div></div></li></ul></div></div><div class="flex flex-col gap-y-(--prose-gap) lg:grid lg:grid-cols-subgrid lg:col-[1/-1]" style="grid-row:4"><div class="slot-main flex flex-col gap-(--prose-gap) lg:col-[1] lg:overflow-visible text-(length:--type-body-size)"><h2 id="quick-start" class="editorial-heading editorial-h2" data-toc-heading="true" data-toc-level="2"><span>Quick start</span><span style="flex:1;height:1px;background:var(--divider)"></span></h2><figure class="group/code relative m-0 bleed-right" style="background:var(--code-block-background);border:var(--code-block-border);box-shadow:var(--code-block-shadow);border-radius:var(--code-block-radius);padding-left:var(--code-block-padding-x);padding-right:var(--code-block-padding-x);padding-top:var(--code-block-padding-y);padding-bottom:var(--code-block-padding-y)"><div class="relative" style="font-family:var(--font-code);font-size:var(--type-code-size);line-height:1.6"><pre class="overflow-x-auto scrollbar-none" style="margin:0"><div class="flex" style="font-weight:var(--weight-regular);letter-spacing:normal;color:var(--foreground);tab-size:2"><span class="select-none shrink-0" aria-hidden="true" style="color:var(--text-tertiary);text-align:right;padding-right:16px;width:26px;overflow:hidden;user-select:none"><span class="block">1</span><span class="block">2</span><span class="block">3</span><span class="block">4</span><span class="block">5</span><span class="block">6</span><span class="block">7</span></span><code class="language-bash" style="white-space:pre;background:none;padding:0;line-height:1.6"><span class="token comment"># 1. Install</span> 8<span class="token function">npm</span> install unframer react@19 react-do<span class="token function">m@19</span> 9 10<span class="token comment"># 2. Open the React Export plugin in Framer and select your components</span> 11 12<span class="token comment"># 3. Download components</span> 13<span class="token function">npx</span> unframer <span class="token punctuation">{</span>projectId<span class="token punctuation">}</span> <span class="token parameter variable">--outDir</span> ./src/framer</code></div></pre></div><button type="button" aria-label="Copy code" class="absolute z-10 flex size-[28px] curs
13or-pointer items-center justify-center rounded-md bg-background/80 text-muted-foreground opacity-0 backdrop-blur-sm transition-all hover:text-foreground group-hover/code:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" style="top:var(--code-block-padding-y);right:calc(var(--code-block-padding-x) + 4px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></figure><figure class="group/code relative m-0 bleed-right" style="background:var(--code-block-background);border:var(--code-block-border);box-shadow:var(--code-block-shadow);border-radius:var(--code-block-radius);padding-left:var(--code-block-padding-x);padding-right:var(--code-block-padding-x);padding-top:var(--code-block-padding-y);padding-bottom:var(--code-block-padding-y)"><div class="relative" style="font-family:var(--font-code);font-size:var(--type-code-size);line-height:1.6"><pre class="overflow-x-auto scrollbar-none" style="margin:0"><div class="flex" style="font-weight:var(--weight-regular);letter-spacing:normal;color:var(--foreground);tab-size:2"><span class="select-none shrink-0" aria-hidden="true" style="color:var(--text-tertiary);text-align:right;padding-right:16px;width:26px;overflow:hidden;user-select:none"><span class="block">1</span><span class="block">2</span><span class="block">3</span><span class="block">4</span><span class="block">5</span><span class="block">6</span><span class="block">7</span></span><code class="language-tsx" style="white-space:pre;background:none;padding:0;line-height:1.6"><span class="token comment">// 4. Import and use</span> 14<span class="token keyword module">import</span> <span class="token string">'./framer/styles.css'</span> 15<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Hero</span></span> <span class="token keyword module">from</span> <span class="token string">'./framer/hero'</span> 16 17<span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 18 <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Hero.Responsive</span></span> <span class="token punctuation">/></span></span> 19<span class="token punctuation">}</span></code></div></pre></div><button type="button" aria-label="Copy code" class="absolute z-10 flex size-[28px] curs
19or-pointer items-center justify-center rounded-md bg-background/80 text-muted-foreground opacity-0 backdrop-blur-sm transition-all hover:text-foreground group-hover/code:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" style="top:var(--code-block-padding-y);right:calc(var(--code-block-padding-x) + 4px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></figure><div class="editorial-prose">Read the full <a style="color:var(--primary);font-weight:var(--weight-heading);text-decoration:none" href="/quickstart">Quickstart guide</a> for a step-by-step walkthrough.</div></div></div><div class="flex flex-col gap-y-(--prose-gap) lg:grid lg:grid-cols-subgrid lg:col-[1/-1]" style="grid-row:5"><div class="slot-main flex flex-col gap-(--prose-gap) lg:col-[1] lg:overflow-visible text-(length:--type-body-size)"><h2 id="framer-mcp" class="editorial-heading editorial-h2" data-toc-heading="true" data-toc-level="2"><span>Framer MCP</span><span style="flex:1;height:1px;background:var(--divider)"></span></h2><div class="editorial-prose">Let AI assistants like <strong>Claude</strong>, <strong>Cursor</strong>, and <strong>Copilot</strong> read and modify your Framer project directly. The <a style="color:var(--primary);font-weight:var(--weight-heading);text-decoration:none" href="/mcp/overview">Framer MCP plugin</a> exposes your project as a set of tools that AI can call through the Model Context Protocol.</div><div class="editorial-prose"><a style="color:var(--primary);font-weight:var(--weight-heading);text-decoration:none" href="/mcp/connect">Set up Framer MCP â</a></div></div></div><div class="slot-aside flex flex-col text-(length:--type-small-size) leading-[1.5] gap-3 lg:col-[2] lg:[grid-row:var(--shared-row)] lg:sticky lg:self-start lg:overflow-y-auto scrollbar-none [&>*]:shrink-0" style="--shared-row:1 / span 5;top:var(--sticky-top);max-height:calc(100vh - var(--sticky-top))"><div class="hidden lg:block w-full overflow-hidden rounded-2xl" data-chat-shell="sidebar" style="background-color:var(--background);border-radius:16px"><div class="px-0.5 pt-px pb-0.5" style="background-color:color-mix(in srgb, var(--foreground) 8%, var(--background))"><div class="flex items-center gap-1.5 px-2.5 py-1.5"><span class="text-muted-foreground shrink-0"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9-3a1 1 0 11-2 0 1 1 0 012 0zM6.92 7.42a.75.75 0 01.99-.37.25.25 0 01.14.22v3.48a.25.25 0 01-.25.25H7a.75.75 0 010-1.5h.25V8.35a.75.75 0 01-.33-.93z"></path></svg></span><span class="text-[11px] font-medium text-muted-foreground">Ask AI about this page</span></div><div class="bg-background p-2 flex flex-col gap-1.5 rounded-[14px]"><textarea placeholder="what is Unframer?" rows="1" class="w-full resize-none border-0 bg-transparent leading-5 text-foreground placeholder:text-muted-foreground/75 outline-none [field-sizing:content] min-h-5 max-h-40 text-sm"></textarea><div class="flex items-center justify-end"><button type="button" disabled="" class="flex items-center justify-center size-7 rounded-full transition-colors bg-muted text-muted-foreground" aria-label="Send message"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12V4M4 8l4-4 4 4"></path></svg></button></div></div></div></div><div class="hidden lg:flex items-center gap-1.5 w-full"><button type="button" class="inline-flex items-center gap-1.5 rounded-md -ml-2 px-2 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent cursor-pointer" title="Copy page as Markdown"><span>Copy page as Markdown</span><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="9" height="9" rx="1.5"></rect><path d="M2 11V2.5A.5.5 0 012.5 2H11"></path></svg></button></div></div><div class="slot-main flex flex-col justify-end lg:col-[1]" style="grid-row:6"><footer class="bg-background"><div class="mx-auto w-full max-w-full px-(--mobile-padding) py-10 lg:max-w-(--grid-max-width) lg:px-0"><div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><a class="no-underline flex items-center" href="/"><img src="/holocron-api/ai-logo/unframer.jpeg" alt="Unframer" class="h-6 w-auto dark:hidden" style="width:auto;mix-blend-mode:multiply"/><img src="/holocron-api/ai-logo/unframer.jpeg" alt="Unframer" class="h-6 w-auto hidden dark:block" style="width:auto;mix-blend-mode:screen;filter:invert(1)"/></a></div><div class="mt-8 flex flex-wrap justify-between gap-8"><div class="flex flex-col gap-2">
19<div class="text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wider mb-1">Framer Reviews</div><a target="_blank" rel="noopener noreferrer" class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="https://framerreviews.com">Framer Reviews</a><a target="_blank" rel="noopener noreferrer" class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="https://framerreviews.com/framer-vs-webflow">Framer vs Webflow</a><a target="_blank" rel="noopener noreferrer" class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="https://framerreviews.com/framer-vs-wix">Framer vs Wix</a></div><div class="flex flex-col gap-2"><div class="text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wider mb-1">Legal</div><a class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="/terms">Terms</a><a class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="/privacy">Privacy</a></div><div class="flex flex-col gap-2"><div class="text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wider mb-1">Account</div><a class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="/login">Login</a><a class="no-underline text-xs text-muted-foreground transition-colors duration-150 hover:text-foreground" href="/subscriptions">Manage Subscriptions</a></div></div></div><div class="flex items-center w-full py-6"><div class="flex items-baseline gap-1 text-xs opacity-40 hover:opacity-70 transition-opacity duration-150 shrink-0"><span>Powered by</span><span class="flex items-baseline gap-1"><a target="_blank" rel="noopener noreferrer" class="no-underline font-bold" href="https://holocron.so/?utm_source=powered-by">Holocron</a></span></div><div class="grow"></div><div class="flex items-center gap-1.5 shrink-0 -mr-2"><span class="no-underline inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium whitespace-nowrap transition-colors duration-150 text-muted-foreground/30"><svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4l-4 4 4 4"></path></svg><span>Prev Page</span></span><span style="display:inline-flex"><a aria-label="Next: Quickstart" class="no-underline inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium whitespace-nowrap transition-colors duration-150 text-muted-foreground hover:text-foreground hover:bg-accent" href="/quickstart"><span>Next Page</span><svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4l4 4-4 4"></path></svg></a></span></div></div></footer></div></div></div></div></div>
19<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
19<script id="_R_">self.__SPICEFLOW_DEPLOYMENT_ID__="mu6v1mgh-b771c1d1";import("/assets/index-CuMWLRN6.js")</script>
19<div hidden id="S:0"><style data-framer-css-ssr="true" data-framer-component="framer-2LhxO">@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } } 20.framer-2LhxO.framer-ea1tcq, .framer-2LhxO .framer-ea1tcq { display: block; } 21.framer-2LhxO.framer-1eoafg6 { align-content: center; align-items: center; cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; height: 305px; justify-content: center; overflow: visible; padding: 0px; position: relative; width: 200px; } 22.framer-2LhxO .framer-69i0pq { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 0px; height: 100%; justify-content: center; overflow: visible; padding: 0px; position: relative; transform-style: preserve-3d; width: 1px; } 23.framer-2LhxO .framer-13l13wi { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: 1px; justify-content: center; overflow: hidden; padding: 30px; position: relative; width: 100%; z-index: 0; } 24.framer-2LhxO .framer-31lhx8, .framer-2LhxO .framer-102s078 { flex: none; height: auto; position: relative; white-space: pre-wrap; width: 100%; word-break: break-word; word-wrap: break-word; } 25.framer-2LhxO .framer-18o8o6w { align-content: center; align-items: center; bottom: 0px; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: center; left: 0px; overflow: hidden; padding: 0px; position: absolute; right: 0px; top: 0px; z-index: 1; } 26.framer-2LhxO .framer-19jpaxx { aspect-ratio: 0.6564992961051149 / 1; flex: 1 0 0px; height: var(--framer-aspect-ratio-supported, 305px); overflow: visible; position: relative; width: 1px; } 27.framer-2LhxO .framer-xdvehx { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 18px; z-index: 1; } 28.framer-2LhxO .framer-1cnzc01 { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; right: 0px; top: 0px; z-index: 1; } 29.framer-2LhxO.framer-v-1eoafg6.hover .framer-13l13wi { order: 1; } 30.framer-2LhxO.framer-v-1eoafg6.hover .framer-18o8o6w { left: 1px; order: 0; right: -1px; }</style><div class="framer-2LhxO framer-1eoafg6 framer-v-1eoafg6" data-framer-name="Variant 1" style="height:100%;width:100%;box-shadow:0px 0.7065919983928324px 0.7065919983928324px -0.625px rgba(0, 0, 0, 0), 0px 1.8065619053231785px 1.8065619053231785px -1.25px rgba(0, 0, 0, 0), 0px 3.6217592146567767px 3.6217592146567767px -1.875px rgba(0, 0, 0, 0), 0px 6.8655999097303715px 6.8655999097303715px -2.5px rgba(0, 0, 0, 0), 0px 13.646761411524492px 13.646761411524492px -3.125px rgba(0, 0, 0, 0), 0px 30px 30px -3.75px rgba(0, 0, 0, 0)"><div class="framer-69i0pq" data-framer-name="Book" style="transform:perspective(1200px)"><div class="framer-13l13wi" data-framer-name="Paper" style="background:linear-gradient(239deg, rgb(255, 255, 255) 0%, rgb(224, 224, 224) 100%);transform:translateZ(-10px)"><div class="framer-31lhx8" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;transform:none"><p class="framer-text" style="--font-selector:SW50ZXItQm9sZA==;--framer-font-family:"Inter", "Inter Placeholder", sans-serif;--framer-font-size:20px;--framer-font-weight:700;--framer-text-alignment:center">Steve Jobs</p></div><div class="framer-102s078" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;opacity:0.3;transform:none"><p class="framer-text" style="--framer-font-size:12px;--framer-text-alignment:center">Walter Isaacson</p></div></div><div class="framer-18o8o6w" data-framer-name="Cover" style="transform:none"><div class="framer-19jpaxx" data-framer-name="Cover"><div style="position:absolute;border-radius:inherit;corner-shape:inherit;top:0;right:0;bottom:0;left:0" data-framer-background-image-wrapper="true"><img decoding="async" width="1399" height="2131" sizes="max(160px, 1px)" srcSet="https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg?scale-down-to=1024 672w,https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg?scale-down-to=2048 1344w,https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg 1399w" src="https://framerusercontent.com/images/JXL9OqyS9HXAxdkH6ZGIV5PQXQQ.jpg?scale-down-to=512" alt="" style="display:block;width:100%;height:100%;border-radius:inherit;corner-shape:inherit;object-position:center;object-fit:cover"/>
30</div></div><div class="framer-xdvehx" data-framer-name="Lights" style="background:linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 23.819327139639633%, rgb(0, 0, 0) 40.39449605855856%, rgb(255, 255, 255) 48.42518299549548%, rgba(255, 255, 255, 0) 100%);opacity:0.2"></div><div class="framer-1cnzc01" data-framer-name="Lights" style="background:linear-gradient(38deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)"></div></div></div></div></div>
30<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; 31$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
31<div hidden id="S:1"><style data-framer-css-ssr="true" data-framer-component="framer-2LhxO">@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } } 32.framer-2LhxO.framer-ea1tcq, .framer-2LhxO .framer-ea1tcq { display: block; } 33.framer-2LhxO.framer-1eoafg6 { align-content: center; align-items: center; cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; height: 305px; justify-content: center; overflow: visible; padding: 0px; position: relative; width: 200px; } 34.framer-2LhxO .framer-69i0pq { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 0px; height: 100%; justify-content: center; overflow: visible; padding: 0px; position: relative; transform-style: preserve-3d; width: 1px; } 35.framer-2LhxO .framer-13l13wi { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: 1px; justify-content: center; overflow: hidden; padding: 30px; position: relative; width: 100%; z-index: 0; } 36.framer-2LhxO .framer-31lhx8, .framer-2LhxO .framer-102s078 { flex: none; height: auto; position: relative; white-space: pre-wrap; width: 100%; word-break: break-word; word-wrap: break-word; } 37.framer-2LhxO .framer-18o8o6w { align-content: center; align-items: center; bottom: 0px; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: center; left: 0px; overflow: hidden; padding: 0px; position: absolute; right: 0px; top: 0px; z-index: 1; } 38.framer-2LhxO .framer-19jpaxx { aspect-ratio: 0.6564992961051149 / 1; flex: 1 0 0px; height: var(--framer-aspect-ratio-supported, 305px); overflow: visible; position: relative; width: 1px; } 39.framer-2LhxO .framer-xdvehx { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 18px; z-index: 1; } 40.framer-2LhxO .framer-1cnzc01 { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; right: 0px; top: 0px; z-index: 1; } 41.framer-2LhxO.framer-v-1eoafg6.hover .framer-13l13wi { order: 1; } 42.framer-2LhxO.framer-v-1eoafg6.hover .framer-18o8o6w { left: 1px; order: 0; right: -1px; }</style><div class="framer-2LhxO framer-1eoafg6 framer-v-1eoafg6" data-framer-name="Variant 1" style="height:100%;width:100%;box-shadow:0px 0.7065919983928324px 0.7065919983928324px -0.625px rgba(0, 0, 0, 0), 0px 1.8065619053231785px 1.8065619053231785px -1.25px rgba(0, 0, 0, 0), 0px 3.6217592146567767px 3.6217592146567767px -1.875px rgba(0, 0, 0, 0), 0px 6.8655999097303715px 6.8655999097303715px -2.5px rgba(0, 0, 0, 0), 0px 13.646761411524492px 13.646761411524492px -3.125px rgba(0, 0, 0, 0), 0px 30px 30px -3.75px rgba(0, 0, 0, 0)"><div class="framer-69i0pq" data-framer-name="Book" style="transform:perspective(1200px)"><div class="framer-13l13wi" data-framer-name="Paper" style="background:linear-gradient(239deg, rgb(255, 255, 255) 0%, rgb(224, 224, 224) 100%);transform:translateZ(-10px)"><div class="framer-31lhx8" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;transform:none"><p class="framer-text" style="--font-selector:SW50ZXItQm9sZA==;--framer-font-family:"Inter", "Inter Placeholder", sans-serif;--framer-font-size:20px;--framer-font-weight:700;--framer-text-alignment:center">Design of Books</p></div><div class="framer-102s078" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;opacity:0.3;transform:none"><p class="framer-text" style="--framer-font-size:12px;--framer-text-alignment:center">Debbie Berne</p></div></div><div class="framer-18o8o6w" data-framer-name="Cover" style="transform:none"><div class="framer-19jpaxx" data-framer-name="Cover"><div style="position:absolute;border-radius:inherit;corner-shape:inherit;top:0;right:0;bottom:0;left:0" data-framer-background-image-wrapper="true"><img decoding="async" width="1250" height="1874" sizes="max(160px, 1px)" srcSet="https://framerusercontent.com/images/Kw1ZU0X3OdKKa4U2V3Yi8aZk.png?scale-down-to=1024&width=1250&height=1874 683w,https://framerusercontent.com/images/Kw1ZU0X3OdKKa4U2V3Yi8aZk.png?width=1250&height=1874 1250w" src="https://framerusercontent.com/images/Kw1ZU0X3OdKKa4U2V3Yi8aZk.png?width=1250&height=1874" alt="" style="display:block;width:100%;height:100%;border-radius:inherit;corner-shape:inherit;object-position:center;object-fit:cover"/>
42</div></div><div class="framer-xdvehx" data-framer-name="Lights" style="background:linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 23.819327139639633%, rgb(0, 0, 0) 40.39449605855856%, rgb(255, 255, 255) 48.42518299549548%, rgba(255, 255, 255, 0) 100%);opacity:0.2"></div><div class="framer-1cnzc01" data-framer-name="Lights" style="background:linear-gradient(38deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)"></div></div></div></div></div>
42<script>$RC("B:1","S:1")</script>
42<div hidden id="S:2"><style data-framer-css-ssr="true" data-framer-component="framer-2LhxO">@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } } 43.framer-2LhxO.framer-ea1tcq, .framer-2LhxO .framer-ea1tcq { display: block; } 44.framer-2LhxO.framer-1eoafg6 { align-content: center; align-items: center; cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; height: 305px; justify-content: center; overflow: visible; padding: 0px; position: relative; width: 200px; } 45.framer-2LhxO .framer-69i0pq { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 0px; height: 100%; justify-content: center; overflow: visible; padding: 0px; position: relative; transform-style: preserve-3d; width: 1px; } 46.framer-2LhxO .framer-13l13wi { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: 1px; justify-content: center; overflow: hidden; padding: 30px; position: relative; width: 100%; z-index: 0; } 47.framer-2LhxO .framer-31lhx8, .framer-2LhxO .framer-102s078 { flex: none; height: auto; position: relative; white-space: pre-wrap; width: 100%; word-break: break-word; word-wrap: break-word; } 48.framer-2LhxO .framer-18o8o6w { align-content: center; align-items: center; bottom: 0px; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: center; left: 0px; overflow: hidden; padding: 0px; position: absolute; right: 0px; top: 0px; z-index: 1; } 49.framer-2LhxO .framer-19jpaxx { aspect-ratio: 0.6564992961051149 / 1; flex: 1 0 0px; height: var(--framer-aspect-ratio-supported, 305px); overflow: visible; position: relative; width: 1px; } 50.framer-2LhxO .framer-xdvehx { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 18px; z-index: 1; } 51.framer-2LhxO .framer-1cnzc01 { bottom: 0px; flex: none; left: 0px; overflow: hidden; position: absolute; right: 0px; top: 0px; z-index: 1; } 52.framer-2LhxO.framer-v-1eoafg6.hover .framer-13l13wi { order: 1; } 53.framer-2LhxO.framer-v-1eoafg6.hover .framer-18o8o6w { left: 1px; order: 0; right: -1px; }</style><div class="framer-2LhxO framer-1eoafg6 framer-v-1eoafg6" data-framer-name="Variant 1" style="height:100%;width:100%;box-shadow:0px 0.7065919983928324px 0.7065919983928324px -0.625px rgba(0, 0, 0, 0), 0px 1.8065619053231785px 1.8065619053231785px -1.25px rgba(0, 0, 0, 0), 0px 3.6217592146567767px 3.6217592146567767px -1.875px rgba(0, 0, 0, 0), 0px 6.8655999097303715px 6.8655999097303715px -2.5px rgba(0, 0, 0, 0), 0px 13.646761411524492px 13.646761411524492px -3.125px rgba(0, 0, 0, 0), 0px 30px 30px -3.75px rgba(0, 0, 0, 0)"><div class="framer-69i0pq" data-framer-name="Book" style="transform:perspective(1200px)"><div class="framer-13l13wi" data-framer-name="Paper" style="background:linear-gradient(239deg, rgb(255, 255, 255) 0%, rgb(224, 224, 224) 100%);transform:translateZ(-10px)"><div class="framer-31lhx8" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;transform:none"><p class="framer-text" style="--font-selector:SW50ZXItQm9sZA==;--framer-font-family:"Inter", "Inter Placeholder", sans-serif;--framer-font-size:20px;--framer-font-weight:700;--framer-text-alignment:center">Zero To One</p></div><div class="framer-102s078" data-framer-component-type="RichTextContainer" style="--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;opacity:0.3;transform:none"><p class="framer-text" style="--framer-font-size:12px;--framer-text-alignment:center">Peter Thiel</p></div></div><div class="framer-18o8o6w" data-framer-name="Cover" style="transform:none"><div class="framer-19jpaxx" data-framer-name="Cover"><div style="position:absolute;border-radius:inherit;corner-shape:inherit;top:0;right:0;bottom:0;left:0" data-framer-background-image-wrapper="true"><img decoding="async" width="667" height="1000" sizes="max(160px, 1px)" srcSet="https://framerusercontent.com/images/40lSKkZ9G1PrxSqHvFn9L9BGKA.png?width=667&height=1000 667w" src="https://framerusercontent.com/images/40lSKkZ9G1PrxSqHvFn9L9BGKA.png?width=667&height=1000" alt="" style="display:block;width:100%;height:100%;border-radius:inherit;corner-shape:inherit;object-position:center;object-fit:cover"/>
53</div></div><div class="framer-xdvehx" data-framer-name="Lights" style="background:linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 23.819327139639633%, rgb(0, 0, 0) 40.39449605855856%, rgb(255, 255, 255) 48.42518299549548%, rgba(255, 255, 255, 0) 100%);opacity:0.2"></div><div class="framer-1cnzc01" data-framer-name="Lights" style="background:linear-gradient(38deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)"></div></div></div></div></div>
53<script>$RC("B:2","S:2")</script>
53<script>(self.__FLIGHT_DATA||=[]).push("1:I[\"90e71acb2789\",[],\"EditorialPage\",1]\n2:I[\"ad476a724112\",[],\"P\",1]\n3:I[\"ad476a724112\",[],\"Code\",1]\n4:I[\"b162cae25a78\",[],\"Marquee\",1]\n5:I[\"cb999f4ad2af\",[],\"Image\",1]\n6:I[\"ad476a724112\",[],\"SectionHeading\",1]\n7:\"$Sreact.fragment\"\n8:I[\"6cbe71a54687\",[],\"default\",1]\n9:I[\"a29fb8b7335d\",[],\"List\",1]\na:I[\"a29fb8b7335d\",[],\"Li\",1]\nb:I[\"07d2981b7c83\",[],\"CodeBlock\",1]\n16:I[\"ad476a724112\",[],\"A\",1]\n17:I[\"1281795534f2\",[],\"Aside\",1]\n18:I[\"aa933e10d083\",[],\"SidebarAssistant\",1]\n19:I[\"aa933e10d083\",[],\"PageNavRow\",1]\n1a:I[\"1281795534f2\",[],\"Above\",1]\n1b:I[\"b95f92269d9c\",[],\"HeroSection\",1]\n1c:I[\"17dcfa101939\",[],\"ProgressBar\",1]\n1d:I[\"d80689552bbb\",[],\"LayoutContent\",1]\n1e:I[\"a4034fce1c13\",[],\"DocumentTitle\",1]\n:HL[\"/assets/index-Dij5pFrE.css\",\"stylesheet\"]\n")</script>
53<script>(self.__FLIGHT_DATA||=[]).push("0:{\"root\":{\"page\":[null,[\"$\",\"$L1\",null,{\"mode\":\"default\",\"hideSidebarAssistant\":false,\"sections\":[{\"content\":[[\"$\",\"$L2\",\"0\",{\"children\":[\"Unframer lets you \",[\"$\",\"strong\",\"1\",{\"children\":\"design in Framer\"}],\" and \",[\"$\",\"strong\",\"3\",{\"children\":\"ship in React\"}],\". Export your Framer components as \",[\"$\",\"$L3\",\"5\",{\"children\":\".jsx\"}],\" files, import them into Next.js, Remix, Vite, Astro, or any React framework. You get server-side rendering, JSDoc type annotations, responsive breakpoints, dark mode, and working animations out of the box. No iframes, no embeds, just React components.\"]}],[\"$\",\"$L2\",\"1\",{\"children\":\"Already deployed in thousands of websites\"}],[\"$\",\"$L4\",\"2\",{\"duration\":25,\"slowOnHover\":true,\"gap\":64,\"children\":[[\"$\",\"$L5\",\"0\",{\"src\":\"/logos/workbase.svg\",\"alt\":\"Workbase\",\"width\":\"157\",\"height\":\"27\",\"intrinsicWidth\":\"157\",\"intrinsicHeight\":\"27\",\"placeholder\":\"\",\"className\":\"light:invert\",\"style\":\"$undefined\",\"loading\":\"$undefined\"}],[\"$\",\"$L5\",\"1\",{\"src\":\"/logos/gesserit.svg\",\"alt\":\"Gesserit\",\"width\":\"113\",\"height\":\"40\",\"intrinsicWidth\":\"113\",\"intrinsicHeight\":\"40\",\"placeholder\":\"\",\"className\":\"light:invert\",\"style\":\"$undefined\",\"loading\":\"$undefined\"}],[\"$\",\"$L5\",\"2\",{\"src\":\"/logos/rivet.png\",\"alt\":\"Rivet\",\"width\":\"92\",\"height\":\"$undefined\",\"intrinsicWidth\":\"117\",\"intrinsicHeight\":\"68\",\"placeholder\":\"data:image/webp;base64,UklGRswAAABXRUJQVlA4WAoAAAAQAAAADwAACAAAQUxQSI0AAAABgJtt27Hnfp73t22jNJIMkFJdNrDtLGAbrW22NstMkRWyQ0QkACb8F0RGK7OOiZiFYGLX8+t0dEGAQAA6gtE72qxurUl4awpXy4r+RoM/A+elB/1jjcd7Pb+lr+Wh97Xr2I319rX0Z7bBeF0QPMB40zqGtzB9veJYz7CW5Wo1ZHIgYoRGACAAREQgAgAAVlA4IBgAAAAwAQCdASoQAAkAAsBMJaQAA3AA/veMAAA=\",\"className\":\"light:invert\",\"style\":\"$undefined\",\"loading\":\"$undefined\"}],[\"$\",\"$L5\",\"3\",{\"src\":\"/logos/unchatgpt.svg\",\"alt\":\"Unchatgpt\",\"width\":\"138\",\"height\":\"32\",\"intrinsicWidth\":\"138\",\"intrinsicHeight\":\"32\",\"placeholder\":\"\",\"className\":\"light:invert\",\"style\":\"$undefined\",\"loading\":\"$undefined\"}]]}]],\"aside\":\"$undefined\",\"sharedAside\":\"$undefined\",\"fullWidth\":\"$undefined\",\"asideRowSpan\":\"$undefined\"},{\"content\":[[\"$\",\"$L6\",\"0\",{\"id\":\"see-it-in-action\",\"level\":2,\"children\":[[\"$\",\"$7\",\"0\",{\"children\":\"See it in action\"}]]}],[\"$\",\"$L2\",\"1\",{\"children\":\"The component below was designed entirely in Framer and rendered here as a native React component via Unframer. No iframe, no screenshot, just real interactive React running on this page.\"}],[\"$\",\"$L8\",\"2\",{\"style\":{\"width\":\"100%\"},\"children\":null}]],\"aside\":\"$undefined\",\"sharedAside\":\"$undefined\",\"fullWidth\":\"$undefined\",\"asideRowSpan\":\"$undefined\"},{\"content\":[[\"$\",\"$L6\",\"0\",{\"id\":\"features\",\"level\":2,\"children\":[[\"$\",\"$7\",\"0\",{\"children\":\"Features\"}]]}],[\"$\",\"$L9\",\"1\",{\"children\":[[\"$\",\"$La\",\"0\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Any React framework\"}],\" â works with Next.js, Remix, Vite, Astro, and more\"]}]}],[\"$\",\"$La\",\"1\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Server-side rendering\"}],\" â components render on the server for great SEO and performance\"]}]}],[\"$\",\"$La\",\"2\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"JSDoc types\"}],\" â autocomplete and type checking from your Framer component variables\"]}]}],[\"$\",\"$La\",\"3\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Responsive breakpoints\"}],\" â use \",[\"$\",\"$L3\",\"2\",{\"children\":\".Responsive\"}],\" to automatically switch variants by screen size\"]}]}],[\"$\",\"$La\",\"4\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Dark mode\"}],\" â add the \",[\"$\",\"$L3\",\"2\",{\"children\":\"dark\"}],\" class and all color styles switch automatically\"]}]}],[\"$\",\"$La\",\"5\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Framer animations\"}],\" â hover effects, transitions, and scroll animations work out of the box\"]}]}],[\"$\",\"$La\",\"6\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Color styles as CSS variables\"}],\" â use \",[\"$\",\"$L3\",\"2\",{\"children\":\"--unframer-*\"}],\" variables in your own code or Tailwind\"]}]}],[\"$\",\"$La\",\"7\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Localization\"}],\" â pass \",[\"$\",\"$L3\",\"2\",{\"children\":\"locale\"}],\" prop to render components in different languages\"]}]}],[\"$\",\"$La\",\"8\",{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"strong\",\"0\",{\"children\":\"Client navigation\"}],\" â \",[\"$\",\"$L3\",\"2\",{\"children\":\"UnframerProvider\"}],\" integrates with your router for instant page transitions\"]}]}]]}]],\"aside\":\"$undefined\",\"sharedAside\":\"$undefined\",\"fullWidth\":\"$undefined\",\"asideRowSpan\":\"$undefined\"},{\"content\":[[\"$\",\"$L6\",\"0\",{\"id\":\"quick-start\",\"level\":2,\"children\":[[\"$\",\"$7\",\"0\",{\"children\":\"Quick start\"}]]}
53],[\"$\",\"$Lb\",\"1\",{\"lang\":\"bash\",\"lineHeight\":\"1.6\",\"showLineNumbers\":\"$undefined\",\"bleed\":\"right\",\"title\":\"$undefined\",\"highlight\":\"$undefined\",\"wrap\":false,\"children\":\"# 1. Install\\nnpm install unframer react@19 react-dom@19\\n\\n# 2. Open the React Export plugin in Framer and select your components\\n\\n# 3. Download components\\nnpx unframer {projectId} --outDir ./src/framer\",\"highlightedHtml\":\"<span class=\\\"token comment\\\"># 1. Install</span>\\n<span class=\\\"token function\\\">npm</span> install unframer react@19 react-do<span class=\\\"token function\\\">m@19</span>\\n\\n<span class=\\\"token comment\\\"># 2. Open the React Export plugin in Framer and select your components</span>\\n\\n<span class=\\\"token comment\\\"># 3. Download components</span>\\n<span class=\\\"token function\\\">npx</span> unframer <span class=\\\"token punctuation\\\">{</span>projectId<span class=\\\"token punctuation\\\">}</span> <span class=\\\"token parameter variable\\\">--outDir</span> ./src/framer\"}],\"$Lc\",\"$Ld\"],\"aside\":\"$undefined\",\"sharedAside\":\"$undefined\",\"fullWidth\":\"$undefined\",\"asideRowSpan\":\"$undefined\"},{\"content\":\"$Le\",\"aside\":\"$undefined\",\"sharedAside\":\"$Lf\",\"fullWidth\":\"$undefined\",\"asideRowSpan\":5}],\"above\":\"$L10\",\"bannerContent\":\"$undefined\",\"sidebarWidth\":230,\"gridGap\":\"$undefined\"}]],\"layouts\":[{\"id\":\"layout-get--\",\"element\":\"$L11\"},{\"id\":\"layout-get--*\",\"element\":\"$L12\"}],\"globalCss\":\"$L13\",\"loaderData\":{\"site\":{\"config\":{\"name\":\"Unframer\",\"description\":\"The best Framer plugins. Export to React, sync with GitHub, rewrite with AI.\",\"logo\":{\"light\":\"\"},\"favicon\":{\"light\":\"/favicon.ico\",\"dark\":\"/favicon.ico\"},\"colors\":{\"primary\":\"#b91c1c\",\"_hasUserColors\":true},\"icons\":{\"library\":\"lucide\"},\"appearance\":{\"default\":\"dark\",\"strict\":false},\"navigation\":{\"tabs\":[],\"anchors\":[{\"anchor\":\"Framer Plugin\",\"placement\":\"tabs\",\"href\":\"https://framer.link/TGWRs2U\",\"icon\":\"lucide:puzzle\"},{\"anchor\":\"GitHub\",\"placement\":\"tabs\",\"href\":\"https://github.com/remorses/unframer\",\"icon\":\"lucide:github\"}],\"versions\":[],\"dropdowns\":[]},\"navbar\":{\"links\":[{\"label\":\"Manage Subscriptions\",\"href\":\"/subscriptions\"}]},\"redirects\":[{\"source\":\"/guides/connect-framer-mcp\",\"destination\":\"/mcp/connect\"},{\"source\":\"/guides/framer-mcp-plugin\",\"destination\":\"/mcp/connect\"}],\"knownPaths\":[\"/api/*\",\"/home\",\"/subscriptions\",\"/react-export-pricing\",\"/after-framer-login\",\"/after-framer-payment\",\"/contact\",\"/login\",\"/otp\",\"/privacy\",\"/terms\",\"/word-counter\",\"/pluginlink/*\",\"/stackblitz-test\",\"/test\",\"/unframer-open-stackblitz\"],\"footer\":{\"socials\":{},\"links\":[{\"header\":\"Framer Reviews\",\"items\":[{\"label\":\"Framer Reviews\",\"href\":\"https://framerreviews.com\"},{\"label\":\"Framer vs Webflow\",\"href\":\"https://framerreviews.com/framer-vs-webflow\"},{\"label\":\"Framer vs Wix\",\"href\":\"https://framerreviews.com/framer-vs-wix\"}]},{\"header\":\"Legal\",\"items\":[{\"label\":\"Terms\",\"href\":\"/terms\"},{\"label\":\"Privacy\",\"href\":\"/privacy\"}]},{\"header\":\"Account\",\"items\":[{\"label\":\"Login\",\"href\":\"/login\"},{\"label\":\"Manage Subscriptions\",\"href\":\"/subscriptions\"}]}]},\"search\":{},\"seo\":{},\"assistant\":{\"enabled\":true,\"display\":\"sidebar\"},\"decorativeLines\":\"none\",\"sidebar\":{\"animate\":false},\"layout\":{\"mode\":\"default\",\"maxWidth\":1200,\"sidebarWidth\":230,\"columnGap\":60,\"radius\":10},\"integrations\":{}},\"navigation\":[{\"tab\":\"Docs\",\"icon\":\"lucide:book\",\"groups\":[{\"group\":\"React Export\",\"icon\":\"lucide:code\",\"pages\":[{\"slug\":\"index\",\"href\":\"/\",\"title\":\"Unframer â Export Framer to React\",\"description\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\",\"gitSha\":\"d75003510724f0ae41fbf91c0d4619803b7ba277\",\"headings\":[{\"depth\":2,\"text\":\"See it in action\",\"slug\":\"see-it-in-action\"},{\"depth\":2,\"text\":\"Features\",\"slug\":\"features\"},{\"depth\":2,\"text\":\"Quick start\",\"slug\":\"quick-start\"},{\"depth\":2,\"text\":\"Framer MCP\",\"slug\":\"framer-mcp\"}],\"icon\":\"lucide:home\",\"frontmatter\":{\"title\":\"Unframer â Export Framer to React\",\"description\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\",\"icon\":\"lucide:home\",\"sidebarTitle\":\"Overview\",\"rendering\":\"static\"}},{\"slug\":\"quickstart\",\"href\":\"/quickstart\",\"title\":\"Quickstart\",\"description\":\"Export your first Framer component to React in under 5 minutes.\",\"gitSha\":\"bf01fae664f3fcf8d6d2bf93af1cacc4b5cb402f\",\"headings\":[{\"depth\":1,\"text\":\"Export your first Framer component\",\"slug\":\"export-your-first-framer-component\"},{\"depth\":2,\"text\":\"Prerequisites\",\"slug\":\"prerequisites\"},{\"depth\":2,\"text\":\"1. Install the React Export plugin\",\"slug\":\"1-install-the-react-export-plugin\"},{\"depth\":2,\"text\":\"2. Select components and export\",\"slug\":\"2-select-components-and-export\"},{\"depth\":2,\"text\":\"3. Create an example app\",\"slug\":\"3-create-an-example-app\"},{\"depth\":2,\"text\":\"4. Use in an existing project\",\"slug\":\"4-use-in-an-existing-project\"},{\"depth\":2,\"text\":\"5. Keep components in sync\",\"slug\":\"5-keep-components-in-sync\"},{\"depth\":2,\"text\":\"What's next\",\"slug\":\"whats-next\"}],\"icon\":\"lucide:rocket\",\"frontmatter\":{\"title\":\"Quickstart\",\"description\":\"Export your first Framer component to React in under 5 minutes.\",\"
53icon\":\"lucide:rocket\",\"sidebarTitle\":\"Quickstart\"}},{\"slug\":\"how-it-works\",\"href\":\"/how-it-works\",\"title\":\"How Unframer Works\",\"description\":\"Understand the architecture behind exporting Framer components to React.\",\"gitSha\":\"b9e9396192de741187e782be149338260a91a390\",\"headings\":[{\"depth\":2,\"text\":\"The export pipeline\",\"slug\":\"the-export-pipeline\"},{\"depth\":2,\"text\":\"What gets exported\",\"slug\":\"what-gets-exported\"},{\"depth\":2,\"text\":\"When to re-run the plugin vs the CLI\",\"slug\":\"when-to-re-run-the-plugin-vs-the-cli\"},{\"depth\":2,\"text\":\"Server-side rendering\",\"slug\":\"server-side-rendering\"},{\"depth\":2,\"text\":\"Future compatibility\",\"slug\":\"future-compatibility\"},{\"depth\":2,\"text\":\"Supported component props\",\"slug\":\"supported-component-props\"}],\"icon\":\"lucide:cpu\",\"frontmatter\":{\"title\":\"How Unframer Works\",\"description\":\"Understand the architecture behind exporting Framer components to React.\",\"icon\":\"lucide:cpu\",\"sidebarTitle\":\"How It Works\"}},{\"slug\":\"styling\",\"href\":\"/styling\",\"title\":\"Styling, Dark Mode & Responsive Variants\",\"description\":\"Customize sizing, colors, dark mode, responsive breakpoints, and localization for your exported Framer components.\",\"gitSha\":\"5ade0ff27422b6c4d61c194f060ad61ca7164595\",\"headings\":[{\"depth\":1,\"text\":\"Styling & responsive variants\",\"slug\":\"styling--responsive-variants\"},{\"depth\":2,\"text\":\"Overriding styles\",\"slug\":\"overriding-styles\"},{\"depth\":2,\"text\":\"Responsive variants\",\"slug\":\"responsive-variants\"},{\"depth\":2,\"text\":\"Dark mode\",\"slug\":\"dark-mode\"},{\"depth\":2,\"text\":\"Color styles as CSS variables\",\"slug\":\"color-styles-as-css-variables\"},{\"depth\":2,\"text\":\"Localization\",\"slug\":\"localization\"},{\"depth\":2,\"text\":\"Client-side navigation\",\"slug\":\"client-side-navigation\"}],\"icon\":\"lucide:palette\",\"frontmatter\":{\"title\":\"Styling, Dark Mode & Responsive Variants\",\"description\":\"Customize sizing, colors, dark mode, responsive breakpoints, and localization for your exported Framer components.\",\"icon\":\"lucide:palette\",\"sidebarTitle\":\"Styling & Variants\"}},{\"slug\":\"troubleshooting\",\"href\":\"/troubleshooting\",\"title\":\"Troubleshooting\",\"description\":\"Solutions for common issues when exporting Framer components to React.\",\"gitSha\":\"c08a62b55c0a8adcef94160ed382042cf61684a9\",\"headings\":[{\"depth\":2,\"text\":\"React Strict Mode breaks animations\",\"slug\":\"react-strict-mode-breaks-animations\"},{\"depth\":2,\"text\":\"React 19 ref warning\",\"slug\":\"react-19-ref-warning\"},{\"depth\":2,\"text\":\"Hydration mismatch warnings\",\"slug\":\"hydration-mismatch-warnings\"},{\"depth\":2,\"text\":\"Export fails with esbuild error\",\"slug\":\"export-fails-with-esbuild-error\"},{\"depth\":2,\"text\":\"\\\"Could not clone my website\\\"\",\"slug\":\"could-not-clone-my-website\"},{\"depth\":2,\"text\":\"Components render but look wrong\",\"slug\":\"components-render-but-look-wrong\"},{\"depth\":2,\"text\":\"--watch mode not detecting changes\",\"slug\":\"--watch-mode-not-detecting-changes\"},{\"depth\":2,\"text\":\"Fonts not loading\",\"slug\":\"fonts-not-loading\"},{\"depth\":2,\"text\":\"Known limitations\",\"slug\":\"known-limitations\"}],\"icon\":\"lucide:bug\",\"frontmatter\":{\"title\":\"Troubleshooting\",\"description\":\"Solutions for common issues when exporting Framer components to React.\",\"icon\":\"lucide:bug\",\"sidebarTitle\":\"Troubleshooting\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"},{\"group\":\"Guides\",\"icon\":\"lucide:book-open\",\"pages\":[{\"slug\":\"guides/export-full-website\",\"href\":\"/guides/export-full-website\",\"title\":\"Export a Full Framer Website to React\",\"description\":\"Use Framer's AI agent to turn page sections into components, export them to React, and deploy as a standalone app.\",\"gitSha\":\"5446ab049d8fae696257e1094129cd093c4b3aa5\",\"headings\":[{\"depth\":2,\"text\":\"Overview\",\"slug\":\"overview\"},{\"depth\":2,\"text\":\"1. Turn page sections into components with Framer Agent\",\"slug\":\"1-turn-page-sections-into-components-with-framer-agent\"},{\"depth\":2,\"text\":\"2. Export only your section components\",\"slug\":\"2-export-only-your-section-components\"},{\"depth\":2,\"text\":\"3. Create your React project\",\"slug\":\"3-create-your-react-project\"},{\"depth\":2,\"text\":\"4. Download your components\",\"slug\":\"4-download-your-components\"},{\"depth\":2,\"text\":\"5. Assemble the page in order\",\"slug\":\"5-assemble-the-page-in-order\"},{\"depth\":2,\"text\":\"6. Add routing for multiple pages\",\"slug\":\"6-add-routing-for-multiple-pages\"},{\"depth\":2,\"text\":\"7. Enable client navigation\",\"slug\":\"7-enable-client-navigation\"},{\"depth\":2,\"text\":\"8. Add dark mode (optional)\",\"slug\":\"8-add-dark-mode-optional\"},{\"depth\":2,\"text\":\"9. Deploy\",\"slug\":\"9-deploy\"},{\"depth\":2,\"text\":\"10. Keep it updated\",\"slug\":\"10-keep-it-updated\"},{\"depth\":2,\"text\":\"What's next\",\"slug\":\"whats-next\"}],\"icon\":\"lucide:globe\",\"frontmatter\":{\"title\":\"Export a Full Framer Website to React\",\"description\":\"Use Framer's AI agent to turn page sections into components, export them to React, and deploy as a standalone app.\",\"
53icon\":\"lucide:globe\",\"sidebarTitle\":\"Export Full Website\"}},{\"slug\":\"guides/deploy-to-vercel\",\"href\":\"/guides/deploy-to-vercel\",\"title\":\"Deploy to Vercel\",\"description\":\"Export your Framer site as React and deploy to Vercel with Next.js or Vite.\",\"gitSha\":\"2afb796e3a4a25e3b4784f5c8002d41a1c0c596f\",\"headings\":[{\"depth\":2,\"text\":\"Prerequisites\",\"slug\":\"prerequisites\"},{\"depth\":2,\"text\":\"1. Set up the project\",\"slug\":\"1-set-up-the-project\"},{\"depth\":2,\"text\":\"2. Build your pages\",\"slug\":\"2-build-your-pages\"},{\"depth\":2,\"text\":\"3. Test locally\",\"slug\":\"3-test-locally\"},{\"depth\":2,\"text\":\"4. Deploy to Vercel\",\"slug\":\"4-deploy-to-vercel\"},{\"depth\":2,\"text\":\"5. Update workflow\",\"slug\":\"5-update-workflow\"}],\"icon\":\"lucide:triangle\",\"frontmatter\":{\"title\":\"Deploy to Vercel\",\"description\":\"Export your Framer site as React and deploy to Vercel with Next.js or Vite.\",\"icon\":\"lucide:triangle\",\"sidebarTitle\":\"Deploy to Vercel\"}},{\"slug\":\"guides/nextjs-integration\",\"href\":\"/guides/nextjs-integration\",\"title\":\"Next.js Integration\",\"description\":\"Use exported Framer components in a Next.js App Router project with SSR and client navigation.\",\"gitSha\":\"a2b1f753c91e2324bbaf1c7934993605077f5d16\",\"headings\":[{\"depth\":2,\"text\":\"Setup\",\"slug\":\"setup\"},{\"depth\":2,\"text\":\"Import styles globally\",\"slug\":\"import-styles-globally\"},{\"depth\":2,\"text\":\"Use components in pages\",\"slug\":\"use-components-in-pages\"},{\"depth\":2,\"text\":\"Client-side navigation\",\"slug\":\"client-side-navigation\"},{\"depth\":2,\"text\":\"Dark mode\",\"slug\":\"dark-mode\"},{\"depth\":2,\"text\":\"Disable Strict Mode\",\"slug\":\"disable-strict-mode\"},{\"depth\":2,\"text\":\"Multiple pages\",\"slug\":\"multiple-pages\"},{\"depth\":2,\"text\":\"Example project\",\"slug\":\"example-project\"}],\"icon\":\"lucide:layout\",\"frontmatter\":{\"title\":\"Next.js Integration\",\"description\":\"Use exported Framer components in a Next.js App Router project with SSR and client navigation.\",\"icon\":\"lucide:layout\",\"sidebarTitle\":\"Next.js\"}},{\"slug\":\"guides/vite-integration\",\"href\":\"/guides/vite-integration\",\"title\":\"Vite Integration\",\"description\":\"Set up a Vite + React project with exported Framer components.\",\"gitSha\":\"3779b109fbec90bd698a0e81bfe0f44374f9f1bc\",\"headings\":[{\"depth\":2,\"text\":\"Setup\",\"slug\":\"setup\"},{\"depth\":2,\"text\":\"Disable Strict Mode\",\"slug\":\"disable-strict-mode\"},{\"depth\":2,\"text\":\"Import styles and components\",\"slug\":\"import-styles-and-components\"},{\"depth\":2,\"text\":\"Adding routing\",\"slug\":\"adding-routing\"},{\"depth\":2,\"text\":\"Production build\",\"slug\":\"production-build\"},{\"depth\":2,\"text\":\"Dark mode\",\"slug\":\"dark-mode\"}],\"icon\":\"lucide:zap\",\"frontmatter\":{\"title\":\"Vite Integration\",\"description\":\"Set up a Vite + React project with exported Framer components.\",\"icon\":\"lucide:zap\",\"sidebarTitle\":\"Vite\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"}]},{\"tab\":\"Framer MCP\",\"icon\":\"lucide:bot\",\"groups\":[{\"group\":\"Getting Started\",\"icon\":\"lucide:rocket\",\"pages\":[{\"slug\":\"mcp/overview\",\"href\":\"/mcp/overview\",\"title\":\"Framer MCP Overview\",\"description\":\"Let AI assistants read and modify your Framer project through the Model Context Protocol.\",\"gitSha\":\"cec9bb82e904bf2e3df927e9e186371cc8bf8a8f\",\"headings\":[{\"depth\":1,\"text\":\"Framer MCP\",\"slug\":\"framer-mcp\"},{\"depth\":2,\"text\":\"What is MCP?\",\"slug\":\"what-is-mcp\"},{\"depth\":2,\"text\":\"What can the AI do?\",\"slug\":\"what-can-the-ai-do\"},{\"depth\":2,\"text\":\"Two modes of operation\",\"slug\":\"two-modes-of-operation\"},{\"depth\":3,\"text\":\"Plugin mode (default)\",\"slug\":\"plugin-mode-default\"},{\"depth\":3,\"text\":\"Server API mode (headless)\",\"slug\":\"server-api-mode-headless\"},{\"depth\":2,\"text\":\"Getting started\",\"slug\":\"getting-started\"},{\"depth\":2,\"text\":\"Important: keep the plugin open\",\"slug\":\"important-keep-the-plugin-open\"}],\"icon\":\"lucide:bot\",\"frontmatter\":{\"title\":\"Framer MCP Overview\",\"description\":\"Let AI assistants read and modify your Framer project through the Model Context Protocol.\",\"icon\":\"lucide:bot\",\"sidebarTitle\":\"Overview\"}},{\"slug\":\"mcp/connect\",\"href\":\"/mcp/connect\",\"title\":\"Connecting Framer MCP Server across Developer Tools\",\"description\":\"Quick reference for integrating https://mcp.unframer.co/mcp with popular AI-assisted editors and the OpenAI Responses API.\",\"gitSha\":\"573a6f62544d49997c9530d7f33f12faf5976e1e\",\"headings\":[{\"depth\":1,\"text\":\"How to connect Framer MCP server\",\"slug\":\"how-to-connect-framer-mcp-server\"},{\"depth\":2,\"text\":\"Automatic Install\",\"slug\":\"automatic-install\"},{\"depth\":2,\"text\":\"Manual Install\",\"slug\":\"manual-install\"},{\"depth\":3,\"text\":\"Cursor\",\"slug\":\"cursor\"},{\"depth\":3,\"text\":\"Claude Code\",\"slug\":\"claude-code\"},{\"depth\":3,\"text\":\"Claude Web and Desktop\",\"slug\":\"claude-web-and-desktop\"},{\"depth\":3,\"text\":\"OpenCode\",\"slug\":\"opencode\"},{\"depth\":3,\"text\":\"Zed\",\"slug\":\"zed\"},{\"depth\":3,\"text\":\"VS Code and GitHub Copilot\",\"slug\":\"vs-code-and-github-copilot\"},{\"depth\":3,\"text\":\"Programmatic control via OpenAI JS SDK Responses API\",\"slug\":\"programmatic-control-via-openai-js-sdk-responses-api\"},{\"depth\":3,\"text\":\"Codex Desktop App\",\"slug\":\"codex-desktop-app\"},{\"depth\":3,\"text\":\"Codex CLI\",\"slug\":\"codex-cli\"},{\"depth\":3,\"text\":\"Remote MCP bridge for stdio-only clients\",\"slug\":\"remote-mcp-bridge-for-stdio-only-clients\"},{\"depth\":2,\"text\":\"How to check MCP availability\",\"slug\":\"how-to-check-mcp-availability\"},{\"depth\":2,\"text\":\"Troubleshooting cheatsheet\",\"slug\":\"troubleshooting-cheatsheet\"},{\"depth\":2,\"text\":\"Unframer CLI\",\"slug\":\"unframer-cli\"}],\"icon\":\"lucide:plug\",\"frontmatter\":{\"title\":\"Connecting Framer MCP Server across Developer Tools\",\"description\":\"Quick reference for integrating https://mcp.unframer.co/mcp with popular AI-assisted editors and the OpenAI Responses API.\",\"icon\":\"lucide:plug\",\"sidebarTitle\":\"Connect Framer MCP\",\"url\":\"https://localhost:8040/mcp/connect?userId=123&secret=abc\"}},{\"slug\":\"mcp/troubleshooting\",\"href\":\"/mcp/troubleshooting\",\"title\":\"MCP Troubleshooting\",\"description\":\"Fix common issues connecting the Framer MCP plugin to AI assistants.\",\"gitSha\":\"28460917582ffbe54c2354200f095fd407ecd5c0\",\"headings\":[{\"depth\":2,\"text\":\"Windows: URL with & breaks the command\",\"slug\":\"windows-url-with--breaks-the-command\"},{\"depth\":2,\"text\":\"OAuth 404 / SSE 405 errors\",\"slug\":\"oauth-404--sse-405-errors\"},{\"depth\":2,\"text\":\"WebSocket disconnects on write commands (error 1006/1001)\",\"slug\":\"websocket-disconnects-on-write-commands-error-10061001\"},{\"depth\":2,\"text\":\"Multi-account MCP conflicts\",\"slug\":\"multi-account-mcp-conflicts\"},{\"depth\":2,\"text\":\"Secret rotation / exposed URL\",\"slug\":\"secret-rotation--exposed-url\"},{\"depth\":2,\"text\":\"Connection timeouts\",\"slug\":\"connection-timeouts\"},{\"depth\":2,\"text\":\"Cursor doesn't show Framer tools\",\"slug\":\"cursor-doesnt-show-framer-tools\"},{\"depth\":2,\"text\":\"Quick diagnostic\",\"slug\":\"quick-diagnostic\"}],\"icon\":\"lucide:wrench\",\"frontmatter\":{\"title\":\"MCP Troubleshooting\",\"description\":\"Fix common issues connecting the Framer MCP plugin to AI assistants.\",\"
53icon\":\"lucide:wrench\",\"sidebarTitle\":\"Troubleshooting\"}},{\"slug\":\"mcp/cli\",\"href\":\"/mcp/cli\",\"title\":\"Unframer CLI\",\"description\":\"Use the unframer CLI to interact with Framer MCP directly from your terminal.\",\"gitSha\":\"b69b292c590cc6af824c10a3977c359d03c1175c\",\"headings\":[{\"depth\":2,\"text\":\"Installation\",\"slug\":\"installation\"},{\"depth\":2,\"text\":\"React Export commands\",\"slug\":\"react-export-commands\"},{\"depth\":3,\"text\":\"Download components\",\"slug\":\"download-components\"},{\"depth\":3,\"text\":\"Create an example app\",\"slug\":\"create-an-example-app\"},{\"depth\":3,\"text\":\"Watch for changes\",\"slug\":\"watch-for-changes\"},{\"depth\":3,\"text\":\"Externalize packages\",\"slug\":\"externalize-packages\"},{\"depth\":2,\"text\":\"MCP CLI commands\",\"slug\":\"mcp-cli-commands\"},{\"depth\":3,\"text\":\"Login\",\"slug\":\"login\"},{\"depth\":3,\"text\":\"Project structure\",\"slug\":\"project-structure\"},{\"depth\":3,\"text\":\"Modifying content\",\"slug\":\"modifying-content\"},{\"depth\":3,\"text\":\"CMS operations\",\"slug\":\"cms-operations\"},{\"depth\":3,\"text\":\"Code files\",\"slug\":\"code-files\"},{\"depth\":3,\"text\":\"Export React components\",\"slug\":\"export-react-components\"},{\"depth\":3,\"text\":\"Help\",\"slug\":\"help\"},{\"depth\":2,\"text\":\"Server API mode\",\"slug\":\"server-api-mode\"}],\"icon\":\"lucide:terminal\",\"frontmatter\":{\"title\":\"Unframer CLI\",\"description\":\"Use the unframer CLI to interact with Framer MCP directly from your terminal.\",\"icon\":\"lucide:terminal\",\"sidebarTitle\":\"CLI Reference\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"},{\"group\":\"Tools\",\"pages\":[{\"slug\":\"mcp/getprojectxml\",\"href\":\"/mcp/getprojectxml\",\"title\":\"getProjectXml\",\"description\":\"Gets the project pages, design pages, and components XML, with information of the currently focused page or component. Framer is a website builder and design tool. This tool should ALWAYS be called at\",\"gitSha\":\"virtual:mcp/getprojectxml\",\"headings\":[],\"frontmatter\":{\"title\":\"getProjectXml\",\"description\":\"Gets the project pages, design pages, and components XML, with information of the currently focused page or component. Framer is a website builder and design tool. This tool should ALWAYS be called at\",\"sidebarTitle\":\"getProjectXml\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getselectednodesxml\",\"href\":\"/mcp/getselectednodesxml\",\"title\":\"getSelectedNodesXml\",\"description\":\"Gets the currently selected nodes as xml\",\"gitSha\":\"virtual:mcp/getselectednodesxml\",\"headings\":[],\"frontmatter\":{\"title\":\"getSelectedNodesXml\",\"description\":\"Gets the currently selected nodes as xml\",\"sidebarTitle\":\"getSelectedNodesXml\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/zoomintoview\",\"href\":\"/mcp/zoomintoview\",\"title\":\"zoomIntoView\",\"description\":\"Zooms the canvas to center on the given node ID. Code file nodes are not supported.\",\"gitSha\":\"virtual:mcp/zoomintoview\",\"headings\":[],\"frontmatter\":{\"title\":\"zoomIntoView\",\"description\":\"Zooms the canvas to center on the given node ID. Code file nodes are not supported.\",\"sidebarTitle\":\"zoomIntoView\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getnodexml\",\"href\":\"/mcp/getnodexml\",\"title\":\"getNodeXml\",\"description\":\"Get a specific Framer node as XML. You first need to get a node id via getProjectXml or call getSelectedNodesXml instead > IMPORTANT. If you need to recursively read all xml in the Framer project you \",\"gitSha\":\"virtual:mcp/getnodexml\",\"headings\":[],\"frontmatter\":{\"title\":\"getNodeXml\",\"description\":\"Get a specific Framer node as XML. You first need to get a node id via getProjectXml or call getSelectedNodesXml instead > IMPORTANT. If you need to recursively read all xml in the Framer project you \",\"sidebarTitle\":\"getNodeXml\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/updatexmlfornode\",\"href\":\"/mcp/updatexmlfornode\",\"title\":\"updateXmlForNode\",\"description\":\"Update the XML for a node using its nodeId and passing a new XML string. It can be used to update nodes text or attributes, reorder nodes in the XML tree, or create new nodes. IMPORTANT: Call getProje\",\"gitSha\":\"virtual:mcp/updatexmlfornode\",\"headings\":[],\"frontmatter\":{\"title\":\"updateXmlForNode\",\"description\":\"Update the XML for a node using its nodeId and passing a new XML string. It can be used to update nodes text or attributes, reorder nodes in the XML tree, or create new nodes. IMPORTANT: Call getProje\",\"sidebarTitle\":\"updateXmlForNode\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/managecolorstyle\",\"href\":\"/mcp/managecolorstyle\",\"title\":\"manageColorStyle\",\"description\":\"Creates or updates a color style in the project. The style path must start with \\\"/\\\" and can include folder structure (e.g., \\\"/Brand/Primary\\\"). The display name will be automatically derived from the l\",\"gitSha\":\"virtual:mcp/managecolorstyle\",\"headings\":[],\"frontmatter\":{\"title\":\"manageColorStyle\",\"description\":\"Creates or updates a color style in the project. The style path must start with \\\"/\\\" and can include folder structure (e.g., \\\"/Brand/Primary\\\"). The display name will be automatically derived from the l\",\"sidebarTitle\":\"manageColorStyle\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/managetextstyle\",\"href\":\"/mcp/managetextstyle\",\"title\":\"manageTextStyle\",\"description\":\"Creates or updates a text style in the project. The style path must start with \\\"/\\\" and can include folder structure (e.g., \\\"/Typography/Headings/H1\\\"). The display name will be automatically derived fr\",\"gitSha\":\"virtual:mcp/managetextstyle\",\"headings\":[],\"frontmatter\":{\"title\":\"manageTextStyle\",\"description\":\"Creates or updates a text style in the project. The style path must start with \\\"/\\\" and can include folder structure (e.g., \\\"/Typography/Headings/H1\\\"). The display name will be automatically derived fr\",\"sidebarTitle\":\"manageTextStyle\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/searchfonts\",\"href\":\"/mcp/searchfonts\",\"title\":\"searchFonts\",\"description\":\"Search for Framer available fonts by selector substring. This tool searches among all available fonts on Framer. Returns max 20 results. Use specific search terms for better results. IMPORTANT: The r\",\"gitSha\":\"virtual:mcp/searchfonts\",\"headings\":[],\"frontmatter\":{\"title\":\"searchFonts\",\"description\":\"Search for Framer available fonts by selector substring. This tool searches among all available fonts on Framer. Returns max 20 results. Use specific search terms for better results. IMPORTANT: The r\",\"sidebarTitle\":\"searchFonts\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/deletenode\",\"href\":\"/mcp/deletenode\",\"title\":\"deleteNode\",\"description\":\"Deletes a Framer node, color style, text style, or code file. - For nodes: Pass the node ID to remove it from the page/component (also removes all children) - For color/text styles: Pass the style pat\",\"gitSha\":\"virtual:mcp/deletenode\",\"headings\":[],\"frontmatter\":{\"title\":\"deleteNode\",\"description\":\"Deletes a Framer node, color style, text style, or code file. - For nodes: Pass the node ID to remove it from the page/component (also removes all children) - For color/text styles: Pass the style pat\",\"sidebarTitle\":\"deleteNode\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/duplicatenode\",\"href\":\"/mcp/duplicatenode\",\"title\":\"duplicateNode\",\"description\":\"Duplicate a node in the Framer project. Creates an exact copy of the node and all its children. The duplicated node will be placed at the end of the original node parent. Returns the ID of the newly c\",\"gitSha\":\"virtual:mcp/duplicatenode\",\"headings\":[],\"frontmatter\":{\"title\":\"duplicateNode\",\"description\":\"Duplicate a node in the Framer project. Creates an exact copy of the node and all its children. The duplicated node will be placed at the end of the original node parent. Returns the ID of the newly c\",\"sidebarTitle\":\"duplicateNode\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/exportreactcomponents\",\"href\":\"/mcp/exportreactcomponents\",\"title\":\"exportReactComponents\",\"description\":\"Export selected Framer components as React code. This tool will return a cli command you can run to download your Framer components as React code. This tool uses the same logic implemented in the Fram\",\"gitSha\":\"virtual:mcp/exportreactcomponents\",\"headings\":[],\"frontmatter\":{\"title\":\"exportReactComponents\",\"description\":\"Export selected Framer components as React code. This tool will return a cli command you can run to download your Framer components as React code. This tool uses the same logic implemented in the Fram\",\"sidebarTitle\":\"exportReactComponents\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/createcodefile\",\"href\":\"/mcp/createcodefile\",\"title\":\"createCodeFile\",\"description\":\"Create a new code file in the Framer project. Code files can export either code
53components or overrides. ALWAYS read the MCP resource file mcp://mcp.unframer.co/prompts/how-to-write-framer-code-files.\",\"gitSha\":\"virtual:mcp/createcodefile\",\"headings\":[],\"frontmatter\":{\"title\":\"createCodeFile\",\"description\":\"Create a new code file in the Framer project. Code files can export either code components or overrides. ALWAYS read the MCP resource file mcp://mcp.unframer.co/prompts/how-to-write-framer-code-files.\",\"sidebarTitle\":\"createCodeFile\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/readcodefile\",\"href\":\"/mcp/readcodefile\",\"title\":\"readCodeFile\",\"description\":\"Read the content of a code file by its ID. Available code files are listed in getProjectXml. Returns the current content, name, path, and available exports of the code file.\",\"gitSha\":\"virtual:mcp/readcodefile\",\"headings\":[],\"frontmatter\":{\"title\":\"readCodeFile\",\"description\":\"Read the content of a code file by its ID. Available code files are listed in getProjectXml. Returns the current content, name, path, and available exports of the code file.\",\"sidebarTitle\":\"readCodeFile\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/updatecodefile\",\"href\":\"/mcp/updatecodefile\",\"title\":\"updateCodeFile\",\"description\":\"Update the content of an existing code file. This will replace the entire content of the file. The file will be automatically linted and type-checked after update.\",\"gitSha\":\"virtual:mcp/updatecodefile\",\"headings\":[],\"frontmatter\":{\"title\":\"updateCodeFile\",\"description\":\"Update the content of an existing code file. This will replace the entire content of the file. The file will be automatically linted and type-checked after update.\",\"sidebarTitle\":\"updateCodeFile\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getcomponentinserturlandtypes\",\"href\":\"/mcp/getcomponentinserturlandtypes\",\"title\":\"getComponentInsertUrlAndTypes\",\"description\":\"Get the insert URL, import statement and prop types documentation for components. The id parameter can be either: - A component node ID (from getProjectXml Components section) - A code file ID (from g\",\"gitSha\":\"virtual:mcp/getcomponentinserturlandtypes\",\"headings\":[],\"frontmatter\":{\"title\":\"getComponentInsertUrlAndTypes\",\"description\":\"Get the insert URL, import statement and prop types documentation for components. The id parameter can be either: - A component node ID (from getProjectXml Components section) - A code file ID (from g\",\"sidebarTitle\":\"getComponentInsertUrlAndTypes\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getprojectwebsiteurl\",\"href\":\"/mcp/getprojectwebsiteurl\",\"title\":\"getProjectWebsiteUrl\",\"description\":\"Get the published website URLs for the current Framer project. This tool retrieves both staging and production URLs if the project has been published. Use this tool when you need to: - Check if the pr\",\"gitSha\":\"virtual:mcp/getprojectwebsiteurl\",\"headings\":[],\"frontmatter\":{\"title\":\"getProjectWebsiteUrl\",\"description\":\"Get the published website URLs for the current Framer project. This tool retrieves both staging and production URLs if the project has been published. Use this tool when you need to: - Check if the pr\",\"sidebarTitle\":\"getProjectWebsiteUrl\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getcmscollections\",\"href\":\"/mcp/getcmscollections\",\"title\":\"getCMSCollections\",\"description\":\"Gets all CMS collections in the project with their field definitions. IMPORTANT: Call this tool FIRST before using any other CMS tools to understand the field structure and get proper field IDs. Retur\",\"gitSha\":\"virtual:mcp/getcmscollections\",\"headings\":[],\"frontmatter\":{\"title\":\"getCMSCollections\",\"description\":\"Gets all CMS collections in the project with their field definitions. IMPORTANT: Call this tool FIRST before using any other CMS tools to understand the field structure and get proper field IDs. Retur\",\"sidebarTitle\":\"getCMSCollections\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/getcmsitems\",\"href\":\"/mcp/getcmsitems\",\"title\":\"getCMSItems\",\"description\":\"Gets items from a specific CMS collection, with optional text search f
53iltering. Returns items with their IDs, slugs, draft status, and field data. Field data contains the actual content for each field\",\"gitSha\":\"virtual:mcp/getcmsitems\",\"headings\":[],\"frontmatter\":{\"title\":\"getCMSItems\",\"description\":\"Gets items from a specific CMS collection, with optional text search filtering. Returns items with their IDs, slugs, draft status, and field data. Field data contains the actual content for each field\",\"sidebarTitle\":\"getCMSItems\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/upsertcmsitem\",\"href\":\"/mcp/upsertcmsitem\",\"title\":\"upsertCMSItem\",\"description\":\"Creates a new CMS item or updates an existing one. IMPORTANT: Call getCMSCollections first to get field IDs and see the field data format documentation. For creating a new item: - Provide slug and fie\",\"gitSha\":\"virtual:mcp/upsertcmsitem\",\"headings\":[],\"frontmatter\":{\"title\":\"upsertCMSItem\",\"description\":\"Creates a new CMS item or updates an existing one. IMPORTANT: Call getCMSCollections first to get field IDs and see the field data format documentation. For creating a new item: - Provide slug and fie\",\"sidebarTitle\":\"upsertCMSItem\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/deletecmsitem\",\"href\":\"/mcp/deletecmsitem\",\"title\":\"deleteCMSItem\",\"description\":\"Deletes an item from a CMS collection. This permanently removes the item and cannot be undone. The item ID must exist in the specified collection.\",\"gitSha\":\"virtual:mcp/deletecmsitem\",\"headings\":[],\"frontmatter\":{\"title\":\"deleteCMSItem\",\"description\":\"Deletes an item from a CMS collection. This permanently removes the item and cannot be undone. The item ID must exist in the specified collection.\",\"sidebarTitle\":\"deleteCMSItem\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/createcmscollection\",\"href\":\"/mcp/createcmscollection\",\"title\":\"createCMSCollection\",\"description\":\"Creates a new CMS collection with optional field definitions. The collection will be managed by this plugin. After creation, you can add items using upsertCMSItem. Field types supported: string, numbe\",\"gitSha\":\"virtual:mcp/createcmscollection\",\"headings\":[],\"frontmatter\":{\"title\":\"createCMSCollection\",\"description\":\"Creates a new CMS collection with optional field definitions. The collection will be managed by this plugin. After creation, you can add items using upsertCMSItem. Field types supported: string, numbe\",\"sidebarTitle\":\"createCMSCollection\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}},{\"slug\":\"mcp/createpage\",\"href\":\"/mcp/createpage\",\"title\":\"createPage\",\"description\":\"Create a new page in the Framer project. Two types of pages can be created: - design: Canvas pages for components, prototypes, and design explorations. Not published to the website. - web: Publishable\",\"gitSha\":\"virtual:mcp/createpage\",\"headings\":[],\"frontmatter\":{\"title\":\"createPage\",\"description\":\"Create a new page in the Framer project. Two types of pages can be created: - design: Canvas pages for components, prototypes, and design explorations. Not published to the website. - web: Publishable\",\"sidebarTitle\":\"createPage\",\"tag\":\"TOOL\",\"gridGap\":30,\"tagColor\":\"purple\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"},{\"group\":\"Resources\",\"pages\":[{\"slug\":\"mcp/resources/how-to-write-framer-code-files\",\"href\":\"/mcp/resources/how-to-write-framer-code-files\",\"title\":\"How to Write Framer Code Files\",\"description\":\"Guide for creating code components and overrides in Framer. Read this resource before using createCodeFile.\",\"gitSha\":\"virtual:mcp/resources/how-to-write-framer-code-files\",\"headings\":[],\"frontmatter\":{\"title\":\"How to Write Framer Code Files\",\"description\":\"Guide for creating code components and overrides in Framer. Read this resource before using createCodeFile.\",\"tag\":\"SOURCE\",\"tagColor\":\"blue\"}},{\"slug\":\"mcp/resources/how-to-use-mcp-server\",\"href\":\"/mcp/resources/how-to-use-mcp-server\",\"title\":\"How to Use MCP Server\",\"description\":\"Reference guide for the Framer MCP server tools and workflows.\",\"gitSha\":\"virtual:mcp/resources/how-to-use-mcp-server\",\"headings\":[],\"frontmatter\":{\"title\":\"How to Use MCP Server\",\"description\":\"Reference guide for the Framer MCP server tools and workflows.\",\"tag\":\"SOURCE\",\"tagColor\":\"blue\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"}]},{\"tab\":\"Pricing\",\"icon\":\"lucide:dollar-sign\",\"groups\":[{\"group\":\"Pricing\",\"icon\":\"lucide:dollar-sign\",\"pages\":[{\"slug\":\"pricing\",\"href\":\"/pricing\",\"title\":\"Pricing â Unframer React Export Plans\",\"description\":\"Simple pricing for Unframer React Export. Pay once or subscribe to export your Framer components as production-ready React code.\",\"gitSha\":\"b8eedf591f5f03a67ebeece88deb3b400341bdda\",\"headings\":[{\"depth\":1,\"text\":\"Pricing\",\"slug\":\"pricing\"},{\"depth\":2,\"text\":\"Frequently asked questions\",\"slug\":\"frequently-asked-questions\"}],\"icon\":\"lucide:dollar-sign\",\"frontmatter\":{\"$schema\":\"https://holocron.so/frontmatter.json\",\"title\":\"Pricing â Unframer React Export Plans\",\"description\":\"Simple pricing for Unframer React Export. Pay once or subscribe to export your Framer components as production-ready React code.\",\"icon\":\"lucide:dollar-sign\",\"sidebarTitle\":\"Pricing\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"}]}
53,{\"tab\":\"Changelog\",\"icon\":\"lucide:newspaper\",\"groups\":[{\"group\":\"\",\"pages\":[{\"slug\":\"changelog\",\"href\":\"/changelog\",\"title\":\"Changelog\",\"description\":\"Release notes for Changelog.\",\"gitSha\":\"virtual:changelog\",\"headings\":[],\"frontmatter\":{\"title\":\"Changelog\",\"description\":\"Release notes for Changelog.\",\"mode\":\"center\"}}],\"root\":\"$undefined\",\"rootPage\":\"$undefined\"}]}],\"switchers\":{\"versions\":[],\"dropdowns\":[]},\"base\":\"/\",\"icons\":{\"icons\":{\"lucide:book\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\\\"/>\",\"width\":24,\"height\":24},\"lucide:code\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"m16 18l6-6l-6-6M8 6l-6 6l6 6\\\"/>\",\"width\":24,\"height\":24},\"lucide:home\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\\\"/><path d=\\\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:rocket\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09\\\"/><path d=\\\"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z\\\"/><path d=\\\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:cpu\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2\\\"/><rect width=\\\"16\\\" height=\\\"16\\\" x=\\\"4\\\" y=\\\"4\\\" rx=\\\"2\\\"/><rect width=\\\"8\\\" height=\\\"8\\\" x=\\\"8\\\" y=\\\"8\\\" rx=\\\"1\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:palette\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\\\"/><circle cx=\\\"13.5\\\" cy=\\\"6.5\\\" r=\\\".5\\\" fill=\\\"currentColor\\\"/><circle cx=\\\"17.5\\\" cy=\\\"10.5\\\" r=\\\".5\\\" fill=\\\"currentColor\\\"/><circle cx=\\\"6.5\\\" cy=\\\"12.5\\\" r=\\\".5\\\" fill=\\\"currentColor\\\"/><circle cx=\\\"8.5\\\" cy=\\\"7.5\\\" r=\\\".5\\\" fill=\\\"currentColor\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:bug\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12 20v-9m2-4a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4zm.12-3.12L16 2\\\"/><path d=\\\"M21 21a4 4 0 0 0-3.81-4M21 5a4 4 0 0 1-3.55 3.97M22 13h-4M3 21a4 4 0 0 1 3.81-4M3 5a4 4 0 0 0 3.55 3.97M6 13H2M8 2l1.88 1.88M9 7.13V6a3 3 0 1 1 6 0v1.13\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:book-open\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z\\\"/>\",\"width\":24,\"height\":24},\"lucide:globe\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"10\\\"/><path d=\\\"M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20\\\"/></g>
53\",\"width\":24,\"height\":24},\"lucide:triangle\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\\\"/>\",\"width\":24,\"height\":24},\"lucide:layout\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><rect width=\\\"18\\\" height=\\\"18\\\" x=\\\"3\\\" y=\\\"3\\\" rx=\\\"2\\\"/><path d=\\\"M3 9h18M9 21V9\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:zap\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M15.914 4a1.5 1.5 0 0 0-2.474-1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a.5.5 0 0 1 .471.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9-9A1.5 1.5 0 0 0 18.5 10h-3.997a.5.5 0 0 1-.472-.667z\\\"/>\",\"width\":24,\"height\":24},\"lucide:tag\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\\\"/><circle cx=\\\"7.5\\\" cy=\\\"7.5\\\" r=\\\".5\\\" fill=\\\"currentColor\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:bot\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M12 8V4H8\\\"/><rect width=\\\"16\\\" height=\\\"12\\\" x=\\\"4\\\" y=\\\"8\\\" rx=\\\"2\\\"/><path d=\\\"M2 14h2m16 0h2m-7-1v2m-6-2v2\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:plug\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M12 22v-5m3-9V2m2 6a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1zM9 8V2\\\"/>\",\"width\":24,\"height\":24},\"lucide:wrench\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z\\\"/>\",\"width\":24,\"height\":24},\"lucide:terminal\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M12 19h8M4 17l6-6l-6-6\\\"/>\",\"width\":24,\"height\":24},\"lucide:dollar-sign\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M12 2v20m5-17H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\\\"/>\",\"width\":24,\"height\":24},\"lucide:newspaper\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\"><path d=\\\"M15 18h-5m8-4h-8m-6 8h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2\\\"/><rect width=\\\"8\\\" height=\\\"4\\\" x=\\\"10\\\" y=\\\"6\\\" rx=\\\"1\\\"/></g>\",\"width\":24,\"height\":24},\"lucide:puzzle\":{\"body\":\"<path fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\" d=\\\"M15.39 4.39a1 1 0 0 0 1.68-.474a2.5 2.5 0 1 1 3.014 3.015a1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474a2.5 2.5 0 1 0-3.014 3.015a1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474a2.5 2.5 0 1 1-3.014-3.015a1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474a2.5 2.5 0 1 0 3.014-3.015a1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z\\\"/>\",\"width\":24,\"height\":24},\"lucide:github\":{\"body\":\"<g fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2.5\\\">
53<path d=\\\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5c.08-1.25-.27-2.48-1-3.5c.28-1.15.28-2.35 0-3.5c0 0-1 0-3 1.5c-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5c-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4\\\"/><path d=\\\"M9 18c-4.51 2-5-2-7-2\\\"/></g>\",\"width\":24,\"height\":24}}},\"origin\":\"http://unframer.co\"},\"currentPageHref\":\"/\",\"currentPageTitle\":\"Unframer â Export Framer to React\",\"currentPageDescription\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\",\"currentHeadings\":\"$0:root:loaderData:site:navigation:0:groups:0:pages:0:headings\",\"ancestorGroupKeys\":[\"React Export\"],\"activeTabHref\":\"/\",\"activeVersionHref\":\"$undefined\",\"activeDropdownHref\":\"$undefined\",\"notFoundPath\":\"$undefined\",\"headTitle\":\"Unframer â Export Framer to React\",\"headRobots\":\"$undefined\",\"currentPageFrontmatter\":\"$0:root:loaderData:site:navigation:0:groups:0:pages:0:frontmatter\",\"showConfigPanel\":false,\"githubStars\":\"$undefined\"},\"head\":\"$L14\"}}\n")</script>
53<script>(self.__FLIGHT_DATA||=[]).push("15:T412,<span class=\"token comment\">// 4. Import and use</span>\n<span class=\"token keyword module\">import</span> <span class=\"token string\">'./framer/styles.css'</span>\n<span class=\"token keyword module\">import</span> <span class=\"token imports\"><span class=\"token maybe-class-name\">Hero</span></span> <span class=\"token keyword module\">from</span> <span class=\"token string\">'./framer/hero'</span>\n\n<span class=\"token keyword module\">export</span> <span class=\"token keyword module\">default</span> <span class=\"token keyword\">function</span> <span class=\"token function\"><span class=\"token maybe-class-name\">App</span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword control-flow\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span><span class=\"token class-name\">Hero.Responsive</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token punctuation\">}</span>c:[\"$\",\"$Lb\",\"2\",{\"lang\":\"tsx\",\"lineHeight\":\"1.6\",\"showLineNumbers\":\"$undefined\",\"bleed\":\"right\",\"title\":\"$undefined\",\"highlight\":\"$undefined\",\"wrap\":false,\"children\":\"// 4. Import and use\\nimport './framer/styles.css'\\nimport Hero from './framer/hero'\\n\\nexport default function App() {\\n return <Hero.Responsive />\\n}\",\"highlightedHtml\":\"$15\"}]\nd:[\"$\",\"$L2\",\"3\",{\"children\":[\"Read the full \",[\"$\",\"$L16\",\"1\",{\"href\":\"/quickstart\",\"title\":\"\",\"children\":\"Quickstart guide\"}],\" for a step-by-step walkthrough.\"]}]\ne:[[\"$\",\"$L6\",\"0\",{\"id\":\"framer-mcp\",\"level\":2,\"children\":[[\"$\",\"$7\",\"0\",{\"children\":\"Framer MCP\"}]]}],[\"$\",\"$L2\",\"1\",{\"children\":[\"Let AI assistants like \",[\"$\",\"strong\",\"1\",{\"children\":\"Claude\"}],\", \",[\"$\",\"strong\",\"3\",{\"children\":\"Cursor\"}],\", and \",[\"$\",\"strong\",\"5\",{\"children\":\"Copilot\"}],\" read and modify your Framer project directly. The \",[\"$\",\"$L16\",\"7\",{\"href\":\"/mcp/overview\",\"title\":\"\",\"children\":\"Framer MCP plugin\"}],\" exposes your project as a set of tools that AI ")</script>
53<script>(self.__FLIGHT_DATA||=[]).push("can call through the Model Context Protocol.\"]}],[\"$\",\"$L2\",\"2\",{\"children\":[\"$\",\"$L16\",null,{\"href\":\"/mcp/connect\",\"title\":\"\",\"children\":\"Set up Framer MCP â\"}]}]]\nf:[\"$\",\"$L17\",null,{\"full\":true,\"children\":[[\"$\",\"$L18\",\"0\",{\"children\":null}],[\"$\",\"$L19\",\"1\",{\"children\":null}]]}]\n10:[\"$\",\"$L1a\",null,{\"children\":[\"$\",\"$L1b\",null,{\"children\":null}]}]\n11:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"dark\",\"data-default-theme\":\"dark\",\"suppressHydrationWarning\":true,\"children\":[null,false,[\"$\",\"body\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){var d=document.documentElement;var strict=d.hasAttribute(\\\"data-strict-theme\\\");var m=strict?null:document.cookie.match(/color-theme=(light|dark)/);var t=m?m[1]:null;if(!t){var def=d.getAttribute(\\\"data-default-theme\\\")||\\\"system\\\";t=def===\\\"system\\\"?(window.matchMedia(\\\"(prefers-color-scheme:dark)\\\").matches?\\\"dark\\\":\\\"light\\\"):def}if(t===\\\"dark\\\")d.classList.add(\\\"dark\\\");else d.classList.remove(\\\"dark\\\")})()\"}}],null,[\"$\",\"div\",null,{\"className\":\"sr-only\",\"children\":\"Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.\"}],[\"$\",\"$L1c\",null,{\"color\":\"var(--primary)\"}],[\"$\",\"$L1d\",null,{\"id\":\"layout-get--\"}]]}]]}]\n12:[\"$\",\"$L1d\",null,{\"id\":\"layout-get--*\"}]\n13:[[\"$\",\"link\",\"css:/assets/index-Dij5pFrE.css\",{\"rel\":\"stylesheet\",\"precedence\":\"vite-rsc/importer-resources\",\"href\":\"/assets/index-Dij5pFrE.css\",\"data-rsc-css-href\":\"/assets/index-Dij5pFrE.css\"}],\"$undefined\"]\n")</script>
53<script>(self.__FLIGHT_DATA||=[]).push("14:[[[\"$\",\"title\",\"title\",{\"children\":\"Unframer â Export Framer to React\"}],[\"$\",\"meta\",\"meta:property:og:site_name\",{\"property\":\"og:site_name\",\"content\":\"Unframer\"}],[\"$\",\"meta\",\"meta:property:og:description\",{\"property\":\"og:description\",\"content\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\"}],[\"$\",\"meta\",\"meta:name:description\",{\"name\":\"description\",\"content\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\"}],[\"$\",\"link\",\"link:icon:::\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"style\",\"style:1\",{\"href\":\"/holocron-injected-styles?8wfj6h\",\"precedence\":\"default\",\"dangerouslySetInnerHTML\":{\"__html\":\":root:root { --primary: #b91c1c; }\\n:root.dark { --primary: color-mix(in oklch, #b91c1c 40%, white); }\"}}],[\"$\",\"meta\",\"meta:name:viewport\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"meta:charSet:charSet\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"meta:name:twitter:card\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"meta:name:twitter:image\",{\"name\":\"twitter:image\",\"content\":\"https://holocron.so/api/og?title=Unframer+%E2%80%94+Export+Framer+to+React&description=Export+your+Framer+components+as+React+code.+Works+with+Next.js%2C+Remix%2C+Vite%2C+Astro%2C+and+any+React+framework.&icon=http%3A%2F%2Funframer.co%2Ffavicon.ico&siteName=Unframer&pageLabel=unframer.co%2F\"}],[\"$\",\"meta\",\"meta:property:og:image\",{\"property\":\"og:image\",\"content\":\"https://holocron.so/api/og?title=Unframer+%E2%80%94+Export+Framer+to+React&description=Export+your+Framer+components+as+React+code.+Works+with+Next.js%2C+Remix%2C+Vite%2C+Astro%2C+and+any+React+framework.&icon=http%3A%2F%2Funframer.co%2Ffavicon.ico&siteName=Unframer&pageLabel=unframer.co%2F\"}],[\"$\",\"meta\",\"meta:name:twitter:description\",{\"name\":\"twitter:description\",\"content\":\"Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.\"}],[\"$\",\"meta\",\"meta:name:holocron:site-description\",{\"name\":\"holocron:site-description\",\"content\":\"The best Framer plugins. Export to React, sync with GitHub, rewrite with AI.\"}],[\"$\",\"meta\",\"meta:name:twitter:title\",{\"name\":\"twitter:title\",\"content\":\"Unframer â Export Framer to React\"}],[\"$\",\"meta\",\"meta:property:og:title\",{\"property\":\"og:title\",\"content\":\"Unframer â Export Framer to React\"}]],[\"$\",\"$L1e\",null,{\"title\":\"Unframer â Export Framer to React\"}]]\n")</script>
53</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.