https://www.youtube.com/watch?v=27hogAsTWqA
UM Multicharacter - Modern Character Selection System Built with Vite + Vue3 + Tailwind
Replace your dated character selection interface with UM Multicharacter, a beautifully designed, lightning-fast character management system built on modern web technologies. Powered by Vite, Vue3, and Tailwind CSS, this isn't another clunky NUI wrapped around basic HTML - it's a responsive, smooth, feature-rich character selector that makes joining your server feel professional from the first click. Compatible with ESX, QBCore, and QBOX frameworks, it works seamlessly with major clothing systems and includes advanced features like photo mode, customizable spawn systems, character effects, integrated emotes, and even a built-in store button. Give your players the premium first impression they deserve.
What's Included
UM Multicharacter delivers a complete character management experience with technical sophistication under the hood. The core interface uses Vite build tooling for near-instant load times, Vue3's composition API for reactive UI updates, and Tailwind CSS for a clean modern aesthetic that's fully customizable. You're getting a photo mode system with filters and advanced camera controls, customizable spawn options that work with your existing spawn selector or auto-spawn at last location, character switching effects (both random and specific), rpemotes/dpemotes integration for character showcase animations, automatic slot management that assigns characters to available slots without manual configuration, an optional credits screen to highlight community contributors, store integration button for one-click access to your donation page, time and weather customization for atmospheric character selection, and intelligent UI that hides irrelevant buttons when not needed.
Modern Tech Stack - Why It Matters
The Vite + Vue3 + Tailwind combination isn't just buzzwords - it translates to real performance improvements your players feel immediately. Vite's hot module replacement means development and customization are blazingly fast if you want to adjust the interface. Vue3's reactive system ensures smooth animations and instant UI updates without janky reflows. Tailwind CSS makes styling changes simple through utility classes rather than wrestling with custom CSS. The result? Character selection loads in under a second, UI interactions feel responsive with no lag, customization doesn't require deep frontend knowledge, and the interface scales beautifully across different resolutions from 1080p to ultrawide displays.
Compare this to older character selectors built on jQuery or vanilla JavaScript with inline styles. Those systems suffer from slow load times as they parse bloated libraries, choppy animations because they manually manipulate the DOM, difficult customization requiring CSS archaeology, and broken layouts on non-standard resolutions. UM Multicharacter eliminates these frustrations with a modern foundation that's built for 2025+ FiveM development standards.
Photo Mode - Capture Your Character's Best Angle
The built-in photo mode transforms character selection from a functional screen into a creative showcase. Players can snap character portraits with pre-configured filters (black and white, sepia, vintage, vibrant, cinematic) or dive into advanced settings for complete camera control. Adjust field of view for dramatic close-ups or wide character shots, modify depth of field to blur backgrounds and focus on the character, control exposure and contrast for perfect lighting, and rotate the camera 360 degrees to find the perfect angle. These photos can be saved and used for character profiles, forum signatures, or Discord avatars.
Photo mode serves practical purposes too. Players getting screenshotted for identification can use photo mode to capture clear character images. Admins reviewing character appearance can request photo mode screenshots showing exact outfit details. Communities running character contests or fashion events have a built-in tool for submission creation. It elevates character creation from a mechanical process to an expressive activity.
Customizable Spawn System
UM Multicharacter adapts to your server's spawn philosophy rather than forcing one approach. Choose between three spawn modes: use your existing spawn selector menu integration for complete control, enable the default included spawn system for quick setup, or configure auto-spawn at last location so players resume exactly where they logged out. The system respects framework conventions - ESX coordinates work natively, QBCore buckets are handled properly, and logout positions save correctly across all frameworks.
This flexibility means you don't sacrifice existing spawn functionality to get a better character selector. Running a custom spawn selector with housing system integration? UM Multicharacter calls it seamlessly. Prefer simple last-location spawning for fast player deployment? Enable it in the config. Want players choosing from preset spawn points? The default system handles it. No forced workflow, no breaking existing systems.
Character Effects - Add Cinematic Flair
Trigger visual effects when players switch between characters to add polish and personality. Choose from random effect selection that surprises players with different transitions each time, or configure specific effects for individual characters (imagine a smoke effect for a firefighter character, or sparkles for a civilian character). Effects include particle systems, screen transitions, camera movements, and atmospheric changes that make character switching feel premium rather than mechanical.
Effects also serve as loading state indicators. While the character model loads and clothing applies, the effect masks the brief transition period, preventing players from seeing t-pose models or incomplete clothing loads. It's both aesthetic and functional design that improves perceived performance even when actual loading times are unchanged.
Animations & Scenario Integration
Integrate rpemotes or dpemotes seamlessly for character showcase animations during selection. Configure whether the system uses a specific animation for all characters (like a standing idle or confident pose) or randomizes from a selection of animations to add variety. Characters might lean against walls, check their phones, stretch, or perform other casual animations that bring them to life while players decide which character to use.
This integration prevents the awkward standing-perfectly-still default pose most character selectors display. Your characters look natural and alive, creating better first impressions and encouraging players to spend time in the character selector rather than rushing through it. The emote systems you already run for in-game roleplay extend to character selection automatically.
Automatic Slot Management
Forget manual slot assignment headaches. UM Multicharacter automatically assigns new characters to the first available slot as soon as they're created through your character creation system. Delete a character? The slot becomes available immediately for the next creation. No database editing, no config adjustments, no player confusion about which slot their character occupies. It just works.
This automation eliminates common support tickets about character slots not appearing, characters assigned to wrong slots, or slots becoming locked after deletions. The system tracks slot status dynamically and handles all assignment logic server-side, preventing client manipulation or desync issues that plague manual slot systems.
Credits Screen - Recognize Your Community
The optional credits screen lets you highlight server contributors, staff members, donors, developers, and community supporters in a professional rolling display. Similar to game credits, it creates a place to thank the people who make your server possible. Update the credits list through a simple config file - no UI editing required.
Use this feature to recognize monthly top donors, showcase your development team, thank beta testers for specific updates, highlight roleplay award winners, or feature community artists who created custom content. It builds community identity and makes contributors feel valued with public recognition every time players load their characters.
Store Integration Button
The built-in store button provides one-click access to your server's donation page, Tebex store, or Patreon. Players can browse cosmetic purchases, VIP tiers, or support options while waiting to join the server or switching characters. Configure the button URL in the config - it works with any web link.
This strategic placement increases store visibility without being intrusive. Players have natural downtime during character selection, making it perfect timing for browsing optional purchases. The implementation is tasteful - a simple button that doesn't interrupt the character selection flow but provides convenient access for interested players.
Time & Weather Customization
Set the perfect atmosphere for character selection by controlling time of day and weather conditions. Configure a specific time (golden hour sunset for dramatic lighting, midday for clear character visibility, night for moody atmosphere) or sync with the live server time. Similarly, set weather conditions (clear for showcasing outfits, overcast for cinematic mood, rain for atmospheric depth) or sync with current server weather.
These environmental controls let you establish visual branding for your server's character selector. A realistic RP server might use natural midday lighting with clear weather. A dark/gritty server might use night with fog. A tropical server could use sunset with scattered clouds. The character selector becomes an extension of your server's aesthetic identity.
Intelligent UI Logic
UM Multicharacter hides interface elements that aren't contextually relevant, creating a cleaner experience. The Create Character button only appears when the player has empty slots available - no confusion about why character creation isn't working when they're at max slots. The Change Character button disappears when players only have one character - why offer a choice when there's nothing to choose? This smart visibility reduces UI clutter and prevents player confusion.
The system also adapts button placement dynamically based on available options. Single character? Large prominent Play button. Multiple characters? Character grid with selection. Empty slots? Create Character takes prominence. The UI reorganizes itself to highlight the most relevant action for the current player state.
Framework & Clothing Compatibility
Frameworks:
- ✅ QBCore - Full native support with qb-multicharacter replacement capability
- ✅ QBOX - Complete compatibility with the modern QBCore fork
- ✅ ESX - Native esx-core integration for character management
Clothing Systems:
- ✅ illenium-appearance - Primary recommended clothing system with full feature support
- ✅ fivem-appearance - Legacy illenium version for QB/ESX (not AJ-appearance or default)
- ✅ qb-clothing - QBCore's native clothing system with complete integration
- ✅ skinchanger - ESX's traditional character appearance system
- ⚠️ Custom systems - Works if your system uses compatible event structures or can trigger clothing menus via events
Important: Custom clothing systems must support similar event structures or provide trigger-based clothing menu access. If your custom clothing doesn't fire compatible events, integration may require configuration adjustments or bridging code.
Perfect For
- Servers wanting professional first impressions with modern UI design
- Communities frustrated with slow, dated character selectors that feel clunky
- Admins who value easy customization without deep frontend development knowledge
- Roleplay servers wanting character showcase capabilities and photo opportunities
- Servers with donation systems that want tasteful store integration
- Communities that recognize and reward contributors through credits displays
Installation
- Extract um-multicharacter folder to your server resources directory
- Configure framework selection in config.lua (qbcore/qbox/esx)
- Configure clothing system in config.lua (illenium-appearance/fivem-appearance/qb-clothing/skinchanger/custom)
- Adjust spawn system preference (use existing spawn selector, default system, or last location)
- Customize photo mode filters, character effects, and animations to match your server aesthetic
- Add store button URL if integrating donation page access
- Configure credits list with your community contributors
- Set time/weather preferences for character selection environment
- Add ensure um-multicharacter to server.cfg
- Remove or disable old character selector (qb-multicharacter, esx-multicharacter, etc.)
- Restart server and test character creation, switching, deletion, and photo mode
Technical Specifications
- Performance: Vite-optimized bundle loads in under 1 second with lazy-loaded components for instant UI responsiveness
- Framework: Vue3 Composition API with reactive state management and efficient re-rendering
- Styling: Tailwind CSS utility-first approach with customizable theme configuration
- Build Tool: Vite for hot module replacement during development and optimized production builds
- Dependencies: Your chosen framework (ESX/QB/QBOX) and compatible clothing system
- Browser Support: Modern Chromium Embedded Framework used by FiveM - no legacy browser concerns
What Makes UM Multicharacter Stand Out
Most character selectors are afterthoughts - basic interfaces slapped together to meet minimum functionality. UM Multicharacter treats character selection as a critical first impression opportunity. The modern tech stack isn't just for developer bragging rights - it delivers measurable performance improvements and easier customization. Photo mode adds creative expression missing from utilitarian selectors. The smart UI logic that hides irrelevant buttons shows attention to user experience details most developers ignore.
The compatibility matrix is impressive - supporting three frameworks and four major clothing systems (plus custom options) required real architectural thought. Many character selectors hard-code assumptions about one framework or clothing system, making migration painful. UM Multicharacter's flexible design adapts to your existing infrastructure rather than demanding you rebuild around it.
Customization Potential
The Tailwind CSS foundation makes visual customization accessible even for non-designers. Want different colors? Adjust the Tailwind config color palette. Need different button styles? Modify utility classes. Prefer different fonts or spacing? Update the theme configuration. Changes propagate throughout the interface automatically thanks to the utility-first approach.
For deeper customization, the Vue3 component structure is modular and well-documented. Swap out the photo mode interface, add new character showcase features, integrate additional store sections, or create custom transition effects. The modern codebase welcomes modifications rather than fighting against them like legacy spaghetti code selectors.
Support & Updates
Comprehensive documentation covers installation for all framework combinations, clothing system configuration, spawn system integration, photo mode usage, and troubleshooting common issues. Active Discord community shares customization examples, aesthetic configurations, and photo mode filter presets. Regular updates maintain compatibility with framework updates and FiveM patches while adding community-requested features. You're investing in actively maintained software, not abandoned code.
Related ESX Scripts
