🎨
70+ Components
Complete UI library with buttons, forms, navigation, overlays, data display, and marketing components.
WindElementsProduction-ready UI components
Like shadcn/ui but for Vanilla JavaScript/TypeScript
Skip to content
Quick Start
bash
# Initialize your project
npx windelements@latest init
# Add components
npx windelements@latest add button
npx windelements@latest add card
npx windelements@latest add dialog
# Or add all components
npx windelements@latest add --allSimple Example
typescript
import { createButton } from './components/ui/button';
import { createCard, createCardHeader, createCardTitle, createCardContent } from './components/ui/card';
// Create a button
const button = createButton({
variant: 'default',
children: 'Click me!',
onClick: () => alert('Hello WindElements!')
});
// Create a card
const card = createCard();
const header = createCardHeader();
const title = createCardTitle({ children: 'Welcome' });
const content = createCardContent();
content.getElement().appendChild(button.getElement());
header.getElement().appendChild(title.getElement());
card.getElement().appendChild(header.getElement());
card.getElement().appendChild(content.getElement());
document.body.appendChild(card.getElement());Component Categories
🎨 Foundational (11 components)
Button, Button Group, Input, Label, Textarea, Form, File Upload, Checkbox, Switch, Radio Group, Kbd
📐 Layout (10 components)
Card, Separator, Accordion, Aspect Ratio, Breadcrumb, Collapsible, Tabs, Scroll Area, Divider, Resizable
🧭 Navigation (6 components)
Navbar, Sidebar, Footer, Menubar, Dropdown Menu, Context Menu
💬 Feedback (11 components)
Alert, Alert Dialog, Badge, Progress, Skeleton, Spinner, Toast, Tooltip, Empty, Notification, Sonner
📝 Form Components (10 components)
Select, Slider, Toggle, Toggle Group, Input OTP, Combobox, Counter, Calendar, Date Picker, Rating
🎭 Display (13 components)
Avatar, Avatar Group, Table, Data Table, Typography, Pagination, Chip, Stats, Timeline, Stepper, Carousel, Testimonial, Empty
🪟 Overlay (10 components)
Dialog, Drawer, Popover, Modal, Sheet, Hover Card, Hint, Command, Alert Dialog, Tooltip
🎯 Marketing (4 components)
Hero, Feature Card, Pricing Card, Testimonial