This walkthrough uses Magic UI's Globe as a concrete example of adding a documented component. Use a development branch or a disposable project first. The goal is to understand what the installer changes and decide whether the visual belongs on your page, not to add an effect merely because it is available.
1. Inspect your existing setup
Confirm that you are working in the intended React project and identify its package manager, path aliases, styles, and component directory. Record the current working state before running an installer. Magic UI's installation process follows shadcn/ui. [2]
If the project already has that setup, inspect it rather than initializing it again automatically. Existing conventions should guide where the new source goes. Check compatibility with your project's actual framework and styling versions.
2. Initialize only when needed
For a project that needs the setup, the documented pnpm command is shown below. Run it from the project root and review the prompts and resulting changes. [2]
pnpm dlx shadcn@latest init
The use of a latest-version CLI means behavior can evolve. Review the generated configuration and dependency changes before proceeding. Commit a working setup separately if that makes the component change easier to review.
3. Add the Globe component
Magic UI documents this component-specific installation command. It should add the source and required dependencies according to your configured project paths. [4]
pnpm dlx shadcn@latest add @magicui/globe
Read the generated files and the package changes. If the component already exists, compare the local version before accepting an overwrite. Preserve any changes your team has made.
4. Render it in a controlled layout
The installation documentation shows importing Globe from the local components/ui directory. [2] Adjust that path if your configuration uses a different alias or directory. A minimal example is:
import { Globe } from "@/components/ui/globe"
export default function GlobePreview() {
return <section aria-label="Globe preview"><Globe /></section>
}
Use the component's documented layout example to provide enough space, then adapt it to your page. The Globe reference describes its className and configuration options. [4] Avoid copying a decorative wrapper without understanding its dimensions and positioning.
5. Check rendering and motion
Open the page at a narrow viewport and at the width where the visual will normally appear. Verify that it does not cover text or interfere with the primary action. Check browser console errors and confirm that the initial page remains useful before the visual finishes rendering.
Because the Globe uses WebGL, test the result on a representative lower-powered device and consider a static alternative where appropriate. [4] Define reduced-motion behavior for your use case. If the visual is decorative, keep its semantics from distracting from the page's actual content.
6. Decide whether to keep it
Run the project's normal checks and compare page performance before and after the addition. Keep the component only if it supports the intended message at an acceptable cost. Document the source and important local changes.
This is a documentation-based integration guide checked on September 19, 2026. The example was not executed against your project, and compatibility depends on its existing setup.
Continue reading
Sources and verification
Official sources checked on September 19, 2026. Product plans and interfaces may change.