Documentation & Architecture
Comprehensive guides, design architecture, and developer resources for GetAppUI web and mobile first templates.
GetAppUI Documentation
Welcome to the GetAppUI developer documentation. This guide details our design principles, technical foundations, component conventions, and client-side utilities engineered for modern web and mobile applications.
Overview
GetAppUI provides production-ready Web and Mobile First templates, UI kits, and full-stack solutions. Every template is engineered for high performance, accessibility, responsive ergonomics, and clean code architecture.
Core Capabilities
- Mobile-First Responsive Layouts: Fluid breakpoints and adaptive views engineered to deliver fast, native-like user experiences on mobile screens and wide desktop displays.
- Strict Semantic Variables: Standardized color tokens and CSS variables that seamlessly adapt across system color schemes.
- In-Browser Utilities: Client-side developer tools that run locally using HTML5 Web APIs with zero server transmissions.
- Search Engine Optimization: Fully compliant semantic HTML5, Schema.org JSON-LD structured data, and Open Graph protocol integration.
Architecture & Technology Stack
Our products leverage standard, modern web and cross-platform technologies:
| Technology | Purpose | Implementation |
|---|---|---|
| Next.js (App Router) | Web Application Framework | Server-side rendering, static generation, streaming, and file-based routing |
| React | Component Hierarchy | Declarative UI components with strict named hook imports |
| Tailwind CSS | Styling & Design Tokens | Utility-first CSS using CSS variables and logical properties (ms-*, pe-*) |
| TypeScript | Type Safety | End-to-end type definitions for props, data models, and API responses |
| Fumadocs | Documentation Engine | Markdown and MDX rendering with automated table of contents |
Design System Standards
All templates follow strict architectural guidelines to ensure maintainability, performance, and accessibility.
1. Monochromatic Restraint
Color is used with purpose. Primary brand accents are reserved strictly for call-to-action buttons and active navigation selections. Supporting text and secondary elements rely on typographic hierarchy and standard font sizes (text-xs, text-sm, text-base) rather than excessive colors or washed-out grays.
2. Logical Spacing & Internationalization
Layout containers utilize logical properties (ms-*, me-*, ps-*, pe-*) instead of legacy physical directions (ml-*, pr-*). This ensures full compatibility with Right-to-Left (RTL) locales without stylesheet rewrites.
3. Flat Interactive Surfaces
Interfaces avoid artificial drop shadows and decorative gradients in favor of clean border definitions and crisp background contrast. Micro-interactions utilize subtle opacity shifts and focus rings for predictable feedback.
Developer Utilities
GetAppUI includes interactive utilities built for everyday engineering workflows:
Browser Image Compressor
Located at /tools/image-compressor, this tool performs image encoding directly in the browser using HTML5 Canvas APIs:
- Client-Side Processing: Images are decoded and converted locally in browser memory.
- Zero Server Storage: No images, EXIF metadata, or binary assets are transmitted to external servers.
- Format Conversion: Flexible encoding into WebP, JPEG, and PNG formats with customizable compression ratios and dimension scaling.
Getting Started
To explore or extend our templates locally:
Prerequisites
- Node.js 18.18+ or Bun 1.1+
- Package manager of choice (
bun,pnpm, ornpm)
Installation
Clone the repository and install dependencies:
bun installRunning Development Server
Start the local development server:
bun run devVisit http://localhost:3000 in your browser to view the application.
Building for Production
Compile static assets and optimized server bundles:
bun run buildThe build output will generate optimized serverless routes and pre-rendered static HTML pages.