PettyUI

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

components dependencies ~ runtime

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>

PettyUI v2 — 45 Web Components, 0 dependencies, built on browser standards.

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.