Tabular Value

Keep changing numeric values aligned with tabular figures.

@sigil-ui/componentsReact

Preview

import { Stack, TabularValue } from "@sigil-ui/components";

<Stack gap="var(--s-space-8)"><TabularValue size="xl">$12,840.00</TabularValue><TabularValue muted>+1,280.50 this month</TabularValue></Stack>

Prop	Type	Default	Description
`size`	`TabularValueSize`	`sm`	Size preset.
`as`	`"span" \| "div" \| "td" \| "p" \| "dd" \| "time"`	`span`	Render as a different element.
`muted`	`boolean`	`false`	Muted text color.

AccentCTA

Highlight a next step with a compact message and action.

FeaturedGrid

Give featured content extra emphasis within a grid.