Framework-agnostic UI built on tokens.css — CSS (and markup contract, and
a little vanilla JS where a component needs it), not React. Pulled into a
consuming repo via jsDelivr, e.g.:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tory37/djaunt-branding@main/components/popup/base.css">
A browser extension or other network-constrained context vendors (copies) the files at build time instead of linking a CDN at runtime — see each component’s README.
@main tracks the latest commit; there’s no tag-pinned version yet (tag
pushes are blocked for the account pushing this from an agent session — see
git log). Push a v1.0.0 tag by hand and switch these links to it once
you want consumers to be able to freeze on a version.
| Component | What it’s for |
|---|---|
hero/ |
A page-top masthead — kicker, display heading, lede, actions row, optional watermark mark. |
section-nav/ |
A sticky jump-link bar with scroll-spy — for any page long enough to need one. |
tab-bar/ |
A mobile bottom navigation bar — the fixed set of top-level app sections. |
| Component | What it’s for |
|---|---|
data-table/ |
A scrollable table with a mono-uppercase header row and hairline dividers. |
list-row/ |
A scrollable list of collapsible rows — disclosure caret, switch, remove, expanding body. |
divided-list/ |
A stack of hairline-divided rows, plain or with a leading marker slot. |
badge/ |
A small uppercase tag — a category, a stage, a status, colored by a custom property. |
| Component | What it’s for |
|---|---|
buttons/ |
Primary/ghost/neutral buttons for a page — hero, footer, in-app actions. |
filter-bar/ |
A toolbar row: bordered search field, optional icon, optional result count. |
popup/ |
Header, buttons, switch, segmented control, pill, inputs, footer — a small panel UI. |
dropdown-menu/ |
A small panel anchored to a trigger button — an avatar, a kebab, a “more” link. |
bottom-sheet/ |
A mobile slide-up panel — filter & sort, an add/edit form, a kebab action list. |
checkbox/ |
A native checkbox, plus a larger custom “tile” checkbox for touch-heavy contexts. |
typeahead/ |
A chip multi/single-select combobox with keyboard nav and an optional create-new option. |
| Component | What it’s for |
|---|---|
callout/ |
Bordered note box, optionally colored by semantic meaning. |
progress/ |
A thin fill-driven meter — “3 of 5 steps,” a completion percentage. |
steps/ |
Connected, auto-numbered vertical steps — “Get started,” a method. |
empty-state/ |
The muted italic line shown in place of an empty list, table, or grid. |
skeleton/ |
Shimmering bone placeholders for content that hasn’t loaded yet — text, avatar, thumbnail, card. |
spinner/ |
An indeterminate loading ring — a button mid-submit, an inline “working” state. |
status-line/ |
A small live-region message for a background action in progress — an autosave, a sync. |
Each new component lands here after it’s proven itself in at least one real
site — extracted and blended, not designed in the abstract. (skeleton/ is
the one exception so far — built ahead of need for an upcoming restyle; see
its own README.) tab-bar/, dropdown-menu/, bottom-sheet/, checkbox/,
typeahead/, spinner/, and status-line/ are pulled from mealeo — the
first site to prove them out; a second site’s variant, when one shows up,
folds back in here same as everything above.