Install with the CLI

Add Shop Store 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 shop-store

First time? Start with the documentation.

Import

tsx

import { Shop Store } from "./src/client/ui/components/shop-store";

Usage

tsx

local ShopService = require(script.Parent.ShopService)
local Wallet = require(script.Parent.WalletService)
ShopService:AddItem({ id = "potion", name = "Potion", price = 50, currency = "Coins" })
ShopService:Checkout(Wallet.new({ Coins = 500 }))

Shop Store

TSX + LuauFree

Catalog + cart + checkout pipeline. ShopService holds items (price + currency), manages a cart (add/remove), computes totals, and calls wallet:Spend on checkout. ShopView renders a scrollable grid of listings with a sticky cart-total + Buy bar. Plug in any wallet implementing :Spend.

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