alert @starting-style
A message that stays until you remove it — the counterpart to toast.
baseline: widely
Components
Copy-paste, or $ npx nojsui add <name>. Each page
shows the demo, the source, and the fallback tier.
overlays & feedback — 08
alert
command menu dialog + radio
A modal list filtered by category — deliberately not a palette.
baseline: newly
drawer / sheet dialog
The same <dialog>, pinned to a viewport edge with logical margins.
baseline: newly
modal dialog commandfor
Invoker Commands: modality, focus containment and return come from <dialog> itself.
baseline: newly
popover popovertarget
The invoker is the anchor — light dismiss, Esc and focus return are native.
baseline: newly
progress <progress>
Styled native <progress> — the value comes from markup, never from script.
baseline: limited
toast @starting-style
Appears, announced politely, removes itself on a timer — no script.
baseline: newly
tooltip aria-describedby
Announced by screen readers whether or not the bubble is visible.
baseline: widely
navigation — 06
app bar scroll()
Site chrome that condenses as the page moves, on a scroll timeline.
baseline: widely
breadcrumb / stepper typed attr()
The bar is computed from data-step, so the number and the bar cannot disagree.
baseline: widely
carousel ::scroll-marker
Scroll-snap everywhere; arrows and dots generated by CSS.
baseline: widely
footer flex-wrap
Brand, link groups and a legal bar — responsive without a media query.
baseline: widely
skip link clip-path
The first tab stop on the page, hidden until it is focused.
baseline: widely
tabs radio group
One tab stop and arrow-key selection come from the browser.
baseline: widely
inputs & disclosure — 06
accordion details[name]
The browser enforces that opening one closes the others.
baseline: newly
button inline-grid
One button on a native <button> or <a>; the fill can be any color or image.
baseline: widely
checkbox / switch / radio accent-color
Three native controls, one look — the switch is a checkbox, so forms and keyboards work.
baseline: widely
range <datalist>
A native slider with tick marks; a live value readout needs script, so it ships without one.
baseline: widely
select appearance
A real <select> with a styleable picker. Arrow keys and form data are native.
baseline: widely
text field :placeholder-shown
The label floats when the field has content, driven by the input's own state.
baseline: widely
layout & theming — 04
prose max-inline-size
Eyebrow, heading, lede and body copy at a reading measure.
baseline: widely
responsive card @container
Lays itself out from the space it is given, not the width of the window.
baseline: widely
section max-inline-size
Page rhythm, alternating surfaces and a centred measure — the page shell.
baseline: widely
texture color-mix()
A fixed decorative backdrop that inverts with the theme on its own.
baseline: widely
motion — 04
entrance animation-fill-mode
Content arrives on load — the one moment a scroll timeline cannot reach.
baseline: widely
page transitions @view-transition
Cross-document view transitions: real navigations that animate, with no router.
baseline: limited
parallax band animation-timeline
Depth from a scroll() timeline, off entirely under reduced motion.
baseline: widely
scroll reveal animation-timeline
Content rises into place on a view() timeline — visible without it.
baseline: widely
coming: element-scoped view transitions and the grid-lanes gallery, once a second engine ships them
open the playground →