Quick Start Guide
Get up and running with Willow Design System in minutes. Follow this step-by-step guide to install and start using components.
Choose Your Installation Method
Method 1: Willow CLI (Recommended)
Fast and easy component installation
Install the Willow CLI globally:
npm install -g willow-cliInitialize Willow in your project:
willow initInstall components with short commands:
willow add button
willow add card
willow add badge
# View all available components
willow listMethod 2: Direct URLs
Use shadcn CLI with component URLs
Install shadcn CLI (if not already installed):
npm install -D shadcn@latestInstall components using direct URLs:
npx shadcn@latest add https://iridescent-brigadeiros-fe4174.netlify.app/r/button.json
npx shadcn@latest add https://iridescent-brigadeiros-fe4174.netlify.app/r/card.json
npx shadcn@latest add https://iridescent-brigadeiros-fe4174.netlify.app/r/badge.jsonMethod 3: New Project
Start fresh with everything pre-configured
Create a new project with Willow pre-installed:
npx create-willow-design-system@latest my-app
cd my-app
npm run devComplete Setup Guide
Detailed instructions for setting up Willow Design System in your project
1Install Dependencies
Install the required peer dependencies for the design system to work properly.
npm install class-variance-authority clsx tailwind-merge lucide-react2Add the CN Utility
Create a utility function for combining CSS classes efficiently.
// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}3Configure Tailwind CSS
Update your Tailwind configuration to include the design system styles.
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./app/**/*.{js,ts,jsx,tsx}",
"./node_modules/willow-design-system/**/*.js"
],
theme: {
extend: {
colors: {
willow: {
primary: {
50: '#f0f9ff',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
}
}
}
}
}
}4Import Components
Start using components in your React application.
import { Button, Card, Badge } from 'willow-design-system'
function MyComponent() {
return (
<Card>
<Card.Header>
<Card.Title>Welcome</Card.Title>
</Card.Header>
<Card.Content>
<p>Get started with Willow components!</p>
<Button theme="primary">
Get Started
</Button>
</Card.Content>
</Card>
)
}