📚 Documentation | API Reference | Quick Start

✨ Features

• 🎨 70+ Production-Ready Components - Complete UI library with buttons, forms, navigation, overlays, data display, marketing components and more
• 🎯 Fully Customizable - Every component accepts className prop for Tailwind CSS or custom CSS styling
• 📦 Zero Runtime Dependencies - Pure vanilla JavaScript/TypeScript
• 🔧 CLI Tool - Install components individually or all at once
• 💎 TypeScript First - Full type safety with .d.ts files
• 🎨 OKLCH Color System - Modern color definitions with automatic dark mode
• ⚡ Tree-Shakeable - Only bundle what you use
• 🎭 Works Everywhere - No framework required
• 📚 Comprehensive Docs - Full documentation with live examples at muhammad-fiaz.github.io/WindElements

Installation

WindElements works like shadcn/ui - components are copied to YOUR project, not installed as npm dependencies.

Initialize Your Project

npx windelements@latest init

This will:

• ✅ Create components.json configuration
• ✅ Require TypeScript and Tailwind CSS configuration
• ✅ Set up component directory (default: src/components/ui)
• ✅ Auto-inject OKLCH theme CSS variables
• ✅ Copy utility functions to your project

Add Components

# Add individual components (copied to src/components/ui/)
npx windelements@latest add button
npx windelements@latest add input
npx windelements@latest add dialog

# Add multiple components
npx windelements@latest add button input card

# Add all components
npx windelements@latest add --all

# Overwrite existing
npx windelements@latest add button --overwrite

Components are copied to src/components/ui/ - you own the code!

Usage

Components are in YOUR project at src/components/ui/. Import and use them:

// Import from YOUR source code (not from npm!)
import { createButton } from './components/ui/button';
import { createInput } from './components/ui/input';
import { createCard, createCardHeader, createCardTitle } from './components/ui/card';

// Create a button
const button = createButton({
  variant: 'default',
  children: 'Click me',
  onClick: (e) => console.log('Clicked!')
});

// Create an input
const input = createInput({
  type: 'text',
  placeholder: 'Enter your name...',
  onInput: (e) => console.log((e.target as HTMLInputElement).value)
});

// Create a card
const card = createCard();
const cardHeader = createCardHeader();
const cardTitle = createCardTitle({ children: 'My Card' });
const cardContent = createCardContent();

cardContent.getElement().appendChild(input.getElement());
cardContent.getElement().appendChild(button.getElement());
cardHeader.getElement().appendChild(cardTitle.getElement());
card.getElement().appendChild(cardHeader.getElement());
card.getElement().appendChild(cardContent.getElement());

document.body.appendChild(card.getElement());

JavaScript Example

import { createButton } from './components/ui/button.js';

const button = createButton({
  variant: 'default',
  children: 'Click me',
  onClick: () => alert('Hello!')
});

document.body.appendChild(button.getElement());

📦 Available Components (70+)

🎨 Foundational Components (11)

button button-group input label textarea form file-upload checkbox switch radio-group kbd

📐 Layout Components (10)

card separator accordion aspect-ratio breadcrumb collapsible tabs scroll-area divider resizable

🧭 Navigation Components (6)

navbar sidebar footer menubar dropdown-menu context-menu

💬 Feedback Components (11)

alert alert-dialog badge progress skeleton spinner toast tooltip empty notification sonner

📝 Form Components (11)

select slider toggle toggle-group input-otp combobox counter calendar date-picker rating file-upload

🎭 Display Components (13)

avatar avatar-group table data-table typography pagination chip stats timeline stepper carousel testimonial empty

🪟 Overlay Components (10)

dialog drawer popover modal sheet hover-card hint command alert-dialog tooltip

🎯 Marketing Components (4)

hero feature-card pricing-card testimonial

View Full Component Documentation →

Component API

All components follow a consistent API pattern:

Class-based API

const component = new ComponentName(props);
const element = component.getElement();
component.update(newProps);
component.destroy();

Factory Function API

const component = createComponentName(props);
const element = component.getElement();

Configuration

Your components.json file:

{
  "typescript": true,
  "componentDir": "src/components/ui",
  "utilsDir": "src/lib",
  "cssFile": "src/styles/globals.css",
  "tailwindConfig": "tailwind.config.js"
}

Styling

All components use CSS custom properties for theming:

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* ... more theme variables */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... dark mode overrides */
}

TypeScript

All components are fully typed:

import { Button, ButtonProps } from './components/button';

const props: ButtonProps = {
  variant: 'default',
  size: 'lg',
  disabled: false,
  onClick: (e: MouseEvent) => console.log(e)
};

const button = new Button(props);

License

This project is licensed under the MIT License - see the LICENSE file for details.

Star History

Credits

Inspired by shadcn/ui