Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Referral Reward Notification Block for Vue

A fitness app's referral ladder: a progress bar with ticks at 1, 3 and 5 friends, the credit earned as a rolling figure, three rungs marked Reached or Next, and an invite link and message you can copy.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn a referral program into a ladder people can see themselves climb with this reward notice for Vue with Ark UI. It is Rallymoor, a fitness app, in a hairline frame with plus marks at its corners. The first band shows "3 of 5 friends joined" with the credit earned, $45, as a rolling figure, over a Progress bar with ticks at 1, 3 and 5 friends and three rungs that say Reached or Next in words with their reward. The second band holds the invite link in a read-only field with a Copy Button. Invite more, the one Shine Button, copies a typed message to the real clipboard. For referral programs, loyalty ladders and invite screens.

FAQ

How do I use my own program?

Edit JOINED, GOAL, PER_FRIEND (dollars), RUNGS (friends needed and reward), LINK and MESSAGE. The credit earned, the bar, the ticks and the next rung are worked out from them.

How are the rungs told apart without colour?

A reached rung has a check and the word Reached with a heavier outline, the next one says Next and the rest say Locked. The bar is a solid fill with solid ticks, and its label reads "3 of 5 friends joined".

What do the copy buttons copy?

The small button copies the full link (https://rallymoor.example/join/dana-4k7q) and Invite more copies a typed message that includes it, both to the real clipboard, with a status line saying which. If the clipboard is blocked the message says to copy by hand.

What stays local, and how do I wire it for real?

The friends who joined and the credit are typed, and no one is invited by pressing anything here. In your app load the counts from your referral API and build the link per user; show the next rung from the response.

How does it look on a phone?

The three rungs stack in one column, the link field fills the width and the foot with the status line and Invite more stays pinned to the bottom of the screen.

All 100 notification blocks