Skip to content
Mox UI

Installation

Set up a Next.js project with Tailwind CSS and shadcn, then add your first Mox UI component.

  1. 1

    Create a Next.js project

    Start a new app with create-next-app. Already have a React project with Tailwind CSS v4? Skip to step 3.

    pnpm create next-app my-app
  2. 2

    Use the recommended defaults

    Choose the first option. It sets up TypeScript, Tailwind CSS v4, and the App Router, which is everything Mox UI needs.

    Terminal
    What is your project named? my-appWould you like to use the recommended Next.js defaults?    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md    No, reuse previous settings    No, customize settings - Choose your own preferences
  3. 3

    Set up shadcn

    Move into the project and run shadcn init. It adds the theme variables the components use, the cn helper in lib/utils.ts, and a components.json file that tells the CLI where components go.

    cd my-app && pnpm dlx shadcn@latest init
  4. 4

    Add a component

    Install fluid orb from the registry. The CLI copies its source to components/ui/fluid-orb.tsx and installs any packages it needs.

    pnpm dlx shadcn@latest add mox/mox-ui/fluid-orb
  5. 5

    Use it in a page

    Import the component and render it. Every component page has a usage example and the full list of props.

    app/page.tsx
    import FluidOrb from "@/components/ui/fluid-orb"
export default function Home() {  return (    <main className="flex min-h-svh items-center justify-center">      <FluidOrb size={280} color="#F75001" />    </main>  )}
  6. 6

    Start the development server

    Run the app and open localhost:3000 to see the orb.

    pnpm dev