Installation

1. Install components

All components use Tailwind CSS v4, so ensure it's installed in your project.
We also use lucide-icons for most components that include icons, along with some shadcn/ui components. These dependencies will be automatically installed when using the CLI.

For example to add portal-hero-section to your project:

bunx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json

npx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json

pnpm dlx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json

While we provide a convenient 'copy' button for the code, we strongly recommend using the CLI for installing components, as it ensures all necessary files are included.

Add to your page and it works!

import PortalHeroSection from "@/components/rocketmxnui/portal-hero-section.tsx";

export default function Page() {
  return (
    <PortalHeroSection
      imageSrc="https://images.unsplash.com/photo-1447433819943-74a20887a81e?q=80&w=1199&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      title="A gateway to another realm"
      subtitle="Move your mouse — the portal follows."
      className="w-full"
    />
  );
}

2. Optional dependencies

Some components may require additional libraries, listed at the bottom of each component’s docs. Make sure to install them if needed.

3. Monorepo

For monorepo workspaces, the shadcn/ui CLI supports the -c option to specify the path to your workspace. For example:

bunx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json -c ./apps/www

npx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json -c ./apps/www

pnpm dlx shadcn@latest add https://ui.rocketmxn.com/r/portal-hero-section.json -c ./apps/www