shadcn.io is not affiliated with official shadcn/ui
Sticky Headline Six Point Features Block for Vue
Six engineering principles as automated checks: a sticky header with a live tally of passing checks beside a two-by-three of cells, each with its check line.
Installation
Overview
A six-point feature section for Vue with Ark UI. A start column with the headline, one sentence and a tally ("6 of 6 checks passing", counted from the six checks, with a badge for the time of the last run from sm) stays in view from lg beside a two-by-three of principle cells. Each cell is drawn with lines that overshoot its corners and sits apart from its neighbours, and holds a principle, a sentence and a check line: the check's name in code, its status and when it last ran. It's built from Guides, Sliding Number, Status and Badge, with CSS for the entrance and your theme's tokens for every colour. For engineering handbooks, platform and security teams and any set of rules that a tool can actually enforce.
FAQ
How do I change the principles?
Edit PRINCIPLES at the top of the file: each has a title, a description, a check (the name shown in code), the minutes since it ran and an id. The tally counts the entries, so adding a principle changes "of 6" without another edit.
Does the number count up?
The figure is a Sliding Number: it renders its real value on the server and the first paint, and rolls its digits only when the value changes. It never starts from zero, so a page without scripts still says "6".
What does the status dot mean?
It is a small dot in the foreground colour beside the word "passing", so the state is in text and the dot is only decoration. Use a status colour only for a check that fails, which is the one time colour carries meaning here.
Is the header really pinned?
From lg the header's content is sticky below the top of the viewport. The cells are taller than the header, so it waits in place while you scroll past the last row. Below lg the header simply comes first.