@deriv-com/quill-v2-cli

A CLI tool for setting up and managing Deriv Quill V2 shadcn/ui components in your Next.js projects.

Installation

npm install -g @deriv-com/quill-v2-cli

Quick Start

# Complete setup (installs all components + config)
quill-v2 install

# Update to latest version
quill-v2 update

Commands

quill-v2 install

Complete setup that installs all Deriv Quill components and configuration for Next.js projects.

quill-v2 install [options]

Options:
  --skip-deps      Skip installing dependencies
  --skip-config    Skip configuration setup

What it does:

• Creates Next.js project structure with App Router
• Creates necessary directories (components/ui, lib, hooks, app)
• Installs required dependencies (unless --skip-deps is used)
• Sets up configuration files (Tailwind, PostCSS, components.json) (unless --skip-config is used)
• Copies all component templates
• Sets up global CSS with Deriv design tokens
• Includes AI workflow instructions for designers

quill-v2 update

Update all components and configuration to the latest version.

quill-v2 update [options]

Options:
  -d, --dir <directory>  Project directory (default: ".")

What it does:

• Updates all existing component files to the latest version
• Updates tailwind.config.js configuration
• Updates globals.css with latest design tokens
• Note: Does NOT update dependencies or other config files

AI Workflow Commands

The CLI includes AI workflow instructions for designers to work with the Next.js project. These commands are available in Cursor AI:

@create-page <figma-url>

Create a new Next.js page from a Figma design.

• Analyzes the Figma design using Figma MCP
• Creates the page in app/pages/
• Uses existing components/ui components
• Updates routing in app/page.tsx if it's the first page

Example:

@create-page https://figma.com/design/...

@open-preview

Start the development server and open the application in the browser.

• Checks for running processes on port 3000
• Kills existing processes if needed
• Starts the Next.js dev server
• Opens the browser automatically

Example:

@open-preview

@save-version [description]

Save changes with a versioned commit message.

• Verifies no errors (type-check, lint, build)
• Ensures .gitignore exists (creates if missing)
• Increments version in package.json
• Commits with format: v{version} - {description}

Example:

@save-version Added new landing page

@restore-version

Restore the project to a previous saved version.

• Lists all commits created with @save-version
• Allows selection of a version to restore
• Performs a hard reset to the selected commit

Example:

@restore-version

@setup-git <remote-url>

Initialize Git and set up remote repository.

• Initializes Git if not already initialized
• Adds or replaces remote origin
• Fetches from remote
• Switches to master branch

Example:

@setup-git https://github.com/username/repo.git

Project Structure

After running quill-v2 install, your Next.js project will have:

app/
├── page.tsx          # Entry point
├── globals.css       # Global styles
└── pages/            # Your custom pages

components/
└── ui/               # Component files

lib/
└── utils.ts          # Utility functions

hooks/
└── use-toast.ts      # Toast hook

tailwind.config.js    # Tailwind configuration
postcss.config.js     # PostCSS configuration
components.json       # shadcn/ui configuration

Usage in Your Code

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Deriv Quill</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your name" />
        <Button>Submit</Button>
      </CardContent>
    </Card>
  );
}

Design Tokens

All components use Deriv's Figma design tokens for consistent styling:

• Colors: Primary, secondary, accent, destructive, muted
• Typography: Font families, sizes, weights, line heights
• Spacing: Consistent spacing scale
• Borders: Radius and border styles
• Shadows: Elevation and depth

Troubleshooting

Component not found

Make sure you're running the command from your project root directory.

Update issues

If you have issues updating, make sure you're running the command from your project root directory where the components were originally installed.

License

MIT