shadcn.io is not affiliated with official shadcn/ui
Bold Statement About Block for React Aria
A bold statement for a furniture marketplace: one sentence in display type with a phrase picked out by a drawing marker on a faded field of dots, and three one-word commitments in a band ruled from rail to rail.
Installation
Overview
A bold statement for React with React Aria, written for Slowcraft, a fictional marketplace for furniture from makers who repair what they sell. One sentence in display type, centred, is the section's heading, and the phrase that carries it, "outlast its first owner", is marked by a pale highlighter that draws across it once on load. Behind it a field of small dots fades out toward the edges. A short line under the sentence says what the stance means for sellers. Under that, a band ruled from rail to rail holds three one-word commitments (Repairable, Traceable, Returnable), each with a sentence that backs it up, side by side from sm and one per row on a phone. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack, and it ends on the band, never on a second rule. It's built from Guides, Highlight Text and Dot Pattern, with a CSS entrance and your theme's tokens for every colour. For marketplaces, makers and any brand that wants one sentence to carry the whole page.
FAQ
How do I change the statement and the commitments?
The statement is the h2 in the component; the phrase to mark is the text prop of the HighlightText inside it, so keep the sentence short enough for two lines at display size. The commitments are COMMITMENTS at the top of the file: each has a one-word word and a detail sentence. Keep three, which is what the band's three columns are sized for.
Why is the marker grey and not the primary colour?
The primary colour marks one action per block, and this block has no action. The marker is your foreground colour at 12%, so it reads on a light and a dark theme and keeps the text above it at full contrast. Change MARKER at the top of the file to use another colour.
Do the dots move or react to the pointer?
No. The Dot Pattern is set to be still: its wave is off and it doesn't light up near the pointer, so nothing competes with the sentence. The dots are drawn at 15% of the muted text colour and fade out toward the edges, which keeps the text on them above AA contrast.
How is it read by a screen reader?
The sentence is the section's only h2, read as one sentence: the marker is a background, not a separate element. The commitments are a list, each word an h3 followed by its sentence. The dots and the lines are decorative and hidden from assistive technology.