shadcn/ui for FiveM — a React component library built for NUI, targeting CEF V103 (Chromium 103).
FiveM’s in-game browser is stuck on an older Chromium build. This kit keeps the shadcn look and API while staying compatible with that runtime (browserslist: chrome >= 103). Use it in React NUI apps instead of pulling upstream shadcn / Radix stacks that assume a modern browser.
Playground: nafing.github.io/nf_shadcn
- React 18+ (peer dependency)
- FiveM NUI / CEF V103 (or any Chromium ≥ 103 for local playground)
import {
Button,
Dialog,
DialogContent,
DialogTrigger,
ThemeProvider,
nuiTheme,
} from "@nf_shadcn/ui";
import "@nf_shadcn/ui/theme.css";
function App() {
return (
<ThemeProvider {...nuiTheme}>
{/* your NUI */}
</ThemeProvider>
);
}nuiTheme matches the NF resource look (nf_multicharacters / nf_spawn / nf_skin): green teal #1d8571, Oswald/Barlow, glass panels. Default CSS in theme.css stays the cyan kit — override with nuiTheme or your own vars / dark / light.
ThemeProvider toggles dark / light on <html> (plus system via prefers-color-scheme). CSS tokens:
-
vars— always applied (radius, fonts, …) -
dark/light— per-mode overrides -
useTheme().setVars({ primary: "…" })— runtime overrides (e.g. from Lua); passnullto clear
Keys are token names without -- (primary → --primary). Put class="dark" on <html> if you want dark tokens before React mounts.
pnpm add @nf_shadcn/ui
# or: npm i @nf_shadcn/uitheme.css sets design tokens (--foreground, --border, --ring, …). Component styles load with the JS bundle.
React and React DOM are peer dependencies — the package does not bundle them.
pnpm install
pnpm dev # playground (browser)
pnpm build # dist/ library for npm / NUI
pnpm build:playground # static playground → playground-dist/Pushing to main deploys the playground. One-time: Settings → Pages → Source: GitHub Actions.
Requires the npm org nf_shadcn (create org) — otherwise you get Scope not found.
pnpm publish --access publicGitHub Packages (repo sidebar): workflow publishes @nafing/nf_shadcn on push to main. After the first run, set visibility to Public in package settings if needed.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Alert,
AlertAction,
AlertDescription,
AlertTitle,
alertVariants,
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
AspectRatio,
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentGroup,
AttachmentMedia,
AttachmentTitle,
AttachmentTrigger,
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
Badge,
badgeVariants,
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
Button,
buttonVariants,
Calendar,
CalendarDayButton,
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
Checkbox,
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
Command,
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
Field,
FieldContent,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldTitle,
Input,
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuGroup,
ContextMenuItem,
ContextMenuLabel,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
Kbd,
KbdGroup,
Label,
HoverCard,
HoverCardContent,
HoverCardTrigger,
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
Progress,
ProgressLabel,
ProgressValue,
Questionnaire,
QuestionnaireActions,
QuestionnaireChoice,
QuestionnaireChoices,
QuestionnaireDescription,
QuestionnaireError,
QuestionnaireInput,
QuestionnaireItem,
QuestionnaireNext,
QuestionnairePrevious,
QuestionnaireProgress,
QuestionnaireSkip,
QuestionnaireSubmit,
QuestionnaireTitle,
RadioGroup,
RadioGroupItem,
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
ScrollArea,
ScrollBar,
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
Separator,
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
useSidebar,
Slider,
Spinner,
Switch,
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
tabsListVariants,
Textarea,
ThemeProvider,
useTheme,
nuiTheme,
Toggle,
toggleVariants,
ToggleGroup,
ToggleGroupItem,
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
cn,
} from "@nf_shadcn/ui";
import "@nf_shadcn/ui/theme.css";