@esvigy/cli

@esvigy/cli

UI illustrations as simple, tree-shakable, and developer-friendly as icons.
The "shadcn for illustrations" — Copy-paste beautiful, customizable, and animated vector illustrations directly into your project.

🎨 Open the Interactive Illustration Studio (esvigy.vercel.app)
Preview all 30+ illustrations live, test two-tone palettes, toggle animations, and copy CLI commands with one click.

⚡ Quick Start

You don't need to install this package permanently. Run it directly with your package manager:

# With pnpm
pnpm dlx @esvigy/cli add

# With npm
npx @esvigy/cli add

# With bun
bunx @esvigy/cli add

# With yarn
yarn dlx @esvigy/cli add

Note: The unscoped alias esvigy is currently pending an npm support whitelist review (false-positive similarity flag with envify). In the meantime, use @esvigy/cli.

If no arguments are passed, an interactive wizard prompts you to select illustrations, target framework, and verifies your installation folder.

🚀 Direct Usage

Add a specific illustration:

# React component (.tsx)
pnpm dlx @esvigy/cli add ActionCreate --framework react

# Raw SVG (.svg) into public folder
pnpm dlx @esvigy/cli add EmptyBox --framework svg --dir public/illustrations

# Multiple illustrations at once
pnpm dlx @esvigy/cli add StatusSuccess StatusFail StatusProcessing

🧠 Smart Component Folder Auto-Detection

esvigy automatically inspects your project layout so you don't have to specify --dir every time:

1. shadcn/ui components.json: If your project has a components.json configuration, esvigy reads your aliases.components path (e.g. @/components or ~/components) and targets <components>/esvigy/.
2. Project Structure:
   • If src/components/ exists $\rightarrow$ targets src/components/esvigy/
   • If components/ exists $\rightarrow$ targets components/esvigy/
   • If src/ exists $\rightarrow$ targets src/components/esvigy/
   • Fallback: components/esvigy/
3. Framework Auto-Detection: Inspects package.json dependencies to determine whether you're using React, Vue, or Svelte, and pre-selects the appropriate framework in the interactive prompt.

📋 Commands

esvigy add [illustrations...]

esvigy list

List all 30+ illustrations in the catalog with category groupings and tags:

# List all illustrations
pnpm dlx @esvigy/cli list

# Filter by category
pnpm dlx @esvigy/cli list --category empty-states
pnpm dlx @esvigy/cli list --category status
pnpm dlx @esvigy/cli list --category actions

# Output as JSON
pnpm dlx @esvigy/cli list --json

📄 License

MIT © Nick Frost