create-odel-next

One-line starter for Next.js projects with shadcn/ui, ODEL design system, and i18n support.

Quick Start

npx create-odel-next my-app

Or using npm:

npm create odel-next my-app

To create a project in the current directory:

npx create-odel-next .

What It Does

This CLI tool sets up a complete Next.js project with:

• ✅ Next.js (latest version) with App Router
• ✅ shadcn/ui initialized with extended component registries
• ✅ ODEL Design System (optional) - fonts, colors, logos, and brand assets
• ✅ i18n Support (optional) - Arabic/English translations with next-intl
• ✅ MCP Setup (optional) - Model Context Protocol for AI assistants
• ✅ Cursor Rules - Development guidelines and best practices

Features

🎨 ODEL Design System (Optional)

When you choose to apply the ODEL preset, you get:

• Ubuntu Fonts - English and Arabic variants with automatic language detection
• ODEL Brand Assets - Logos (light/dark variants) and favicon
• Design Tokens - Pre-configured color palette, shadows, and spacing
• RTL Support - Built-in right-to-left layout support for Arabic

🌐 i18n Support (Optional)

When you choose to add i18n support, you get:

• next-intl - Full internationalization framework for Next.js
• Arabic & English - Pre-configured locales with RTL support
• Language Toggle - Ready-to-use component for switching languages
• Translation Files - Organized JSON message files
• Locale Routing - URL-based locale detection (/en, /ar)

🧩 Extended Component Registries

The components.json includes access to 50+ component registries including:

• shadcn/ui (default)
• Magic UI
• Aceternity UI
• Clerk Components
• Supabase UI
• And many more...

🤖 MCP Support

Optional setup for Model Context Protocol (MCP) clients:

• Cursor
• Claude Desktop
• VS Code
• Codex

Requirements

• Node.js >= 18.0.0
• npm or yarn

What Gets Created

my-app/
├── app/
│   └── [locale]/          # Locale segment (if i18n enabled)
│       ├── layout.tsx     # Locale-aware layout with RTL support
│       └── page.tsx       # Localized home page
├── components/
│   └── language-toggle.tsx # Language switcher (if i18n enabled)
├── i18n/                  # i18n configuration (if i18n enabled)
│   ├── routing.ts
│   ├── navigation.ts
│   └── request.ts
├── messages/              # Translation files (if i18n enabled)
│   ├── en.json
│   └── ar.json
├── public/
│   ├── fonts/            # Ubuntu fonts (if ODEL preset)
│   ├── brand/            # ODEL logos (if ODEL preset)
│   └── favicon.svg
├── proxy.ts              # Locale routing middleware (if i18n enabled)
├── components.json       # shadcn/ui config with extended registries
└── .cursor/              # Cursor IDE rules

Usage

Basic Usage

npx create-odel-next my-app
cd my-app
npm run dev

Interactive Prompts

The CLI will ask you:

1. ODEL Design System? - Apply ODEL fonts, colors, and brand assets
2. i18n Setup? - Add Arabic/English translations with next-intl
3. MCP Client? - Choose an MCP client or skip

Example Workflow

# Create project
npx create-odel-next my-odel-app

# Navigate to project
cd my-odel-app

# Start development server
npm run dev

i18n (Internationalization)

The i18n setup uses next-intl for full internationalization support.

What's Included

• Locale Routing - Routes prefixed with locale (/en/about, /ar/about)
• RTL Support - Automatic dir="rtl" for Arabic pages
• Language Toggle - Pre-built component for switching languages
• Translation Files - JSON-based messages in messages/ folder

Using Translations

In your components:

import { useTranslations } from "next-intl";

export function MyComponent() {
  const t = useTranslations("common");
  return <h1>{t("welcome")}</h1>;
}

Adding New Translations

1. Add keys to messages/en.json and messages/ar.json
2. Use useTranslations hook in your components

Language Toggle

Import and use the pre-built toggle:

import { LanguageToggle } from "@/components/language-toggle";

// In your header/navbar
<LanguageToggle />

ODEL Design System

The ODEL preset includes:

• Fonts: Ubuntu (English & Arabic) with automatic character range detection
• Colors: Pre-configured OKLCH color tokens for light/dark themes
• Branding: ODEL logos and favicon
• Typography: Optimized font loading with font-display: swap

Font Configuration

The setup automatically configures:

• Ubuntu font family with automatic language detection
• Arabic fonts for Arabic characters (U+0600-06FF)
• English fonts for Latin characters
• Monospace variant for code

Component Registries

After setup, you can install components from any registry:

# From default shadcn
npx shadcn@latest add button

# From Magic UI
npx shadcn@latest add @magicui/animated-shiny-text

# From Aceternity
npx shadcn@latest add @aceternity/3d-card

Development

Project Structure

• index.mjs - Main CLI script
• template/ - Template files and assets
  • odel/public/ - ODEL brand assets
  • i18n/ - i18n template files
  • .cursor/ - Cursor IDE rules

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on the repository.