Generate design tokens from Huevy App and import as CSS variables, Tailwind utility classes in your projects with ease.
npm install huevybash
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
$3
Interactive setup - prompts for API key, selects design system, generates files
$3
Re-sync design system and update generated files
$3
Show current configuration and version info
$3
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
$3
`javascript
// tailwind.config.js
const huevyConfig = require('./huevy.tailwind.js');
module.exports = {
...huevyConfig,
content: ['./src/*/.{js,jsx,ts,tsx}']
};
`
$3
`css
/ In your main CSS file (e.g., index.css, App.css) /
@import "./huevy-variables.css";
`
$3
`css
.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).
$3
Use box size utilities for width and height with consistent sizing:
`html
`
CSS Variables:
`css
/ 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:
`javascript
/ 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 /
`
$3
Use gap utilities for consistent spacing between elements:
`html
Item 1
Item 2
`
CSS Variables:
`css
/ 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 /
`
$3
Apply consistent border radius utilities:
`html
`
CSS Variables:
`css
/ 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;
`
$3
Line height utilities use numeric naming for easy reference:
`html
Single line height
1.2x line height
1.5x line height
`
CSS Variables:
`css
/ 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:
`javascript
/ In your Tailwind config, these are available as: /
leading-100, leading-115, leading-120 / line height utilities /
``