Language

.cronus is the product

You declare app, theme, pages, and widgets in a .cronus file. The Rust kernel parses it and serves HTML, semantic tokens, and motion. There is no React in the running catalog — the React catalog on this site is the visual spec the kernel ports toward.

Parity scoreboard React catalog

How it works

Three layers, no overlap. The file is the product. The kernel is the engine. The browser only receives HTML.

Step 1
You declare
A .cronus file names the app, theme, pages, and widgets. No JSX, no HTML, no CSS, no template blocks.
Step 2
The kernel emits
cronus run parses the file and serves HTML, --cronus-* tokens, and motion. React never loads.
Step 3
The browser shows product UI
style:button+primary+md becomes a CONTRACT button. style:primary without button+ is still the legacy Obsidian button — always write the family.

How to run it

Two processes. The kernel catalog listens on IPv4 only — open 127.0.0.1, not localhost.

IPv4, not localhost

Brave and others resolve localhost to ::1. The kernel binds 0.0.0.0:5311. Use http://127.0.0.1:5311/kit. This page proxies that URL at /language/kit so the iframe is same-origin.

bash

# Terminal 1 — kernel catalog (IPv4)
cd cronus-kernel
cargo build
cd demos/cronus-ui-catalog
../../target/debug/cronus run

# http://127.0.0.1:5311/      landing
# http://127.0.0.1:5311/kit   every declared widget

# Terminal 2 — this docs site
cd cooud-ui
bun run www

# http://127.0.0.1:4747/language

Default catalog port is 5311. This docs site is 4747. After cronus run, edit app.cronus and the kernel hot-reloads.

What you write

A component names a family. The kernel picks the renderer. Pages compose widgets with use, or dump the whole shelf with type:components.

bash

app "CronusUICatalog" {
  port 5311
}

style {
  theme dark
  preset aurora
}

component Save layout:inline style:button+primary+md {
  label "Save"
}

component Plan layout:stack style:select {
  label "Plan"
  item "Free"
  item "Pro"
}

page "/" type:custom {
  title "Cronus UI"
  section hero {
    badge "Language"
    title "Native catalog"
    subtitle "Declare widgets. The kernel emits HTML."
    cta "Open kit" -> "/kit" primary
  }
}

page "/kit" type:components {
  title "Kit"
}

Never paste JSX, HTML, CSS, template, or style_block into .cronus.
Always write style:<family>+<variant> (button+primary). style:primary alone hijacks Obsidian.
Open the kit at 127.0.0.1, not localhost — the kernel binds IPv4 only.
Stub families parse and render a placeholder until they get a dedicated renderer.

Live kernel

188 families in the kernel registry at kernel 1b465a2 — 186 dedicated CONTRACT renderers, 2 stubs. The live kit shows up here when a local kernel catalog is running.

Looking for a local kernel catalog…

The live kit needs a local cronus run (see How to run it) on http://127.0.0.1:5311. Meanwhile, every family's audit result is on the parity scoreboard, and each component page shows its .cronus source next to the React docs.

Families in the kernel

Dedicated is a CONTRACT HTML module in the kernel, audited against the React component. Stub parses and renders a placeholder until it gets a dedicated renderer. See the parity scoreboard for audit results.

accordionDedicated
alertDedicated
alert-dialogDedicated
animated-buttonDedicated
animated-checkboxDedicated
animated-listDedicated
animated-numberDedicated
app-shellDedicated
area-chartDedicated
aspect-ratioDedicated
aurora-backgroundDedicated
autocompleteDedicated
avatarDedicated
avatar-groupDedicated
badgeDedicated
bannerDedicated
bar-chartDedicated
border-beamDedicated
bouncy-accordionDedicated
breadcrumbDedicated
buttonDedicated
button-groupDedicated
calendarDedicated
candlestick-chartDedicated
cardDedicated
card-stackDedicated
carouselDedicated
chartDedicated
checkboxDedicated
chipDedicated
choropleth-chartDedicated
click-sparkDedicated
code-blockDedicated
code-tabsDedicated
collapsibleDedicated
color-pickerDedicated
comboboxDedicated
commandDedicated
comparison-sliderDedicated
composed-chartDedicated
confettiDedicated
confirmation-dialogDedicated
context-menuDedicated
conversationDedicated
copy-buttonDedicated
countdownDedicated
credit-card-inputDedicated
currency-inputDedicated
data-tableDedicated
date-pickerDedicated
date-range-pickerDedicated
description-listDedicated
dialogDedicated
dockDedicated
dot-patternDedicated
drawerDedicated
dropdown-menuDedicated
dynamic-islandDedicated
emptyDedicated
expandable-tabsDedicated
fabDedicated
fieldDedicated
file-dropzoneDedicated
flickering-gridDedicated
flip-cardDedicated
floating-label-inputDedicated
formDedicated
frameDedicated
funnel-chartDedicated
gauge-chartDedicated
glare-hoverDedicated
glass-cardDedicated
gradient-borderDedicated
gradient-textDedicated
grid-patternDedicated
heatmapDedicated
heatmap-chartDedicated
highlighterDedicated
hover-cardDedicated
image-zoomDedicated
inline-citationDedicated
inputDedicated
input-groupDedicated
input-otpDedicated
invite-dialogDedicated
json-viewerDedicated
kanbanDedicated
kbdDedicated
labelDedicated
light-raysDedicated
lightboxDedicated
line-chartDedicated
live-line-chartDedicated
loaderDedicated
logo-carouselDedicated
magneticDedicated
marqueeDedicated
masonryDedicated
menubarDedicated
messageDedicated
meteorsStub
metricDedicated
mode-toggleDedicated
morphing-popoverDedicated
motion-presetsDedicated
multi-selectDedicated
navigation-menuDedicated
noiseDedicated
notification-centerDedicated
number-flowDedicated
number-inputDedicated
orbitDedicated
paginationDedicated
particlesDedicated
password-inputDedicated
phone-inputDedicated
pie-chartDedicated
pill-navDedicated
popoverDedicated
profit-loss-chartDedicated
progressDedicated
progressive-blurDedicated
prompt-inputDedicated
radar-chartDedicated
radio-groupDedicated
ratingDedicated
reasoningDedicated
resizableDedicated
retro-gridDedicated
revealDedicated
rich-text-editorDedicated
ring-chartDedicated
rippleDedicated
sankey-chartStub
scatter-chartDedicated
schedulerDedicated
scramble-textDedicated
scroll-areaDedicated
scroll-navDedicated
scroll-progressDedicated
segmented-controlDedicated
selectDedicated
separatorDedicated
sheetDedicated
shimmerDedicated
shiny-textDedicated
sidebarDedicated
signature-padDedicated
skeletonDedicated
slide-up-textDedicated
sliderDedicated
sonnerDedicated
sourcesDedicated
sparkles-textDedicated
sparklineDedicated
spinnerDedicated
spinning-textDedicated
split-buttonDedicated
spotlight-cardDedicated
star-borderDedicated
status-dotDedicated
stepperDedicated
suggestionDedicated
sunburst-chartDedicated
switchDedicated
tableDedicated
table-of-contentsDedicated
tabsDedicated
tags-inputDedicated
terminalDedicated
text-effectDedicated
text-shimmerDedicated
textareaDedicated
tilt-cardDedicated
time-pickerDedicated
timelineDedicated
toastDedicated
toggleDedicated
toggle-groupDedicated
toolDedicated
toolbarDedicated
tooltipDedicated
tree-viewDedicated
typing-textDedicated
usage-meterDedicated
video-playerDedicated
word-rotateDedicated
workspace-switcherDedicated

How it works

You declare

The kernel emits

The browser shows product UI

How to run it

What you write

Live kernel

Families in the kernel