Button
<petty-button>
// src/philosophy.txt
Somewhere around 2015 we collectively decided that browsers were too stupid to build interfaces. So we invented virtual DOMs, reconcilers, hydration strategies, and server components to work around a platform that wasn't ready. Fair enough. It wasn't.
It is now.
Native <dialog> with focus trapping. Popover API with light-dismiss. Anchor positioning. CSS :has(). Custom Elements that just work in every framework, or in none at all. The browser shipped the abstractions we spent a decade rebuilding in userland — and most of us didn't notice because we were busy migrating to the next meta-framework.
PettyUI is what happens when you stop fighting the platform and start reading the spec. 45 components, zero dependencies, ~500 bytes of runtime. Not because minimalism is trendy, but because there's genuinely nothing left to add. The browser does the hard parts. We just wire up the keyboard shortcuts and ARIA.
Now that AI writes most of the glue code anyway, do you really need 140KB of framework opinions between your intent and the DOM? For a dashboard? For a form? Really?
We're not saying frameworks are dead. We're saying the default answer to "how do I build a UI" shouldn't be "install 900 packages and pray." For most things most people ship, Custom Elements + the platform APIs are not just enough — they're better. Faster, smaller, no build step required, and they'll still work when whatever you're using today is in maintenance mode.
This library exists because building things that are simply better is more fun than arguing about it online.
Form primitives with built-in ARIA, keyboard navigation, and event handling.
<petty-button>
<petty-text-field>
<petty-checkbox> <petty-switch>
<petty-radio-group>
<petty-toggle> <petty-toggle-group>
<petty-number-field> <petty-slider>
<petty-select>
<petty-tags-input>
Tab bars, accordions, breadcrumbs, and pagination — all keyboard-accessible.
<petty-tabs>
npm install pettyui — zero peer dependencies.
Import the component, write HTML. That is it.
No Shadow DOM. Style with plain CSS, Tailwind, or anything.
<petty-accordion>
<petty-breadcrumbs> <petty-pagination>
Dialogs, popovers, tooltips, and drawers — powered by native browser APIs.
<petty-dialog> <petty-alert-dialog>
<petty-popover> <petty-tooltip>
<petty-dropdown-menu>
Status indicators, progress bars, alerts, badges, and notifications.
<petty-alert>
<petty-progress> <petty-meter> <petty-loading-indicator>
<petty-badge> <petty-avatar>
<petty-toast-region>
<petty-card> <petty-skeleton>
<petty-link> <petty-separator>