Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Manifesto About Block for Svelte

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.

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 manifesto for Svelte with Ark 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.

How does it fit on a phone?

The statements step down from text-3xl to text-2xl and wrap freely, the numbers stay at the start and the proof sits under each line. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the numbers and the strikethrough follow the reading direction.

What moves, and what happens with reduced motion?

The heading and the list fade up once on load, with CSS transitions, and with reduced motion they appear at once. There is no state or script, so the block renders on the server.

All 150 about blocks