# Introduction

## Introduction

### Overview

**Force Appearance** is an advanced, highly optimized FiveM appearance system designed for modern roleplay servers. Built with performance in mind, it offers a comprehensive character customization solution with multi-framework support, modern React UI, and extensive configuration options.

### Key Features

#### 🚀 Performance Optimized

* **70% fewer re-renders** - Custom state management hooks consolidate UI updates
* **50% faster initial load** - Improved caching and data processing
* **75% faster tab switching** - Optimized render cycles
* **Throttled NUI updates** - 50ms minimum between updates to reduce server load
* **Efficient animation loops** - Reduced check frequency from 4ms to 500ms

#### 🎨 Modern User Interface

* **React + TypeScript** - Built with modern web technologies
* **Shadcn UI + Tailwind CSS** - Beautiful, responsive design
* **Multiple color themes** - Choose from 7 pre-built themes
* **Keyboard navigation** - Full keyboard support with shortcuts
* **Search functionality** - Instant search with real-time filtering
* **Grain effect** - Optional cinematic grain overlay

#### 🔧 Multi-Framework Support

Supports all major FiveM frameworks out of the box:

* **ESX** (Legacy & Modern)
* **QBCore**
* **QBox**
* **Custom frameworks** (easily adaptable)
* **Auto-detection** - Automatically detects your framework

#### 📦 Comprehensive Features

* **Character Appearance** - Full ped customization with 100+ components
* **Clothing Stores** - Complete clothing shop system
* **Barber Shops** - Hair, beard, makeup, and more
* **Tattoo Shops** - Extensive tattoo collection with categories
* **Outfit System** - Save and manage multiple outfits
* **Multi-language** - Support for 10+ languages

#### 🛠️ Developer Friendly

* **LuaDoc annotations** - Full IDE support and autocomplete
* **Modular architecture** - Easy to extend and customize
* **Proper error handling** - pcall wrappers and validation
* **Extensive exports** - Rich API for integrations
* **Custom framework support** - Adapt to any framework
* **OX Lib integration** - Uses ox\_lib for base functions
* **OxMySQL** - Optimized database queries

### System Requirements

#### Dependencies

* **Server Build**: 5181 or higher
* **OneSync**: Required
* **ox\_lib**: Required
* **oxmysql**: Required

#### Recommended Specifications

* **Server**: Minimum 2 cores, 4GB RAM
* **Database**: MySQL 5.7+ or MariaDB 10.3+

### What's Included

#### Client-Side Components

* Character appearance management
* Shop interactions (clothing, barber, tattoo)
* Camera system with smooth transitions
* Outfit management system
* NUI callbacks and communication
* Progress bar integration
* Target system integration

#### Server-Side Components

* Database operations
* Player appearance saving/loading
* Admin commands
* Outfit management
* Shop pricing and validation
* Framework integrations

#### UI Components

* Main appearance interface
* Category-based navigation
* Slider controls for customization
* Color pickers
* Ped selector with search
* Tattoo browser with categories
* Dialog system for confirmations

### Use Cases

#### Roleplay Servers

Perfect for serious roleplay servers that need:

* Detailed character creation
* Multiple character customization points
* Realistic shop experiences
* Persistent character appearance

#### Freeroam/Casual Servers

Great for casual servers wanting:

* Quick character customization
* Admin tools for appearance management
* Player-friendly outfit system

#### Development/Testing

Ideal for developers who need:

* Reliable appearance system
* Easy integration with custom scripts
* Extensive API for automation
* Framework flexibility

### Performance Benchmarks

Based on testing with 200 concurrent players:

| Metric            | Value             |
| ----------------- | ----------------- |
| Initial Load Time | \~150ms           |
| Tab Switch Time   | \~25ms            |
| Component Update  | \~10ms            |
| Database Save     | \~50ms            |
| Memory Usage      | \~5MB client-side |
| Resmon (Idle)     | 0.00ms            |
| Resmon (Active)   | 0.01-0.02ms       |

### Screenshots & Demos

The resource features:

* Clean, modern interface with customizable themes
* Intuitive category-based navigation
* Real-time preview of all changes
* Smooth camera transitions
* Beautiful color selectors
* Organized tattoo browser

### Getting Support

For issues, questions, or feature requests:

* Check the documentation thoroughly
* Review configuration options
* Ensure all dependencies are up to date
* Contact Force Developments on Discord (@force3883)

***

**Next Steps**: Continue to the Configuration page to set up your appearance system.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.forcedevelopments.com/resources/force-appearance/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.