Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Graph Grid Paper CTA Block for React Aria

A statement call to action on graph paper: the page column is the sheet, with a staircase of filled cells rising from one corner, a Shine Button, a ghost link, and a closing band with the version, the install command and the licence.

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 call to action on graph paper for React with React Aria. The page column between the rails is the sheet: fine grid lines in the foreground colour fade out toward the edges, and a staircase of filled cells climbs from the bottom corner on the copy's start side, one cell taller each step, as if a chart were drawn in the margin. Over it sit a centred headline, a line about Harbor SDK, a Shine Button and an outline link. A closing band of three cells under a hairline holds the version with a status dot, the install command in a mono line, and the licence. It's built from Grid Pattern, Guides, Status, Shine Button and Button. For SDKs, libraries and developer tools.

FAQ

How do I change the staircase?

Pass different cells to squares on GridPattern: each is [column, row] counted from the grid's corner, and this block's list is kept at the top of the file. The grid is flipped so rows count up from the bottom. cellSize sets the cell, squareColor the fill and lineColor the lines. Both are mixes of the foreground colour, so the paper reads in a light theme and in a dark one.

Why is the grid fading and the staircase still showing?

A two-part mask: one radial gradient fades the grid out toward the edges, a second keeps the corner where the staircase stands visible. On a phone the corner is smaller, so the steps stay clear of the text.

How is the closing band drawn?

Its top rule and the + marks on its ends come from a Guides with rules="top" and no sides, and the cells are split by divide-x from sm up (rows with divide-y on a phone). It closes the block, so the column has no bottom padding, and the next block's top rule is the block's bottom edge.

Does anything move?

Only the content's entrance, a fade up that turns off with reduced motion. The grid is a static SVG pattern and the staircase is still.

Does it work right to left?

Yes. The paper layer is mirrored with rtl:-scale-x-100, so the staircase moves to the other corner with the copy's inline start.

Is the install command copyable?

It is plain text in a code element you can select. For a copy button, replace it with a Clipboard and CopyButton, as the dark install command hero does. The package name is fictional.

All 100 cta blocks