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

Languages

TypeScript 95.1%

CSS 2.9%

PHP 1%

JavaScript 0.8%

Dockerfile 0.2%