Components

Browse all 70+ production-ready components for your Vanilla JavaScript/TypeScript project.

All Components

🎨 Foundational (11 components)

Components for building forms and basic interactions.

• Button - Interactive buttons with multiple variants
• Button Group - Group multiple buttons together
• Input - Text input with validation
• Label - Form labels with accessibility
• Textarea - Multi-line text input
• Form - Form wrapper with validation
• File Upload - Drag-and-drop file upload
• Checkbox - Checkbox input
• Switch - Toggle switch
• Radio Group - Radio button group
• Kbd - Keyboard key display

📐 Layout (10 components)

Components for structuring your UI.

• Card - Container with header, content, footer
• Separator - Visual divider
• Accordion - Collapsible content sections
• Aspect Ratio - Maintain aspect ratio
• Breadcrumb - Navigation breadcrumbs
• Collapsible - Expandable content
• Tabs - Tabbed interface
• Scroll Area - Custom scrollable area
• Divider - Horizontal/vertical divider
• Resizable - Resizable panel system

🧭 Navigation (6 components)

Components for site navigation.

• Navbar - Top navigation bar
• Sidebar - Collapsible side navigation
• Footer - Page footer
• Menubar - Application menu bar
• Dropdown Menu - Dropdown menu
• Context Menu - Right-click menu

💬 Feedback (11 components)

Components for user feedback and notifications.

• Alert - Alert messages
• Alert Dialog - Confirmation dialogs
• Badge - Status indicators
• Progress - Progress bar
• Skeleton - Loading placeholder
• Spinner - Loading spinner
• Toast - Temporary notifications
• Tooltip - Hover tooltips
• Empty - Empty state placeholder
• Notification - System notifications
• Sonner - Toast notification system

📝 Form Components (10 components)

Advanced form inputs and controls.

• Select - Custom select dropdown
• Slider - Range slider
• Toggle - Toggle button
• Toggle Group - Group of toggles
• Input OTP - OTP input fields
• Combobox - Searchable select
• Counter - Numeric counter
• Calendar - Date calendar
• Date Picker - Date input with calendar
• Rating - Star rating

🎭 Display (13 components)

Components for displaying data and content.

• Avatar - User avatar image
• Avatar Group - Stacked avatars
• Table - Data table
• Data Table - Advanced data table
• Typography - Typography styles
• Pagination - Page navigation
• Chip - Removable chips/tags
• Stats - Statistics display
• Timeline - Event timeline
• Stepper - Multi-step progress
• Carousel - Image/content carousel
• Testimonial - Customer testimonials
• Empty - Empty state

🪟 Overlay (10 components)

Components that overlay the main content.

• Dialog - Modal dialogs
• Drawer - Side drawer panel
• Popover - Floating popover
• Modal - Advanced modal
• Sheet - Side sheet panel
• Hover Card - Hover-triggered card
• Hint - Small tooltip hints
• Command - Command palette
• Alert Dialog - Confirmation dialogs
• Tooltip - Tooltips

🎯 Marketing (4 components)

Components for marketing and landing pages.

• Hero - Hero section
• Feature Card - Feature showcase
• Pricing Card - Pricing plans
• Testimonial - Customer testimonials

Installation

Add components individually:

npx windelements@latest add button
npx windelements@latest add card

Or add all components:

npx windelements@latest add --all

Usage Pattern

All components follow a consistent API:

import { createComponentName } from './components/ui/component-name';

const component = createComponentName({
  // Props here
  className: 'custom-class',
  onClick: () => console.log('Clicked!')
});

// Get the DOM element
const element = component.getElement();

// Append to DOM
document.body.appendChild(element);

Customization

Every component accepts a className prop for custom styling:

const button = createButton({
  variant: 'default',
  className: 'my-custom-class hover:scale-105',
  children: 'Custom Button'
});

TypeScript

All components are fully typed:

import { ButtonProps } from './components/ui/button';

const props: ButtonProps = {
  variant: 'primary',
  size: 'lg',
  disabled: false
};