CLI Tool
StableThe Omnira UI CLI helps you quickly scaffold projects and add components to your existing projects. This guide covers every command and option available.
Installation
The Omnira UI CLI is available directly as a command-line utility via npx and doesn't require any global installation. You can run it using any package manager:
# Using npx (recommended)
npx omnira-ui@latest [command]
# Using pnpm
pnpm dlx omnira-ui@latest [command]
# Using yarn
yarn dlx omnira-ui@latest [command]Init Command
The init command scaffolds the full Omnira UI design system into your existing Next.js project. It copies all components, design tokens, utility files, and generates a theme configuration.
npx omnira-ui@latest initWhile running the command, you'll be guided through an interactive setup:
? Project name: › my-app
? Pick a color: (number or name, default: lime)
Available accent colors:
1. ● Lime (default) #D2FE17
2. ● Blue #3B82F6
3. ● Violet #8B5CF6
4. ● Rose #F43F5E
5. ● Orange #F97316
6. ● Teal #14B8A6
? Default theme mode: (1 or 2, default: 1)
1. Dark-first (default — follows system preference)
2. Light-firstWhat gets scaffolded
After running init, the CLI creates the following in your project:
your-project/
├── components/ui/ # All Omnira UI components (76+ components)
├── lib/cn.ts # Utility for merging class names
├── lib/copy-to-clipboard.ts # Clipboard utility
├── lib/theme-context.tsx # ThemeProvider for dark/light mode
├── app/globals.css # Full design token system
├── app/providers.tsx # ThemeProvider wrapper component
├── omnira.config.ts # Project configuration (accent, theme)
└── omnira-overrides.css # Accent color overrides (if non-default)The CLI automatically detects src/ directory structures and places files accordingly.
Next steps after init
# 1. Install peer dependencies
npm install iconsax-react clsx
# 2. Wrap your root layout with the ThemeProvider
# app/layout.tsx
import "./globals.css";
import { Providers } from "./providers";
export default function RootLayout({ children }) {
return (
<html data-theme="dark">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
# 3. Start using components
import { Button } from "@/components/ui/Button";Add Command
The add command lets you install specific components into your project without running the full scaffolding. It copies only the requested component folder into components/ui/ and ensures required utility files are present.
Add a single component
npx omnira-ui@latest add ButtonAdd multiple components
npx omnira-ui@latest add Button Badge InputAdd a page bundle
Page bundles install all components required for a specific page type. For example, installing the card-headers bundle adds CardHeader, Button, Badge, Avatar, and Dropdown.
# Install all components for card headers
npx omnira-ui@latest add card-headers
# Install all login page components
npx omnira-ui@latest add login
# Install table with all its dependencies
npx omnira-ui@latest add tableList all available components
Run add without any arguments to see every available component and page bundle:
npx omnira-ui@latest addThis displays a categorized list of individual components and page bundles with the number of dependencies each bundle includes.
Example terminal output
✦ Omnira UI — Add Components
✓ Copied Button (3 files) → components/ui/Button/
✓ Copied Badge (2 files) → components/ui/Badge/
Checking dependencies...
✓ Copied lib/cn.ts (dependency)
✓ Copied app/globals.css (design tokens)
─────────────────────────────────────
✓ Added 2 components (5 files)
Usage:
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";Command Reference
Below is a complete reference of all CLI commands and their behavior.
Button), hyphenated slugs (e.g. social-button), or page bundle names (e.g. card-headers). Case-insensitive.Page Bundles
Page bundles are shortcuts that install all components needed for a specific page type. Use them when you want to quickly set up a full feature without manually adding each dependency.
Run npx omnira-ui add to see the full list of page bundles directly in your terminal.
Usage Examples
Here are common workflows when using the Omnira UI CLI:
Scaffold a new project
# Initialize Omnira UI in your Next.js project
npx omnira-ui@latest init
# Install peer dependencies
npm install iconsax-react clsx
# Start the dev server
npm run devAdd components to an existing project
# Add a single component
npx omnira-ui@latest add Button
# Add multiple at once
npx omnira-ui@latest add Input Select Textarea Toggle
# Add a full page bundle
npx omnira-ui@latest add login
# Use in your code
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";Using hyphenated slugs
Component names can be passed as PascalCase folder names or as lowercase hyphenated slugs. Both work:
# These are equivalent:
npx omnira-ui@latest add SocialButton
npx omnira-ui@latest add social-button
# These are equivalent:
npx omnira-ui@latest add RadioGroup
npx omnira-ui@latest add radio-groupFrequently Asked Questions
Common questions about the Omnira UI CLI and component installation.