Configuration

Learn how to configure your Create RX App project

Initial Configuration

Create RX App provides several configuration options during project creation:

Project Name

The name of your project, which will be used for the directory name and in package.json.

npx create-rx-app my-app

Package Manager

Choose between npm, yarn, or pnpm for managing your project's dependencies.

? Select your package manager: › npm / yarn / pnpm

Directory Structure

Choose whether to use a src/ directory for better organization.

? Do you want to use a src/ directory? › (Y/n)

UI Components

Choose whether to include shadcn/ui components.

? Do you want to include shadcn/ui components? › (Y/n)

Project Configuration Files

After creating your project, you can further customize it by modifying these configuration files:

next.config.js

Configure Next.js settings such as environment variables, redirects, rewrites, and more.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your custom Next.js configuration
};

module.exports = nextConfig;

tailwind.config.js

Customize your Tailwind CSS configuration, including colors, fonts, and plugins.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    // Your custom theme configuration
  },
  plugins: [require("tailwindcss-animate")],
}

tsconfig.json

Configure TypeScript settings for your project.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

tRPC Configuration

You can customize your tRPC setup by modifying these files:

server/api/trpc.ts

Configure tRPC server settings, middleware, and procedures.

utils/trpc.tsx

Configure tRPC client settings and React Query integration.

Adding shadcn/ui Components

If you selected shadcn/ui during project creation, you can add more components using the shadcn CLI:

npx shadcn@latest add [component-name]

For example, to add a dropdown menu component:

npx shadcn@latest add dropdown-menu