Componentsboth tiers
The shadcn tier as installed from the registry, rendering in jsp-ds tokens through the bridge, and the JSP tier written in token vocabulary. Switch mode at the foot of the side nav: everything flips.
Library- shadcn tier
- registry/ui
- JSP tier
- registry/jsp
- Untouched
shadcn files match their install hash; fixes go in overrides.css with an issue.
- Bridged
They read shadcn's variable names, which the bridge points at tokens.
- JSP tier
Layout and type components that use token utilities only.
Button
shadcn tierBadge and Avatar
shadcn tierCard
shadcn tierBody copy inside a card uses --muted-foreground, which is text.subtle.
Form controls
shadcn tierBorder is --input (border.default), focus ring is --ring (focus.ring).
Alert and Tabs
shadcn tierActive tab fill is --background on a --muted list.
Overlays
shadcn tierAccordion, Table and Separator
shadcn tier| Variable | Token |
|---|---|
| --border | color.border.subtle |
| --input | color.border.default |
Text styles
JSP tierThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
const bridge = var(--ds-color-surface-page)
SectionHeader, Eyebrow, Stack and Cluster
JSP tierEyebrow
A section heading
A lead paragraph in body.lead and text.subtle, capped at the prose width.
Centred
Everything centres, including actions.
Cluster
wrapsbydefault