Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Storefront Block Loyalty
Storefront hero with loyalty rewards program showcase and points tracker
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Highlight your loyalty program with this rewards-focused storefront hero. Features the user's current points balance, tier status with progress to next level, available rewards to redeem, and ways to earn more points. Built with shadcn/ui Card, Button, Badge, Progress, and Separator components. The clean design gamifies the shopping experience while driving engagement—perfect for fashion retailers, beauty brands, or any e-commerce store with a loyalty program.
Your Rewards
Points Balance
2,450
Current Tier
Gold
GoldRedeem Rewards
$10 Off
Any purchase over $50
$25 Off
Any purchase over $100
Free Shipping
On your next order
Ways to Earn
Shop
1 point per $1 spent
Review
50 points per review
Refer
500 points per referral
Installation
Related blocks you will also like
React Storefront Block Featured Product
Single product showcase
React Storefront Block Seasonal Sale
Promo code and deals
React Storefront Block Personalized
Personalized recommendations
React Storefront Block Gift Finder
Gift recommendation quiz
React Storefront Block Bundles
Product bundle builder
React Storefront Block Store Locator
Find nearby stores