Dinshad

Create a fully-featured Next.js application with shadcn/ui components and AI-friendly structure in seconds.

Quick Start

mkdir my-project
cd my-project
npx dinshad

This creates a Next.js 14.0.3 project with:

• 🎨 Complete shadcn/ui component system
• 🌓 Light/Dark mode + multiple themes
• 🤖 AI-friendly project structure
• 🎯 TypeScript + ESLint
• 📱 Responsive by default
• 🚀 Ready for development

Project Structure

my-project/
├── app/                    # Next.js pages
│   ├── page.tsx           # Home page
│   └── blank/            # Template page
├── components/            # React components
│   ├── ui/               # shadcn components
│   ├── navbar.tsx        # Navigation + theme
│   └── ...
├── lib/                   # Utilities
├── project.md            # Project requirements
└── todo.md               # Development tasks

Features

Complete Component System

• 30+ pre-configured shadcn/ui components
• All components theme-aware
• TypeScript types included
• Accessible by default

Available Components:

Layout:
- Card: cards, headers, footers
- Sheet: slide-out panels
- Accordion: collapsible sections
- AspectRatio: responsive containers

Navigation:
- NavigationMenu: main navigation
- DropdownMenu: nested menus
- Menubar: horizontal menus
- Tabs: tabbed interfaces

Inputs:
- Button: various button styles
- Input: text inputs
- Textarea: multiline inputs
- Select: dropdown selections
- Checkbox: toggle boxes
- RadioGroup: option groups
- Switch: toggle switches
- Slider: range inputs

Data Display:
- Table: data tables with sorting
- Calendar: date displays
- Progress: progress indicators

Feedback:
- Alert: status messages
- Toast: notifications
- Skeleton: loading states

Overlay:
- Dialog: modal windows
- AlertDialog: confirmation dialogs
- HoverCard: hover tooltips
- Popover: contextual overlays
- Tooltip: hover tips

Other:
- Avatar: user images
- Badge: status indicators
- Command: command palettes
- Separator: divider lines

Theme System

• Light/Dark modes
• Additional themes:
  • Slate (default)
  • Rose
  • Blue
  • Green
  • Orange
• Easy theme switching from navbar
• CSS variables for customization

AI Development with Cursor

This template is optimized for AI development using Cursor. To get the best experience:

1. Open project in Cursor
2. Set up project rules (Cmd/Ctrl + Shift + J):

Recommended Rules:

You are the primary developer for this project. Follow these guidelines:

1. Project Organization:
   - Read project.md for requirements
   - Use todo.md to track tasks with checkboxes
   - Replace blank/ template with actual features

2. Component Usage:
   - Use pre-installed shadcn components
   - Maintain theme compatibility (light/dark)
   - Follow Next.js app router patterns
   - Add JSDoc comments for components

3. Development Process:
   - Track progress in todo.md
   - Add console.logs for debugging
   - Request user testing when needed
   - Record test results in log.txt

3. Start development by:
   • Defining requirements in project.md
   • Planning tasks in todo.md
   • Using the blank/ page as a template

Development

Start the development server:

npm run dev

Visit http://localhost:3000 to see your app.

Project Organization

Key Files

• project.md: Define your project requirements
• todo.md: Track development progress
• app/blank/: Template page for new features

Customization

• Edit themes in app/globals.css
• Modify navigation in components/navbar.tsx
• Add new pages in app/ directory
• All shadcn/ui components ready to use

Need Help?

• Check shadcn/ui docs
• Visit our GitHub repository
• Open an issue

License

MIT