Use magicui in framer?

[jooles]

Hello everyone!

I'm using Framer to build one of my sites.
I would somehow like to use magicUI in framer, but so far I haven't managed to do it.

Therefore my question: Is this even possible?
Thanks and best regards!

[rajtilak-2020]

Hello! @jooles
Yes, it's possible to use MagicUI in Framer, but there are a few things you'll need to ensure for it to work properly, since Framer is a design tool that allows you to create interactive prototypes and websites, while MagicUI is a utility-first design system often used in projects for quick UI component usage.

Here’s how you can integrate MagicUI into your Framer project:

Steps to Use MagicUI in Framer:

1. Import MagicUI in Framer:
   Since Framer supports React-based components, you should be able to import MagicUI directly if it's available as a package (like npm or yarn). First, you will need to install it:

   • Go to your Framer project’s code editor (where you can edit your components).
   • If you're using MagicUI via npm or yarn, install it as a dependency.

   npm install magic-ui
   # or
   yarn add magic-ui

2. Configure MagicUI in Framer:
   After installing, you can import and use the components from MagicUI directly in your Framer code components.

   import { Button, Input } from 'magic-ui';
   
   // Example component
   const MagicUIButton = () => {
     return <Button label="Click me" />;
   };
   
   export default MagicUIButton;

3. Styling and Customization:
   MagicUI provides pre-defined styles, but you may want to customize them to fit your design in Framer. You can do this by either overriding styles through className or using Framer’s built-in style capabilities.

4. Ensure Compatibility:
   Since Framer is a design and prototyping tool with a React environment, it’s important to ensure that MagicUI components are compatible with React and that you’re not conflicting with Framer’s layout or components. MagicUI should be React-compatible, but if you experience issues, you can try debugging by ensuring all dependencies are up to date and compatible.

Alternative Approach: Embedding MagicUI via Iframe (if Direct Integration Doesn't Work)

If you're facing issues integrating MagicUI directly into Framer, another approach is to create a separate MagicUI project (e.g., a simple React app) and then embed it in Framer using an iframe.

1. Create a React App with MagicUI:
   You can create a new React app using Create React App or Next.js, install MagicUI, and build the components you need.

2. Host the MagicUI App:
   Deploy your MagicUI-based app to a hosting platform (like Vercel or Netlify).

3. Embed in Framer:
   Use Framer's embedding capabilities to insert an iframe linking to your hosted MagicUI app.

   <iframe src="https://your-magicui-app.com" width="100%" height="500px"></iframe>

This way, you can still utilize MagicUI’s components within your Framer prototype without direct integration.

---

Key Notes:

• Ensure that any React-based library (like MagicUI) is compatible with Framer's React setup.
• Framer allows JavaScript, so as long as the package you're using supports React, it should be straightforward to integrate.
• If you run into any compatibility issues, check Framer's documentation for tips on using external libraries.

[Yeom-JinHo]

@jooles @rajtilak-2020
Thanks for the write-up! Just a quick clarification on Magic UI’s installation and import model, since it works a bit differently from typical npm UI libraries.

---

1. Installation

Magic UI (magicui.design) is not distributed as an npm package, so:

npm install magic-ui
# or
yarn add magic-ui

is not the correct setup. There is no official magic-ui package published on npm.

✅ Recommended ways to use Magic UI

• Using shadcn CLI (recommended):

npx shadcn@latest init
npx shadcn@latest add @magicui/globe

• Manual installation (copy/paste):

  You can also copy the component source directly from the documentation and paste it into your project.

---

2. Import Pattern

Magic UI follows a copy-paste / local source model, similar to shadcn/ui.

That means components are imported from your local project path, not from a package.

import { Globe } from "@/components/ui/globe"
// or
import { ShimmerButton } from "@/components/magicui/shimmer-button"

This pattern:

import { Button } from "magic-ui"

is not supported, since Magic UI is not consumed as an npm dependency.

---

Happy to help clarify further depending on your specific Framer setup (Framer Sites vs Code Components, etc.).