Webawesome Prototyping Kit

A rapid prototyping kit for building web applications with Webawesome components and Tailwind CSS v4.

🚀 Getting Started

Using This Template

1. Click the "Use this template" button at the top of this repository
2. Create your new repository from this template
3. Clone your new repository:

   git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
   cd YOUR_REPO_NAME

4. Install dependencies:

   npm install

5. Start development:

   npm run dev

Your browser will automatically open with live reload enabled!

Available Scripts

• npm run dev - Start complete development environment (CSS watching + live server)
• npm run build - Build production CSS (minified)
• npm run build-css - Build CSS with watch mode (CSS only)
• npm run serve - Start local development server with live reload (server only)

Documentation

• See agents.md for comprehensive development guidelines and component usage
• Check patterns/ directory for example layouts and templates

Project Structure

├── assets/icons/     # Custom SVG icons for Webawesome components
├── dist/            # Built CSS (auto-generated)
├── js/              # Custom JavaScript files
├── patterns/        # Example layouts and templates
├── src/             # Source CSS with Tailwind configuration
├── agents.md        # Development guidelines and documentation
└── index.html       # Main entry point

✨ Features

• Webawesome Components - Full integration with Webawesome v3.0.0-beta.6 web components
• Tailwind CSS v4 - Custom configuration with design system tokens
• 312 Custom Icons - Complete SVG icon library pre-configured
• Tabulator Integration - Pre-styled data tables ready to use
• Live Reload - Automatic browser refresh during development
• Pattern Templates - Example layouts to kickstart your project
• Design System - Comprehensive spacing, colors, and typography scales

📦 What's Included

webawesome-prototyping-kit/
├── assets/
│   └── icons/          # 312 custom SVG icons
├── dist/
│   └── main.css        # Pre-built CSS (ready to use)
├── js/
│   └── icon-library.js # Icon library configuration
├── patterns/
│   └── data-table-layout.html  # Example data table layout
├── src/
│   └── main.css        # Source CSS with Tailwind imports
├── agents.md           # Comprehensive development guidelines
├── index.html          # Example starter page
└── package.json        # Dependencies and scripts

🎨 Component Library

This kit comes with pre-configured Webawesome components:

• Buttons (brand, outlined, plain variants)
• Forms (inputs, textareas, selects, checkboxes, radios)
• Avatars (multiple sizes with initials support)
• Badges (status variants)
• Icons (custom library with 312+ icons)
• Dialogs/Modals
• Data Tables (via Tabulator)

See agents.md for detailed component usage and guidelines.

📚 Documentation

• agents.md - Complete development guidelines, component patterns, and best practices
• patterns/ - Example layouts and templates you can copy and customize

🛠️ Tech Stack

• Webawesome - Web components library
• Tailwind CSS v4 - Utility-first CSS framework
• Tabulator - Interactive data tables
• PostCSS - CSS processing
• Live Server - Development server with live reload

📝 License

MIT License - feel free to use this template for any project!