Install with the CLI

Add Loot Box / Gacha to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add loot-box-gacha

First time? Start with the documentation.

Import

tsx

import { Loot Box / Gacha } from "./src/client/ui/components/loot-box-gacha";

Usage

tsx

local GachaService = require(script.Parent.GachaService)
local machine = GachaService.new({
  { id = "common", rarity = "common", weight = 70 },
  { id = "rare", rarity = "rare", weight = 25 },
  { id = "legendary", rarity = "legendary", weight = 5 },
}, 50)
local won = machine:Pull()

Loot Box / Gacha

TSX + LuauFree

Weighted-RNG pull engine with pity. GachaService takes a weighted pool and a pity threshold — after N pulls without a rare+ drop, the next pull is forced to rare or better. Tracks pull history. RevealModal tweens in a rarity-colored card (Back easing) with the item icon, name, and rarity banner.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Inventory
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl