shadcn.io is not affiliated with official shadcn/ui
Manifesto About Block for React
A 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.
Installation
Overview
A manifesto for React with Base UI, written for Forgemark, a fictional design-to-workshop app for woodworkers and metalworkers. A start-aligned heading and one sentence introduce five beliefs, each set as one large line: "We believe in" and a bold belief, then ", not" and the idea it replaces with a line through it. Each belief is a band ruled from rail to rail with + marks where it meets the page's rails; at the end of a wide band a small muted proof says how the belief shows in the product, and on a phone the proof drops under the line. A closing line sits in a last band, so the block ends on content. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. For about pages and company handbooks that want a clear position, with the receipts next to it.
FAQ
How do I change the beliefs?
Edit BELIEFS at the top of the file. Each entry has a belief (the bold phrase), the rejected idea that is struck through, and the proof line. The words "We believe in" and ", not" are in the markup, so write the phrases to follow them: "a tool should be finished" would need "We believe in" changed to "We believe".
How does the strikethrough read for a screen reader?
The line is a real del element, but the meaning does not depend on it being announced: the sentence says "We believe in owning the tool you paid for, not renting your own work back", so the word "not" carries the contrast. The line through the text is only drawn. Each statement is an h3, so the outline lists the beliefs.
Why does each belief have a proof?
A belief that costs nothing is only a slogan. The small line at the end of each band points at something the product does, so the claim can be checked. Delete the proof lines and the bands become a plain list of statements; the grid collapses to two columns on its own.
Why does the block end on a sentence?
Every block draws only its top rule: the next block's top rule is this one's bottom edge. A band with only empty space under it would read as a second rule just above it. The closing line gives the last band content, so nothing doubles.
Related
- Pro
Philosophy About
StatementsA philosophy section for a meditation app: a heading and one pull quote that stays in view at the start, beside five numbered beliefs, each a short title and a paragraph, ruled from a solid divider to the rail.
- Pro
Bold Statement About
StatementsA 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.
- Pro
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.
- Pro
Mission Pillars About
StatementsA mission held up by four pillars for a civic-software company: cells that share their hairlines, each with its numeral, a sentence, three initiatives with shipped and in-progress marks, and a progress bar counted from the list.
- Pro
Statement With Rule Log About
StatementsA statement for a calendar app beside its rule applied: five proposals in a ruled log, each with the minutes a week it saves or costs, and a Shipped or Cut verdict computed from that number.
- 01020304Pro
Manifesto Quad Grid Features
Headline-ledA centred manifesto feature section for a deploy tool: a statement over a full-width two-by-two of numbered principles, each written as what you give up against what you get, crossing at one plus mark.