@repo/ui

@repo/ui is the shared UI package containing Preact components and utility functions designed specifically for FiveM NUI development.

Installation

Already included when you reference the workspace package:

package.json

{
  "dependencies": {
    "@repo/ui": "workspace:*"
  }
}

Package Exports

The package uses path-based exports:

{
  "exports": {
    "./components/*": "./src/components/*.tsx",
    "./utils/*": "./src/utils/*.ts"
  }
}

This means you import directly from subpaths:

import { Button } from '@repo/ui/components/button'
import { cn } from '@repo/ui/utils/cn'
import { fetchNui } from '@repo/ui/utils/fetch'
import { useEvent } from '@repo/ui/utils/useEvent'
import { useValidatedEvent } from '@repo/ui/utils/useValidatedEvent'
import { expose, initExposes } from '@repo/ui/utils/expose'

Components

Button

A basic styled button component using Tailwind CSS classes.

import { Button } from '@repo/ui/components/button'

function App() {
  return <Button>Click me</Button>
}

The Button component accepts PropsWithChildren and renders a styled <button> element with zinc colors, rounded corners, and a smooth transition.

Source

import type { PropsWithChildren } from 'preact/compat'

export function Button({ children }: PropsWithChildren) {
  return (
    <button className="bg-zinc-200 text-zinc-800 font-medium px-4 py-1.5 rounded transition-all duration-500">
      {children}
    </button>
  )
}

Utilities

This package also includes several utility functions and hooks for NUI development. See the Utilities section for detailed documentation on each utility:

cn — Tailwind class merging with clsx + tailwind-merge
fetchNui — Send NUI callbacks to the Lua client
useEvent — Listen for NUI messages from Lua
useValidatedEvent — Type-safe NUI events with Zod validation
expose — Expose JS functions callable from Lua

Dependencies

Dependency	Purpose
`preact`	UI rendering
`clsx`	Conditional class names
`tailwind-merge`	Intelligent Tailwind class merging
`zod`	Runtime schema validation