@de-adlock/ui

Modern React component library for FiveM with built-in theme management and gaming-specific components.

Installation

npm install @de-adlock/ui
# or
yarn add @de-adlock/ui
# or
pnpm add @de-adlock/ui

Quick Start

import { Button, Input, Window, ThemeProvider } from '@de-adlock/ui'
import '@de-adlock/ui/styles'

function App() {
  return (
    <ThemeProvider>
      <Window title="Game Menu" variant="glass" size="md">
        <Input 
          type="text" 
          label="Character Name" 
          placeholder="Enter name..." 
          autoIcon={true}
        />
        <Button variant="primary" glow>
          Create Character
        </Button>
      </Window>
    </ThemeProvider>
  )
}

FiveM Integration

For automatic theme synchronization with the dl-ui FiveM resource:

import { FiveMThemeProvider } from '@de-adlock/ui'
import '@de-adlock/ui/styles'

function App() {
  return (
    <FiveMThemeProvider>
      {/* Your app - theme will auto-sync with player's selection */}
    </FiveMThemeProvider>
  )
}

Complete Component List

Input Components

• Input - All HTML5 input types with auto-icons (text, email, password, search, url, tel, number, date, time, etc.)
• Textarea - Auto-resizing multi-line text input
• Select - Single/Multi select dropdown with search functionality
• FileInput - Drag & drop file upload with preview
• Range - Customizable slider with value display
• ColorPicker - Advanced color selection tool
• Checkbox - Styled checkbox input
• Radio - Radio button groups
• Toggle - iOS-style toggle switch

UI Components

• Button - 10+ variants (primary, secondary, success, error, warning, ghost, outline, glass, etc.)
• Card - Content container with hover effects
• ActionCard - Gaming menu cards with icons
• Window - Modal/Dialog with glass morphism
• Modal - Centered modal overlay
• Dialog - Confirmation dialogs

Feedback Components

• Toast & ToastContainer - Notification system
• Alert - Inline alert messages
• Badge - Status/count badges
• Tooltip - Smart hover tooltips
• WelcomeNotification - Animated welcome messages

Data Components

• Table - Sortable data tables
• Pagination - Page navigation
• Bar - Progress/Health/XP/Skill bars
• Avatar & AvatarGroup - User avatars

Layout Components

• Tabs - Tab navigation with pills variant
• Accordion - Collapsible content sections
• Sidebar - Navigation sidebar with icons

Gaming-Specific Templates

• CharacterCreation - Complete character creator with attributes
• InventorySystem - Item management with categories
• ThemeEditor - Live theme customization
• BarDemo - Gaming bars showcase
• ControlsDemo - Form controls showcase
• LayoutDemo - Layout components showcase
• FeedbackDemo - Feedback components showcase
• DataDemo - Data display showcase

Theming

The library comes with 5 stunning built-in themes:

🎮 Built-in Themes

• neon - Cyberpunk style with vibrant pink/cyan
• sakura - Japanese cherry blossom pink theme
• midnight - Deep blue/purple night theme
• aurora - Northern lights cyan/purple
• forest - Nature-inspired green theme

Custom Themes

import { createTheme, ThemeProvider } from '@deadlock/ui'

const myTheme = createTheme({
  name: 'my-theme',
  colors: {
    primary: '#ff0000',
    secondary: '#00ff00',
    // ... other colors
  }
})

function App() {
  return (
    <ThemeProvider defaultTheme={myTheme}>
      {/* Your app */}
    </ThemeProvider>
  )
}

TypeScript Support

Full TypeScript support with exported types for all components and themes.

import type { ButtonProps, Theme } from '@deadlock/ui'

License

MIT © Deadlock

Links

• GitHub Repository
• FiveM Resource
• Documentation