🛠️ Kit UI

Kit UI is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative tools—from advanced color manipulation to ASCII art generation—into a single, unified workspace.

Built with Next.js 16, React 19, and Tailwind CSS 4, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility.

---

🚀 The Toolkit

Kit UI is divided into four core specialized applications:

🎨 Pastel — Professional Color Toolkit

A comprehensive suite for color theory, manipulation, and accessibility.

• Color Playground: Interactive HSL/RGB/HEX manipulation with real-time analysis.
• Accessibility Suite: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator.
• Generative Tools: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect.
• Batch Processing: Perform mass color operations and exports.
• WASM Powered: Utilizes @valknarthing/pastel-wasm for high-performance color calculations.

📐 Units — Smart Unit Converter

A powerful, intuitive converter that understands the way you work.

• 187+ Units: Supporting 23 categories including Length, Mass, Temperature, Force, and more.
• Smart Search: Quickly find units via a fuzzy-search command palette.
• Visual Comparison: Dynamic chart views for comparing scale across different units.
• Favorites & History: Save your most-used conversions for instant access.

✍️ Figlet — ASCII Art Generator

Retro-inspired text banners for terminals and documentation.

• 373 Fonts: From classic Standard to complex 3D and cursive styles.
• Real-time Preview: See your ASCII art transform as you type.
• Multi-Export: Copy as raw text, download .txt files, or export as .png images.

🎬 Media — Browser-Based File Converter

Privacy-first, local-only media conversion powered by WebAssembly.

• Video & Audio: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg.
• Image Processing: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick.
• Zero Server Uploads: All processing happens locally in your browser for maximum privacy.
• Advanced Options: Fine-tune bitrates, codecs, resolutions, and quality presets.

---

✨ Core Features

• 🎭 Glassmorphic UI: A modern, translucent aesthetic with smooth Framer Motion transitions.
• ⚡ Turbopack Optimized: Built for speed using the latest Next.js 16 Turbopack engine.
• ♿ Accessibility First: Integrated tools to ensure your designs meet global standards.
• 📱 Responsive & Fluid: Tailored experience across mobile, tablet, and desktop.
• 🛠️ Developer Friendly: Keyboard shortcuts, command palettes, and URL-state sharing.
• 🐳 Production Ready: Full Docker & Nginx integration for seamless deployment.

---

💻 Tech Stack

• Framework: Next.js 16 (App Router, Static Export)
• Library: React 19
• Styling: Tailwind CSS 4 (CSS-first configuration)
• Animations: Framer Motion
• State Management: Zustand & React Query
• Icons: Lucide React
• Type Safety: TypeScript 5

---

🏗️ Project Structure

.
├── app/                  # Next.js App Router (Pages & Layouts)
│   ├── (app)/            # Core Tool Pages (Pastel, Units, Figlet, Media)
│   └── api/              # Backend API routes
├── components/           # Reusable UI & Logic Components
│   ├── pastel/           # Color-specific components
│   ├── units/            # Converter-specific components
│   ├── figlet/           # ASCII-specific components
│   ├── media/            # Media conversion components
│   └── ui/               # Base Atomic Components (Buttons, Cards, etc.)
├── lib/                  # Business Logic & Utilities
│   ├── pastel/           # WASM wrappers & Color logic
│   ├── units/            # Conversion algorithms
│   ├── figlet/           # Font loading & ASCII generation
│   └── media/            # FFmpeg & ImageMagick WASM orchestration
├── public/               # Static assets & Figlet fonts
├── Dockerfile            # Multi-stage Docker build
└── nginx.conf            # Production Nginx configuration

---

🛠️ Development & Deployment

Prerequisites

• Node.js: 20.x or higher
• pnpm: 9.x or higher

Local Development

# Clone and install
pnpm install

# Start development server with Turbopack
pnpm dev

Production Build

# Build for static export
pnpm build

# The output will be in the /out directory

Docker Deployment

# Build locally
docker build -t kit-ui .

# Run with Nginx
docker run -p 80:80 kit-ui

---

📈 Performance & Optimization

• Static Site Generation (SSG): Entire toolkit is exported as static HTML/JS for sub-second load times.
• Client-Side WASM: Complex processing (FFmpeg, ImageMagick, Pastel) is offloaded to WebAssembly for native-level performance without server latency.
• CSS-First Configuration: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead.
• Automatic CI/CD: GitHub Actions pipeline for multi-architecture Docker builds.

---

📝 License

© 2026 pivoine.art. All rights reserved.