shadcn.io is not affiliated with official shadcn/ui
Bold Statement About Block for React
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 Base UI, 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.
Related
- Pro
Mission About
StatementsA mission statement for a home-care scheduling company: the mission in large type beside one supporting sentence, three pillars that each carry the figure they are checked by, and a founding line in relative time.
- Pro
Glow Headline About
StatementsA claim from the founders of a solar installer's software: one sentence in display type on a soft monochrome glow, signed with their initials and "since Year 1", over a band of three figures divided by hairlines.
- Pro
Manifesto About
StatementsA manifesto for a maker-tools company: five large "We believe X, not Y" lines, the rejected idea struck through, each on a band ruled from rail to rail with a quiet proof, and a closing line.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Centered CTA Dotted Background Hero
BackdropsA showcase centered hero on a dot grid framed by hairlines: the dots light up near the pointer, with a release pill, a display headline, a Shine Button and an outline button.
- Pro
Large Quote Testimonial
One big quoteAn oversized quote whose type scales with its own container, in a band with the attribution running vertically in a rail at the end edge.