UI component galleryv1
Build any interface with plain nib
Copy-paste examples — every one rendered live by the engine, dark-mode aware, and self-contained. Open a category, press Code, copy, ship.
Config recipes
Named patterns from your configuration. Use them as bare tokens like nib="btn-primary", and switch the variants to see the rules change live.
Avatar
A circular user image or initial.
size:
Avatar Preview
nib="w=40px; h=40px; bdrd=999px; bgc=$color.primary; cl=#fff; d=flex; ali=center; jsc=center; ftw=700; p=4px 10px; fts=12px"Table
Tabular data display.
Table Preview
nib="w=100%; bdcps=collapse; fts=14px"Alert
An inline status message.
color:
Attention: This is a reactive alert message.
nib="d=flex; g=12px; p=16px; bdrd=10px; bgc=#f8fafc; dark:bgc=#1a1a1f; cl=$color.primary"Badge
A small status pill.
color:
Badge Tag
nib="d=inline-flex; p=2px 10px; fts=12px; ftw=600; bdrd=999px; cl=#fff; bgc=$color.primary"Progress
A horizontal progress bar.
color:
Progress Preview
nib="w=100%; h=8px; bdrd=999px; bgc=#f1f5f9; ovf=hidden"Tabs
Switch between panels.
Tabs Preview
nib="d=flex; g=4px; bdb=1px solid #e5e7eb"Modal
A centered dialog over a dimmed backdrop.
Modal Preview
nib="pos=fixed; t=0; l=0; w=100%; h=100%; bgc=rgba(0,0,0,.5); d=flex; ali=center; jsc=center"Card
A bordered content container.
size:
Interactive Card
This card adapts to tokens and responsive breakpoints.
nib="bgc=#fff; dark:bgc=#111; bd=1px solid #e5e7eb; dark:bd=1px solid #333; bdrd=16px; p=4px 10px; fts=12px"