A premium Vite starter kit for rapid web development, designed to streamline your development process. It comes pre-configured with essential tools like TypeScript, Vite, SCSS, and modern UI components.

✨ Features

• 🚀 Vite: Next-generation frontend tooling for a blazing fast development experience
• 🛡️ TypeScript: Strong typing for more robust and maintainable code
• 🎨 SCSS: CSS with superpowers, enabling variables, nesting, and mixins
• 🔧 ESLint & Prettier: Code quality and formatting tools
• ⚡ PostCSS: Advanced CSS processing with plugins
• 📝 Handlebars: Templating engine for clean HTML organization
• 🌀 Lenis: Buttery smooth scrolling experience
• 🎭 Ready-to-use Components: Tabs, Modals, Accordions, Theme Switcher
• 📱 Responsive Design: Mobile-first approach with modern breakpoints
• 🌙 Dark/Light Theme: Built-in theme switching with persistence
• 📦 Modern Build: Optimized for production with tree-shaking

🚀 Getting Started

Prerequisites

• Node.js (version 18.x or higher)
• npm

Installation

You can create a new project using npm create:

npm create zen@latest

Why @latest? This ensures you always get the most recent version of the ZEN starter kit. Without it, npm might use a cached or outdated version.

The tool will interactively prompt you to:

1. Enter your project name (with a default fallback)
2. Choose between two versions:
   • Standard Version: Full-featured with all components
   • Lite Version: Lightweight for static sites

This makes it easy to get started without remembering command line arguments and gives you flexibility to choose the right version for your needs.

🛠️ Available Scripts

• npm run dev - Starts the development server
• npm run host - Starts the development server, accessible on your local network
• npm run build - Builds the project for production
• npm run preview - Serves the production build locally for preview
• npm run lint - Lints the TypeScript files in the project
• npm run lint:fix - Lints and automatically fixes problems in TypeScript files

📁 Project Structure

zen-starter/
├── components/                    # Reusable HTML partials
│   ├── accordion.html            # Accordion component template
│   ├── footer.html               # Footer component template
│   ├── header.html               # Header component template
│   ├── modal.html                # Modal component template
│   └── tabs.html                 # Tabs component template
├── pages/                        # Project pages
│   ├── 404.html                  # 404 error page
│   └── index.html                # Main application page
├── public/                       # Static assets
│   ├── fonts/                    # Font files
│   └── images/                   # Image assets
├── src/
│   ├── scripts/                  # TypeScript source code
│   │   ├── components/           # UI component classes
│   │   │   ├── Accordion.ts      # Accordion component logic
│   │   │   ├── BackTopButton.ts  # Back to top button
│   │   │   ├── Header.ts         # Header component logic
│   │   │   ├── Tabs.ts           # Tabs component logic
│   │   │   ├── Theme.ts          # Theme switcher
│   │   │   └── index.ts          # Component exports
│   │   ├── services/             # Service layer
│   │   │   ├── api.ts            # API utilities
│   │   │   ├── scroll.ts         # Smooth scroll service
│   │   │   ├── storage.ts        # Local storage wrapper
│   │   │   └── index.ts          # Service exports
│   │   ├── types/                # TypeScript type definitions
│   │   │   └── global.d.ts       # Global type definitions
│   │   ├── utils/                # Utility functions
│   │   │   └── modal.ts          # Modal utilities
│   │   └── main.ts               # Main entry point
│   └── styles/                   # SCSS stylesheets
│       ├── core/                 # Core styles
│       │   ├── components/       # Component styles
│       │   │   ├── back-top-button.scss
│       │   │   ├── footer.scss
│       │   │   ├── header.scss
│       │   │   ├── modal.scss
│       │   │   └── index.scss
│       │   ├── helpers/          # SCSS helpers
│       │   │   ├── functions.scss
│       │   │   ├── media.scss
│       │   │   ├── mixins.scss
│       │   │   └── index.scss
│       │   ├── fonts.scss        # Font definitions
│       │   ├── globals.scss      # Global styles
│       │   ├── reset.scss        # CSS reset
│       │   ├── typography.scss   # Typography styles
│       │   ├── utils.scss        # Utility classes
│       │   ├── variables.scss    # SCSS variables
│       │   └── index.scss        # Core styles index
│       └── main.scss             # Main stylesheet
├── .eslintrc.js                  # ESLint configuration
├── .prettierrc                   # Prettier configuration
├── index.html                    # Landing page
├── package.json                  # Project dependencies
├── postcss.config.js             # PostCSS configuration
├── tsconfig.json                 # TypeScript configuration
└── vite.config.js                # Vite configuration

🎯 Key Components

UI Components

• Accordion: Collapsible content sections with smooth animations
• Tabs: Tabbed interface with keyboard navigation
• Modal: Lightweight modal system with backdrop
• Header: Responsive navigation with mobile menu
• BackTopButton: Smooth scroll-to-top functionality
• ThemeToggle: Dark/light theme switcher

Services

• Scroll: Lenis-powered smooth scrolling
• Storage: Type-safe local storage wrapper
• API: HTTP request utilities

Utilities

• Modal Management: Easy modal initialization and control
• Type Definitions: Comprehensive TypeScript types

🎨 Styling

The project uses a well-organized SCSS structure:

• Variables: Centralized design tokens
• Mixins: Reusable style patterns
• Functions: SCSS utility functions
• Media Queries: Responsive breakpoint helpers
• Component Styles: Modular component styling
• Utility Classes: Helper classes for common patterns

🔧 Configuration

Vite Configuration

• Multi-page application support
• SCSS preprocessing with modern compiler API
• PostCSS integration with autoprefixer
• Handlebars templating support
• Optimized build output

TypeScript Configuration

• Strict type checking
• Modern ES modules
• Path mapping for clean imports

Code Quality

• ESLint with TypeScript support
• Prettier for consistent formatting
• Pre-commit hooks ready