unscripted/ui
shadcn-style components using pure HTML components styled with Tailwind. Every interaction on this page (opening, closing, animating, positioning, dismissing) happens with no script at all. Copy the code, paste it, ship zero JavaScript. Works with your existing shadcn theme tokens.
The badges below are live! They say whether your browser supports each feature, detected with @supports, no JS.
Is it accessible?
<details>/<summary> ship with keyboard support and
correct semantics, and the content stays in the DOM for crawlers and find-in-page.
Can it animate height: auto?
interpolate-size: allow-keywords on the wrapper lets
::details-content transition from height: 0 to
height: auto. No measuring, no JavaScript.
Only one open at a time?
name attribute makes the group exclusive — the browser closes the others
for you.
Scroll down — the bar slides away. Scroll up — it comes right back.
No scroll listener, no requestAnimationFrame, no state. The bar is a plain sticky element; a container scroll-state query does the hiding.
The trick is a single conditional: while the container was last scrolled toward its block-end, the bar translates up out of view. Reverse direction and the query stops matching, so it returns.
Because it reads scroll direction rather than position, the bar reappears the instant you scroll up — giving you the whole viewport back until you want the chrome again.
This is the pattern shipped by news sites and docs apps everywhere, usually built with a few dozen lines of JavaScript and a resize observer. Here it's four declarations.
Everything degrades cleanly: where scroll-state queries aren't supported yet, you keep an ordinary always-visible sticky header.
Keep scrolling to feel it settle, then flick back up. The motion respects prefers-reduced-motion automatically.