Using components

After reframe add finishes, import the component from the managed framer/components directory and import the generated stylesheet once in the part of your app that loads the component.

If you initialized with the default path, the import looks like this:

import Button from "./components/framer/components/button";
import "./components/framer/styles.css";

export default function CallToAction() {
  return <Button variant="Primary Button" buttonText="Get started" />;
}

If you initialized with --path src/ui, use ./ui/framer/components/button instead. The import path always follows the parent directory selected during reframe init.

Compose exported components

Each export is an independent React component. A small composition is usually enough to verify an installation:

import Button from "./components/framer/components/button";
import SmallContactCard from "./components/framer/components/small-contact-card";
import "./components/framer/styles.css";

export default function ContactSection() {
  return (
    <section>
      <SmallContactCard
        title="Have a question?"
        description="Send us a message and we will get back to you."
        linkText="Contact support"
        link="/contact"
      />
      <Button buttonText="Get in touch" variant="Primary Button" link="/contact" />
    </section>
  );
}

This is an illustration, not a required page structure. Use the components you installed with your own layout, routes, and application logic. Your exports may expose different names, variants, or properties; in TypeScript, the generated facade provides autocomplete and reports invalid values.

Generated files

Reframe keeps generated files together so they are easy to identify and update:

framer/
  components/
    button.tsx       # typed public facade in a TypeScript project
    button.jsx       # generated Framer runtime
  assets/            # images, fonts, and other export assets
  meta/
    reframe.json     # local export registry, versions, and checksums
  styles/
    button.css       # styles owned by the export, when present
  styles.css        # imports the generated component styles

The CLI may add more component files and assets as you install more exports. The runtime and the facade are both present in a TypeScript project because they serve different purposes: the runtime preserves Framer behavior, while the facade gives TypeScript users a stable typed entry point. A JavaScript project receives the runtime entry point without the typed facade.

TypeScript and JavaScript

In a TypeScript project, import the component normally. The .tsx facade is resolved automatically:

import Button from "./framer/components/button";

export function SaveButton() {
  return <Button buttonText="Save changes" variant="Primary Button" />;
}

Do not import the .jsx runtime directly in application code unless you have a specific reason to bypass the typed facade. You do not need a separate TypeScript configuration for each component.

In a JavaScript project, the same import resolves to the generated JavaScript entry point:

import Button from "./framer/components/button";

export default function SaveButton() {
  return <Button buttonText="Save changes" />;
}

The CLI chooses the public entry point based on the project it detects. TypeScript projects receive the .tsx facade and its .jsx runtime; JavaScript projects receive the .jsx runtime. These generated files stay inside the managed framer directory and are not additional application entry points you need to configure.

Variants

Framer variants become a variant prop. For example, a button may expose values such as Primary Button and Secondary Button:

<Button buttonText="Learn more" variant="Secondary Button" />

The available values are generated from the published component. Use your editor's TypeScript suggestions or inspect the component facade when you need the exact list.

Components that expose breakpoint-specific variants also provide a .Responsive entry point:

<Button.Responsive
  variants={{
    base: "Primary Button",
    md: "Secondary Button",
  }}
  buttonText="Get started"
/>

Breakpoint keys may include base, sm, md, lg, xl, and 2xl. Only use keys and variant values exposed by that component's generated facade.

Assets and nested dependencies

Images, fonts, and other files referenced by an export are copied into framer/assets. Generated modules resolve those assets relative to the component, so moving individual files out of the managed directory can break the component.

If a component uses another generated runtime dependency, the CLI includes the required files and records them in framer/meta/reframe.json. Install components with the CLI rather than copying one generated file by hand; this keeps the dependency and checksum metadata accurate.

Updating safely

Your application should import generated components, but application-specific wrappers and styles should live outside framer/. When you run reframe add again after a new publish, Reframe updates only files owned by the export and leaves your routes, pages, wrappers, and unrelated CSS alone.