shadcn.io is not affiliated with official shadcn/ui
Philosophy About Block for React Aria
A 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.
Installation
Overview
A philosophy section for React with React Aria, written for Calmgrove, a fictional meditation app that tries to keep you out of itself. The block is a split on a solid divider. At the start, the heading, one line of context and a single pull quote, a founder's sentence set large with her name under it; on wide screens that column sticks to the top of the viewport while the beliefs scroll past it. At the end, five beliefs in an ordered list: a two-digit number, a title and a paragraph each, with a rule between rows that meets the divider and the page rail in + marks. On a phone nothing sticks: the heading, the quote and then the beliefs stack in that order, with one rule between the quote and the list. 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, handbooks and any company that has a few beliefs worth a paragraph each.
FAQ
How do I change the beliefs and the quote?
The beliefs are BELIEFS at the top of the file: each has an id, a title and a text. The numbers are drawn from the row's position, so adding or removing a belief renumbers the list. The quote and its author are plain text in the start column. Five beliefs fill the end column about as tall as the quote's column needs; with many more, the quote simply stays in view for longer.
How does the quote stay in view?
The start column's content is position: sticky from the lg breakpoint, a little below the top of the viewport, inside a cell that is as tall as the list. It needs no script. Below lg the class does not apply, so the quote scrolls with the page and comes right after the heading, before the beliefs.
How is it read by a screen reader?
The heading is the section's h2, the quote is a figure with a blockquote and its author as the figcaption, and the beliefs are an ordered list where each title is an h3. The big numbers are decoration: the list itself carries the order, so a reader hears "list, 5 items" and the titles in sequence.
Why are there no dates or years?
A year goes stale the day a page ships. The beliefs are written to stay true, and the quote is credited to a role in the handbook rather than to a date. If you want one, add it to the figcaption in a time element.
How does it fit on a phone?
The heading steps down to text-3xl, the quote stays large but wraps, and the beliefs become full-width rows with the number at the start. The rule between rows still ends at the rails. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the number stays at the start of each row.