shadcn.io is not affiliated with official shadcn/ui
Statement With Rule Log About Block for React
A 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.
Installation
Overview
A statement with its proof for React with Base UI, written for Minutefold, a fictional calendar app. At the start of a split, the statement is the section's heading, "We ship what gives people minutes back", with the rule that backs it: a feature ships only if it saves the person using it more time than it costs them. At the end, past a divider, a log applies the rule to five proposals: each row has the proposal, a Shipped or Cut badge, the minutes a week it saves or costs, and one line on why. The verdict isn't typed: a proposal ships when its net minutes are positive, and the count in the log's heading is computed from the same list, so the log can't disagree with the rule. Cut proposals are struck through and carry a different badge and an icon, so the verdict never rests on colour. The rows run from the divider to the end rail, ruled by hairlines, and the block ends on the last row. The page's rails and top rule come from the Guides spine. It's built from Guides and Badge, with a CSS entrance and your theme's tokens for every colour. For product principles, engineering handbooks and any about page whose rule is worth showing in use. The minutes are example data.
FAQ
How do I change the proposals?
Edit LOG at the top of the file: each entry has a title, a signed minutes figure (minutes a week saved, negative when it costs) and a reason. The verdict, the sign on the figure and the shipped and cut counts in the heading all come from minutes, so you only edit one number per row.
What decides Shipped or Cut?
The sign of minutes: above zero ships, zero or below is cut. It's one function, shipped, at the top of the file. If your rule is different (a threshold, a weighted score), change that function and the rows follow.
How is the log read by a screen reader?
The log is an ordered list under an h3, "The rule, applied", and each proposal is an h4 followed by its badge, its figure and its reason. The strikethrough on a cut proposal is a style, so the verdict is read from the badge's word, "Cut", and the figure's sign, which is a real minus character.
Does it work in a right-to-left layout?
Yes. The split, the divider and the badges follow the page direction, and each signed figure is wrapped so its sign and number keep their order.
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
Horizon Vision Statement About
StatementsA vision statement for a climate-data company as a horizon: the vision is the centred heading, and three stations on one hairline (Now, In three years, In ten years) each say what is true by then.
- Pro
Receipt Accordion Pricing Philosophy
Principles and processA pricing-philosophy section for a usage-billing company: four promises as accordion rows, each opening to a receipt whose lines, averages and cap are computed from the same numbers.
- Pro
Situation Tabs Operating Principles
Principles and processAn operating-principles section for an accounting-automation company: line tabs by situation, and under them the open situation's three rules as hairline rows, each with the question we ask.
- 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
Added Removed Diff List Features
App screensA unified diff of one config file in a hairline frame, with + and - gutters in foreground weights, one caption beside each hunk, folded runs of unchanged lines that open in place, and a footer counting the changes.