Install with the CLI

Add Shop Listing Card 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-listing

First time? Start with the documentation.

Import

tsx

import { Shop Listing Card } from "./src/client/ui/components/shop-listing";

Usage

tsx

<ShopListing image="rbxassetid://..." name="Iron Sword" price={150} originalPrice={200} onBuy={() => print("Purchased!")} />

Shop Listing Card

TSX + LuauFree

A vertical shop item card with image, name, price display (with discount styling), rarity border, and purchase button. Scales responsively.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Inventory
Dependencies	@rbxts/react
Theme Tokens	colors.bgSecondary, colors.bgTertiary, colors.textPrimary, colors.accent, colors.textMuted, colors.primary, radius.md, radius.lg