create-odel-next

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

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
• ✅ 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

🧩 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/                    # Next.js App Router
│   ├── layout.tsx         # Root layout with font setup
│   ├── page.tsx           # Home page
│   ├── globals.css        # Global styles + ODEL tokens
│   └── fonts.ts           # Font configuration (if ODEL preset)
├── components/            # Your components
├── public/                # Static assets
│   ├── fonts/            # Ubuntu fonts (if ODEL preset)
│   ├── brand/            # ODEL logos (if ODEL preset)
│   └── favicon.svg       # ODEL favicon
├── components.json       # shadcn/ui config with extended registries
└── .cursor/              # Cursor IDE rules (if available)

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. 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

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
  • .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.