@ponchia/ui

Nothing
Kitchen Sink

Dismissible — wired via behaviors

Palette

--bg
--panel
--panel-soft
--accent
--success
--danger

Theming contract — one knob re-brands

Buttons

Badges · Chips · Dots

Default Accent Success Warning Danger Chip Active
Online Degraded Down typing

Card

Interactive surface

Flat, hairline border, lifts on hover. Colour stays rationed.

Open

Card · accent

Dot-grid backdrop

The signature texture as a background utility.

Key / value

Runtime
k3s · cluster
Status
Reconciled

Form

Table · dense

Time Pair Size P/L State
09:42:01 BTC/EUR 0.014 +€38.20 Filled
09:38:55 ETH/EUR 0.62 −€11.04 Stopped

Metrics

Equity €12,408 +2.4% / 24h
Open3 positions
Win rate61% −4pt / wk

Motion

Rise 1
Rise 2
Rise 3
Rise 4

Loaders · Progress

Alerts

Heads up

A rationed accent border carries the tone — no fill.

Dismissible alert — wired via the shipped behavior.

Tabs · Accordion · Segmented

First panel — CSS-only look, ARIA contract.
What is this
Native <details>, styled — zero JS.
Second item
The dot marker rotates into an arrow on open.

Breadcrumb · Pagination · Avatar

  1. Home
  2. Projects
  3. Detail
ZT AB CD SM LG

Overlay · Tooltip · Toast

Pure-CSS tooltip
Menu ▾
Actions

Confirm

Native <dialog> styled Nothing-flat. Backdrop click closes it.

Filters

Slide-in drawer; bottom sheet on mobile.

Content — Markdown output, zero classes

Designing with restraint

This whole article is plain semantic HTML — the kind a Markdown renderer produces — with no class attributes on any element. One ui-prose wrapper styles it.

Why it matters

Keeping the markup clean means it stays portable and machine-readable: scrapers, RSS, reader mode, and LLMs all parse it without fighting a class-soup div tree.

Color is rationed. Structure carries the meaning.

A list

  • Square markers in the accent colour
  • Nested items work too
    • Second level
  1. Ordered lists keep accent markers
  2. Comfortable rhythm between items

Code

Inline const x = 1 and a block:

import ui from '@ponchia/ui/classes';
ui.button({ variant: 'ghost' });

A table

Token Role
--accent the one brand knob
--space-md rhythm unit
Fig 1 — a dot-grid surface

Site shell — content-site layer

Bronto
Menu ▾
  1. 2026-05-15
  2. Aldo
  3. 6 min read

On restraint

A short content page using the narrow container + meta row + tags.

Color is rationed. Structure carries the meaning.
— the Nothing brief
  • design
  • systems
  • css

Code — @ponchia/ui/shiki/nothing theme 

// rationed colour: one accent, the rest greyscale
import ui from '@ponchia/ui/classes';
const cls = ui.button({ variant: 'ghost' });
© 2026 Bronto — built with @ponchia/ui GitHub npm RSS

0.3.1 additions

  • Apple
  • Banana
  • Cherry
Popover & loading
Collision-aware, dependency-free.
Input group / file / range https://

Bob 30
Ann 9
Cy 100

0.3.2 additions

Revenue €48.2k ▲ 12%
Churn 1.8% ▼ 0.3%
Open 17 — flat
Live Idle Read the case study

Dense label

Net +1,240.00 −318.50 0.00
Interactive card Keyboard focus now cues the whole card
Sticky header

ui-container--wide · ui-siteheader--sticky (structural)