PettyUI

45 headless Web Components. Zero dependencies. Browser-native APIs. The smallest UI library that does everything.

components dependencies ~ runtime

// src/philosophy.txt

Your browser already has a UI framework.
You just forgot.

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.

Why PettyUI

Browser-Native
Popover API, native Dialog, Navigation API, Invoker Commands. No polyfills.
Zero Runtime
500-byte signals. No virtual DOM, no framework. Just Custom Elements.
AI-Native
Zod schemas for every prop. MCP tools for agent integration.

Inputs & Forms

Form primitives with built-in ARIA, keyboard navigation, and event handling.

Button

<petty-button>

Text Field

We will never share your email.

<petty-text-field>

Checkbox & Switch

Dark mode

<petty-checkbox> <petty-switch>

Radio Group

Small Medium Large

<petty-radio-group>

Toggle & Toggle Group

Left Center Right

<petty-toggle> <petty-toggle-group>

Number Field & Slider

65

<petty-number-field> <petty-slider>

Select

TypeScript Rust Go Python

<petty-select>

Tags Input

<petty-tags-input>

Navigation

Tab bars, accordions, breadcrumbs, and pagination — all keyboard-accessible.

Tabs

Overview Features API
PettyUI is a headless component library built on vanilla Web Components. No framework required. Zero dependencies, Popover API, native dialog, Invoker Commands, Navigation API, View Transitions. Every component is a Custom Element. Import and use anywhere: React, Vue, Svelte, or plain HTML.

<petty-tabs>

Accordion

Installation

npm install pettyui — zero peer dependencies.

Usage

Import the component, write HTML. That is it.

Styling

No Shadow DOM. Style with plain CSS, Tailwind, or anything.

<petty-accordion>

Breadcrumbs & Pagination

    Home Components Button

<petty-breadcrumbs> <petty-pagination>

Overlays

Dialogs, popovers, tooltips, and drawers — powered by native browser APIs.

Dialog & Alert Dialog

<petty-dialog> <petty-alert-dialog>

Popover & Tooltip

This uses the native Popover API. Click outside to dismiss.
Hover me
Native tooltip via Popover API

<petty-popover> <petty-tooltip>

Dropdown Menu

<petty-dropdown-menu>

Feedback & Display

Status indicators, progress bars, alerts, badges, and notifications.

Alert

Deployed successfully
Your changes are live and visible to all users.
Build failed
Check the CI logs for error details.
Rate limit approaching
You have used 90% of your API quota this month.

<petty-alert>

Progress & Meter

Upload progress72%
CPU usage35%
Memory85%
Loading indicator

<petty-progress> <petty-meter> <petty-loading-indicator>

Badge & Avatar

Default Active Offline Pending
MB JD AK

<petty-badge> <petty-avatar>

Toast

<petty-toast-region>

Skeleton & Card

Loading content

<petty-card> <petty-skeleton>

Welcome to PettyUI

This dialog uses the native dialog element. Focus trap, backdrop, and Escape key work out of the box.

Delete project?

This action cannot be undone. All data will be permanently removed.