Components

Visual

Small data pictures that replace sentences with shapes. Token colours only, never accent.

bunx shadcn@latest add @nalarx/visual

Every picture is decorative: show the number in text as well. Colours take token strings (var(--chart-2)), never hex.

Dot

Sparkline and MiniBars

Meter and SplitBar

Ring and IconTile

OK

OK

StatTile and StatStrip

Net sales

Rp 1,2 jt

vs last month

Open tasks

18

3 overdue

Coverage

92%

Net sales

Rp 1,2 jt

vs last month

Open tasks

18

3 overdue

Coverage

92%

Exports

Export	Main props
`Dot`	`tone`, `size`
`Sparkline`	`values`, `width`, `height`, `color`, `fill`
`Meter`	`value`, `max`, `color`, `height`
`SplitBar`	`parts: { value, color }[]`, `height`
`Ring`	`pct`, `size`, `color`, `children`
`MiniBars`	`values`, `width`, `height`, `color`
`IconTile`	`name`, `size`
`StatTile`	`label`, `value`, `sub`, `visual`, `icon`
`StatStrip`	`min` (px per tile before wrapping)

Replaces

Visual.tsx (web). The Platform's own copies and NxIconTile.

Disclosure

A native details element whose content slides open.

Connector tile

A brand-coloured monogram square for a connector without a logo.

On this page

Dot Sparkline and MiniBars Meter and SplitBar Ring and IconTile StatTile and StatStrip Exports Replaces