Lit Vite Storybook Starter

A production-ready starter template for building modern web component libraries with Lit, Vite, and Storybook.

🚀 Quick Start

# Install dependencies
yarn install

# Start development
yarn dev          # Vite dev server (http://localhost:5173)
yarn storybook    # Storybook dev server (http://localhost:6006)

# Build for production
yarn build        # Build components
yarn build-storybook  # Build Storybook for deployment

📦 What's Included

Components

• Button - Multiple variants (primary, secondary, outline, ghost, destructive)
• Card - Flexible content containers with header, body, and footer
• Input - Form inputs with validation states and helper text

Design System

• Design Tokens - CSS custom properties for colors, typography, spacing
• Dark Mode - Automatic theme switching
• Accessibility - WCAG 2.1 AA compliant components
• Responsive - Mobile-first design approach

Development Tools

• Storybook - Interactive component documentation
• TypeScript - Type-safe development
• Vitest - Testing framework
• Vite - Lightning-fast build tool

🎯 Features

• ✅ Production Ready - Battle-tested components
• ✅ Accessibility First - WCAG 2.1 AA compliance
• ✅ Dark Mode Support - Automatic theme switching
• ✅ Responsive Design - Mobile-first approach
• ✅ Type Safe - Full TypeScript support
• ✅ Well Documented - Comprehensive Storybook docs
• ✅ Extensible - Easy to customize and extend

📚 Documentation

Visit the Storybook instance to explore:

• Interactive component examples
• Design token reference
• Usage guidelines and best practices
• Real-world implementation examples

🛠️ Tech Stack

• Lit - Modern web components framework
• Vite - Lightning-fast build tool
• Storybook - Component development environment
• TypeScript - Type-safe development
• Vitest - Testing framework

📖 Learn More

• Lit Documentation
• Storybook Documentation
• Web Components Guide

---

Built with ❤️ using Lit, Vite, and Storybook# lit-vite-storybook-starter