Peak Barbers - Documentation

Welcome to the official documentation for Peak Barbers, a premium FiveM resource designed for high-fidelity character appearance customization. Peak Barbers provides a modern, immersive experience for players to refine their look with professional-grade tools and a sleek, glassmorphism-inspired interface.

1. Overview & Features
2. AI-First Setup (Recommended)
3. Manual Installation
4. Configuration Guide
5. Interaction Systems
6. Developer API
7. NUI Development & Building
8. Localization
9. Performance & Optimization

Peak Barbers is built with a focus on realism, performance, and aesthetic excellence. It replaces standard, clunky barber menus with a cinematic interaction system.

• Cinematic Camera System: Dynamic camera positioning that focuses on the character's face with smooth transitions.
• NPC Interactions: Synchronized NPC barber spawning with realistic animations (scissors usage, idle tasks).
• Interactive Chair System: Players physically sit in barber chairs, locking their position for a truly immersive session.
• Glassmorphism UI: A custom-built Vue 3 interface featuring premium blur effects, smooth animations, and intuitive controls.
• Head Rotation Control: Players can rotate their character's head during the session using keyboard controls for better visibility.
• Framework Agnostic: Native support for ESX, QBCore, and Qbox via a robust bridge system.
• Appearance Compatibility: Optimized for illenium-appearance, fivem-appearance, and qb-clothing.
• Multi-Targeting Support: Built-in integration for ox_target, qb-target, and qtarget.

If you are using an AI coding assistant (like Claude, ChatGPT, or Cursor), you can set up this resource in seconds:

1. Open PROMPT.md in the resource folder.
2. Copy the content and paste it into your AI assistant.
3. The AI will guide you through framework detection and configuration based on your specific server environment.

1. Download: Extract the peak-barbers folder into your server's resources directory.
2. Configuration: Open shared/config.lua and set your Config.Framework ('esx', 'qbcore', or 'qbx').
3. Appearance: Ensure your preferred appearance resource is set in Config.AppearanceResource.
4. Permissions: If using ESX/QBCore, ensure the resource has permission to remove money (handled automatically via bridge).
5. Start: Add ensure peak-barbers to your server.cfg.

The resource is highly customizable via shared/config.lua.

Main Settings

UI Customization

You can tweak the UI aesthetics directly in the config:

lua
Config.MenuPosition = "right" -- "left" or "right"
Config.MenuStyle = "glass"    -- "glass" or "solid"

Config.UIColors = {
    accent      = "#e67e22",
    accentLight = "#f39c12",
    accentDim   = "#d35400",
}

Peak Barbers supports multiple interaction methods to fit your server's style.

Target Interaction (Recommended)

By default, the script uses ox_target. It automatically creates box zones for every chair defined in Config.Positions.

Marker Interaction

If you prefer traditional markers, set Config.InteractionType = "marker". The script will draw floating icons above available chairs.

Client-Side Global Functions

These functions are available globally for integration into other scripts:

Server-Side Callbacks

The resource uses the following callbacks for state management:

• peak-barbers:takeChair: Validates and reserves a chair.
• peak-barbers:releaseChair: Frees up a chair for other players.
• peak-barbers:pay: Handles the economy transaction.

The UI is a modern Vue 3 application built with Vite.

Modifying the UI

1. Navigate to the ui/ folder.
2. Install dependencies: npm install.
3. Start dev mode: npm run dev.

Building for Production

Before deploying, you must build the assets:

1. Run npm run build in the ui/ folder.
2. The compiled assets will be generated in ui/dist/.
3. The fxmanifest.lua is already configured to load these assets.

Peak Barbers is fully localized. You can find translation files in the locales/ directory.

• English (en.lua)
• French (fr.lua)
• Spanish (es.lua)
• Arabic (ar.lua)

To add a new language, simply create a new file in locales/ following the existing format and update Config.Locale.

• Idle Usage: 0.00ms.
• Active Session: ~0.02ms (due to camera and head rotation logic).
• Cleanup: Automatic entity deletion on resource stop or player disconnect ensures no "ghost" peds or objects are left behind.
• Throttling: Built-in rate limiting for server callbacks to prevent spam.

Documentation generated by Peak Studios. For support, visit our Discord.