Ruled Band
A hairline-bounded editorial strip with mono-label ends — changelog and serial-number furniture.
- Status
- Since
0.3.0- Accessibility pattern
- presentational page furniture
Last updated
Install
Add Ruled Band from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/ruled-bandUsage
<RuledBand>
<RuledBandLabel className="uppercase">Changelog / 2026</RuledBandLabel>
<RuledBandLabel className="uppercase">39 updates</RuledBandLabel>
</RuledBand>Voice
RuledBandLabel bakes in the mono-label voice; uppercase stays call-site-applied because
uppercase is mono-exclusive (D20). Use for editorial meta — dates, counts, serials, section
codes — not for interactive headers (that's PageHeader).
Anatomy
Ruled Band is a compound component. Every exported part, with the
data-slot it renders (generated from the canonical source):
Examples
Bracketing a section
rule="top" opens a passage and rule="bottom" closes it, so the band works as editorial
furniture around content rather than as a lone strip.
Pulled, never pushed
Downstream projects ask the registry what changed and take the diff deliberately — the band brackets the passage without a heading rule of its own.
API Reference
RuledBand
| Prop | Type | Default | Description |
|---|---|---|---|
rule | "both" | "bottom" | "top" | 'both' | Which edges carry the rule. |
Data attributes and CSS variables on RuledBand
| Attribute | Values |
|---|---|
data-rule | mirrors a prop or state value |
data-slot | "ruled-band" |
RuledBandLabel
RuledBandLabel accepts the native props, className, and ref of its underlying <span>.
Accessibility
- The band is presentational page furniture and adds no landmark or heading semantics.
- Labels are real text in document order; use a heading outside the band when it introduces a section.
- Uppercase content remains in the named mono-label role at a readable 12px floor.
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default |