Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Perk Wallet About Block for Ark UI

An about section for a wellness-benefits company: eight perks in shared hairlines, each with a yearly amount, and a heading that is their sum.

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

A perk wallet for React with Ark UI, written for Wellbound, a fictional wellness-benefits company. A centred heading states what the perks are worth in a year, and that figure is the sum of the eight cells under it. Each cell is a name, one sentence, a category badge and the yearly amount, in shared hairlines that run from rail to rail: four across on a wide screen, two on a phone. There are no icons. The band ends the block, so it does not draw a second rule above the next block. The page's rails and top rule come from the Guides spine. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For a careers page that would rather show the money than a list of benefit names. The amounts are example data for one person.

FAQ

How do I change the perks?

The perks are PERKS at the top of the file. Each has a name, a detail, a kind (the badge) and an amount in dollars per year. Add or remove rows freely: the grid, the badge and the heading's total are drawn from the array. Keep an even count if you want every row full at two and four columns.

Where does the heading's total come from?

TOTAL is the sum of every perk's amount, and both the heading and each cell format that number with the same dollars helper. Change an amount and the heading changes with it. The sentence under the heading calls the figures example data.

How is it read by a screen reader?

The heading is the section's only h2. The cells are a list, and the list is named with the count and the total. Each perk's name is an h3, the category is a badge, and the amount is text after the sentence. The lines are drawn by a layer hidden from assistive technology.

How does it fit on a phone?

The grid is two columns from the narrowest width and four from lg. Names and sentences wrap inside the cell, and the badge sits under the name so it does not compete with it for width. Nothing scrolls sideways at 320 pixels.

Why are there no icons?

The amount is the point of the cell. An icon beside a dollar figure asks the reader to decode a picture before they can add the wallet up, so the category is a word in a badge instead.

What moves, and what happens with reduced motion?

The heading and the grid fade up once on load. With reduced motion they simply appear. The block has no state and no script, so it can render on the server, and nothing loops.

All 150 about blocks