BrowUI
Zero JavaScript. Pure CSS.
What can HTML and CSS do natively, today and tomorrow? A living record of the platform, one pattern at a time.
BrowUI documents what modern web standards can already do, and what they are becoming. Each pattern is a snapshot of the native browser platform at a specific moment: what works everywhere, what works in some browsers, and what is just arriving. The goal is not production readiness, it is visibility into where the platform is going.
8 UI components Full HTML/CSS
4 Browser UI components Full CSS
0 KB JS 0 Dependencies
UI Components
-
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.
Native Browser UI
-
01.
Selection & search
Selected text and find-in-page matches styled with
::selection,::search-textand::search-text:current. -
02.
Themed scrollbars
Custom scrollbars with WebKit pseudo-elements and Firefox's
scrollbar-color, scoped per rendering engine. -
03.
Focus
Accessible focus states with
:focus-visible, keeping keyboard navigation clear without styling every click. -
04.
Form UX
Native form controls themed with
accent-color,::placeholder,:user-validand:user-invalid.
Why without JavaScript?
-
01.
Native performance
No bundle to load or parse, the browser does what it was built for. Performance gains aren't optimized away; they simply don't exist as a problem.
-
02.
HTML first
Native elements come with semantics, keyboard focus, and expected behaviors built in. No need to reconstruct what the browser already provides.
-
03.
Zero dependencies
No packages, no versioning, no build step. The code relies solely on web standards, making it readable, portable, and stable over time.
Getting started
Copy.
Paste.
Customize.
Done.
No installation, no npm.
Four steps.
- 01 Choose a component
- 02 Copy its HTML + CSS
- 03 Paste it into your page
- 04 Customize the style
<!-- No <script> tags here -->
<details class="accordion">
<summary>Open me</summary>
Content revealed… by pure CSS.
</details>
/* the only "runtime": the browser */
.accordion[open] { /* …animation, state, etc. */ }