Screenui CLI

Build Modern Frontend Apps Faster — Templates, Components & UI Scaffolding for Next.js, Vite, React & Tailwind

✨ Features

• 🎨 15+ Production-Ready Components — Button, Alert, Card, Modal, Input, Toggle and more
• 🚀 Zero-Config Scaffolding — Generate Next.js or Vite projects in seconds
• 🌓 Built-in Dark Mode — Theme support powered by design tokens
• ⚡ Framework Agnostic — Works with Next.js, Vite, React, and Tailwind CSS
• 📦 No Installation Required — Use via npx instantly
• 🔄 Component Versioning — Track and upgrade components with ease
• 🎯 TypeScript First — Full type support with JavaScript fallback

🚀 Quick Start

No installation needed. Run any ScreenUI command instantly:

npx screenui-cli@latest add button

Initialize in Existing Project

npx screenui-cli@latest init

This will:

• Create screenui.config.json
• Set up utility functions
• Configure component paths
• Initialize component tracking

📦 Installation

Add Components

Install single or multiple components:

# Single component
npx screenui-cli@latest add alert

# Multiple components
npx screenui-cli@latest add button card modal

# With TypeScript
npx screenui-cli@latest add alert --lang ts --path src/components

# With JavaScript
npx screenui-cli@latest add alert --lang js

All components include:

• ✅ Dark/light theme support
• ✅ Tailwind-ready styling
• ✅ TypeScript definitions (when specified)
• ✅ Automatic cn() utility setup
• ✅ Version tracking via screenui.lock.json

Create New Project

Scaffold a complete project from templates:

# List available templates
npx screenui-cli@latest list

# Create from template
npx screenui-cli@latest create layout

Available Templates:

• nextjs/layout — Next.js with TypeScript
• react-vite/layout — Vite + React
• More templates coming: dashboard, auth, ecommerce...

🛠️ Commands

| Command | Description | |---------|-------------| | add <components...> | Install one or multiple components | | create <template> | Scaffold a full project from template | | init | Initialize ScreenUI in existing project | | list | Show all available templates & components | | diff <component> | Compare local vs latest component version | | upgrade | Update installed components to latest | | doctor | Run health checks on your setup | | status | Display all installed components |

Examples

# Add components
npx screenui-cli@latest add button alert card

# Create new project
npx screenui-cli@latest create nextjs/layout

# Check component status
npx screenui-cli@latest status

# Upgrade components
npx screenui-cli@latest upgrade

# Compare versions
npx screenui-cli@latest diff button

🎯 Why Choose ScreenUI?

| Feature | Benefit | |---------|---------| | ⚡ Instant Setup | Faster than copying UI from scattered repos | | 🎨 Consistent Design | Unified design system with tokens | | 🌓 Theme Ready | Dark/light mode built-in, no extra config | | 🧱 Complete Layouts | Pre-configured templates that just work | | 📦 15+ Components | Growing library of production-ready UI | | 🔓 No Lock-In | Components install directly into your codebase | | 🔧 Fully Customizable | Modify generated code as needed |

🔧 Configuration

After running init, customize screenui.config.json:

{
  "language": "ts",
  "componentPath": "src/components",
  "utilsPath": "src/lib/utils",
  "theme": "default"
}

🌐 Resources

• Website: screenui.com
• Documentation: screenui.com/docs
• GitHub: github.com/iamnavneetrajput/screenui-cli
• npm: npmjs.com/package/@screenui/cli

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Report Bugs — Open an issue
2. Request Features — Share your ideas
3. Submit PRs — Improve components or add new ones
4. Share Feedback — Help us improve

📄 License

MIT © ScreenUI — Free for personal and commercial use.

💡 Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 🌟 Star us: If ScreenUI helps you, give us a star on GitHub!