🎨 Huevy CLI

Sync design system tokens from huevy.app directly into your development projects as CSS variables, Tailwind config, and utility classes.

🚀 Quick Start

# Install
npm install huevy

# Setup and sync (interactive)
npx huevy

⚠️ Requirements

• Huevy Pro account required for sync functionality
• API key from your huevy.app dashboard
• Free users cannot sync design tokens

📦 Features

• Smart project integration - Auto-detects React, Vue, Angular, Next.js
• CSS variables - Clean naming (--primary-500, --fs-button-small)
• Tailwind config - Ready-to-use configuration
• Version management - Seamless package updates
• IDE support - Auto-completion for generated variables

Commands

npx huevy

Interactive setup - prompts for API key, selects design system, generates files

npx huevy sync

Re-sync design system and update generated files

npx huevy status

Show current configuration and version info

npx huevy uninstall

Remove all generated files and configuration

📁 Generated Files

• huevy-variables.css - CSS custom properties
• huevy.tailwind.js - Tailwind CSS configuration

🔄 Workflow

1. Setup: Run npx huevy and enter your API key
2. Select: Choose the design system you want to apply
3. Integrate: Import generated files in your project
4. Update: Run huevy sync when design tokens change on huevy.app

💡 Integration Steps

1. Import huevy.tailwind.js in your tailwind.config.js

// tailwind.config.js
const huevyConfig = require('./huevy.tailwind.js');
module.exports = {
  ...huevyConfig,
  content: ['./src/**/*.{js,jsx,ts,tsx}']
};

2. Import huevy-variables.css in your main index file

/* In your main CSS file (e.g., index.css, App.css) */
@import "./huevy-variables.css";

Usage Examples

.button {
  background-color: var(--primary-500);
  color: var(--primary-50);
  font-size: var(--fs-button-medium);
}

📏 Sizing and Spacing Classes

Huevy generates comprehensive sizing utilities based on your design system's sizing tokens. These follow a t-shirt sizing scale (5xs to 5xl and beyond).

Box Sizes

Use box size utilities for width and height with consistent sizing:

<!-- Combined width + height -->
<div class="sz-md"></div>        <!-- 40x40 -->
<div class="sz-lg"></div>        <!-- 48x48 -->
<div class="sz-2xl"></div>       <!-- 64x64 -->

<!-- Separate width and height -->
<div class="wd-4xl ht-md"></div> <!-- 120px wide, 40px tall -->
<div class="wd-xl ht-xs"></div>  <!-- 56px wide, 24px tall -->

CSS Variables:

/* Generated box size variables */
--sz-5xs: 4px;
--sz-4xs: 8px;
--sz-3xs: 12px;
--sz-2xs: 16px;
--sz-xs: 24px;
--sz-sm: 32px;
--sz-md: 40px;
--sz-lg: 48px;
--sz-xl: 56px;
--sz-2xl: 64px;
/* ...and more sizes based on your design system */

Tailwind Configuration:

/* In your Tailwind config, these are available as: */
w-md, w-lg, w-2xl    /* width utilities */
h-md, h-lg, h-2xl    /* height utilities */
size-md, size-lg, size-2xl  /* combined size utilities */

Gap and Spacing

Use gap utilities for consistent spacing between elements:

<!-- Grid gap -->
<div class="grid gap-md">        <!-- 16px gap -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Flex gap -->
<div class="flex gap-lg">         <!-- 20px gap -->
  <button>Action 1</button>
  <button>Action 2</button>
</div>

CSS Variables:

/* Generated gap variables */
--gp-3xs: 4px;
--gp-2xs: 6px;
--gp-xs: 8px;
--gp-sm: 12px;
--gp-md: 16px;
--gp-lg: 20px;
--gp-xl: 24px;
/* ...and more spacing values */

Border Radius

Apply consistent border radius utilities:

<div class="rounded-sm"></div>   <!-- 6px radius -->
<div class="rounded-md"></div>   <!-- 8px radius -->
<div class="rounded-lg"></div>   <!-- 12px radius -->
<div class="rounded-round"></div> <!-- 9999px (perfect circle) -->

CSS Variables:

/* Generated border radius variables */
--rad-2xs: 2px;
--rad-xs: 4px;
--rad-sm: 6px;
--rad-md: 8px;
--rad-lg: 12px;
--rad-xl: 16px;
--rad-2xl: 24px;
--rad-round: 9999px;

Line Heights

Line height utilities use numeric naming for easy reference:

<!-- Using utility classes -->
<p class="lh-100">Single line height</p>     <!-- 1 -->
<p class="lh-120">1.2x line height</p>       <!-- 1.2 -->
<p class="lh-150">1.5x line height</p>       <!-- 1.5 -->

CSS Variables:

/* Generated line height variables */
--lh-100: 1;
--lh-115: 1.15;
--lh-120: 1.2;
--lh-130: 1.3;
--lh-140: 1.4;
--lh-150: 1.5;
--lh-160: 1.6;

Tailwind Configuration:

/* In your Tailwind config, these are available as: */
leading-100, leading-115, leading-120  /* line height utilities */

📞 Support

• Documentation: huevy.app
• Support: [email protected]

📄 License

This package is free to use with huevy.app services. Modification and redistribution are restricted. See LICENSE for details.