User Interface Components.
Eight interface patterns rebuilt with modern HTML and CSS only.
Each example starts from native browser behavior, then adds progressive CSS for layout, state, motion and theming. No JavaScript, no dependencies, no build step.
HTML Native first
CSS Progressive enhancements
JavaScript 0 KB
Each component is documented as a small experiment: the native feature first, the CSS layer second, and the trade-offs clearly exposed.
-
01.
Carousel
Native horizontal scrolling with
scroll-snap, custom scrollbars and controls via::scroll-button. -
02.
Modal
A real modal with
<dialog>, opened without JavaScript viacommandforandcommand="show-modal". -
03.
Popover
A non-modal panel with
popover,popovertargetand native light dismiss. -
04.
Accordion
Using
<details>,<summary>, and thenameattribute that turns a group into an exclusive accordion. -
05.
Tabs
Pure CSS with a real radio group,
:checkedand:has()on the parent. -
06.
Tooltip
Positioned via
anchor-nameandposition-anchor. The tooltip follows its anchor without JS. -
07.
Progress bar
A top progress bar driven by scroll with
animation-timeline. -
08.
Switch
Styled checkboxes with
:has()to modify the parent based on state.
Why without JavaScript?
-
01.
Web standards
Dialogs, popovers, scrolling, forms and disclosure patterns can start from real HTML elements instead of custom interaction code.
-
02.
Declarative interaction
Modern CSS and native attributes can handle state, visibility, focus, motion and layout directly in the document.
-
03.
Portable patterns
Each component stays readable, dependency-free and easy to reuse because the behavior comes from the platform, not a framework runtime.