Installation

Set up your development environment. Learn how to initialize a Next.js project and configure Tailwind CSS to use OrbitUI components.

CursorXUI is designed to work seamlessly within modern React frameworks. The recommended stack is Next.js (App Router), TypeScript, and Tailwind CSS. This setup ensures optimal rendering, type safety, and complete style control.

1. Create a Next.js project

Initialize a new Next.js application using the interactive create-next-app CLI tool. It will automatically ask you to configure TypeScript and Tailwind CSS.

npx create-next-app@latest my-orbit-app --typescript --tailwind --eslint --src-dir --app

2. Configure your Tailwind paths

Ensure your tailwind.config.ts matches the directories of your project. This allows Tailwind to scan and generate utility classes for the OrbitUI code blocks you paste in.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

3. Add Tailwind CSS directives

Import the base Tailwind directives into your global stylesheet (typically located at src/app/globals.css).

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Run the development server

Start the application dev server. Your project is now ready to receive copy-paste components from OrbitUI.

npm run dev

Ready to integrate? Head over to the components sidebar, select the animation or interface element you need, and copy it directly into your new setup.