Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Account blocks

Pro

Rewards Account Block for Svelte

Storage rewards for securing an account as six hairline cells, each Done with a Claim button, Claimed or Not yet, with a derived total and bar that rise when you claim and a closed list of what is claimed.

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

Reward people for locking down their account with this rewards panel for Svelte with Ark UI. A compact header holds the title and one sentence. Inside a hairline frame a band shows the total earned so far against the total available, such as 250 MB earned of 3.75 GB, with a thin bar and the number ready to claim. Six hairline cells list the rewards: turn on two-factor, add a passkey, verify your phone, review your sign-ins, add a recovery method and link a sign-in. Each shows its size, a line about it and either Not yet with how to do it, Done with a Claim button, or Claimed. Claiming adds it to a closed Collapsible of claimed rewards, raises the total and moves focus to the next Claim. It is built from Button, Badge, Collapsible and Guides, with a CSS entrance only. For the account page of any app that gives storage or credit for security steps.

FAQ

How do I change the rewards?

Edit REWARDS: each has an id, a title, the storage mb it earns, whether it is done and a hint for how to do it. START lists the rewards already claimed with their ISO day. The totals, the bar and the ready count are all worked out from these two lists.

What does Claim do?

It marks the reward claimed on the as-of day, adds it to the Claimed list, raises the total and writes the result in the status line. Focus moves to the next Claim button, or to the Claimed heading when none is left. No storage is added: the count is the demo's own.

How are sizes shown?

As MB under a gigabyte and GB from there, without the browser's number formatting, so 1,250 MB reads 1.25 GB the same everywhere. Each amount sits in an isolated span so it reads correctly right to left.

What stays local in the demo?

The claims. They change the page's state and say that no storage was added. In your app call your server in claim and read the new quota back.

Is it accessible?

The cells are a list, every Claim button is named with its size and reward, and the state is a word as well as a badge. The Claimed disclosure reports whether it is open, and the status line is a polite live region. The Collapsible is controlled with its open state.

How does it look on a phone?

The six cells stack one across, each keeping its size, line and state, with the total band on top.

All 100 account blocks