Component gallery

Three themes, one component

The same search card in each theme. These panels set data-bv-theme on themselves, so they don't follow the picker.

Colors

The current theme's tokens. Components use these names, never raw colors. node scripts/contrast.mjs checks every text and border pair in all three themes on each release.

Type

Jost 400, 500, 600 and 700. Titles and names wrap instead of cutting off.

Buttons

Every button is at least 44 px tall. Brown is the one main action on a screen or card. Hover, press (Tab to see focus) and the states below.

Skin cards

Search is for fast decisions: artwork, name and creator together, Favorite and Wear one tap away. One column on phones, then 2, 3 and 4 at 600, 900 and 1,200 px. Tap the stars and Wear to see the states.

• Enlarge 0

  Copper Planet

  by ringmaker

  Skin details › Wear

• Enlarge 87

  Checkmate

  by gambit

  Skin details › Wear

• Enlarge 1,204

  The Extremely Long Skin Name That Has To Wrap Onto Two Lines

  by averyveryverylongcreatorname_2026

  Skin details › Log in to wear
• No image

  3

  Broken Art

  by pixelpusher

  Skin details › Wear

Cards: ready, favorited, signed out with a long name, missing artwork, loading.

Skin details

Details is for deeper actions. The art sits on the page with no box behind it, votes sit next to Wear, and sharing and tools go in a compact second row. Splits into two columns from 900 px.

← Search results Enlarge

Midnight Comet

by nova_rider

24 2

Wear

Copy link Skin editor Bonkleagues Re-render Report

Inputs

Labels sit above fields, hints under the label, errors under the field. Inputs use 16 px text so phones don't zoom in.

Tabs, chips and pills

Tabs move between the skin pages (from nav.json's skinTabs). Chips filter what's on the page. Pills label things and can't be pressed.

Tables

Numbers line up on the right. The table scrolls inside its box on small screens instead of the page.

Notices and toasts

Put feedback next to the action that caused it. Toasts are for things with no place on the page; errors stay until dismissed.

Dialogs

Native <dialog>: focus stays inside, Escape or the backdrop closes it, and focus goes back to the button that opened it.

Empty, loading and error

Say what happened and what to do next. "No results" and "couldn't load" are different messages.

curl https://bonkverse.io/api/v1/players/nova_rider/ \
  -H "Authorization: Bearer $BONKVERSE_API_KEY"

const res = await fetch("https://bonkverse.io/api/v1/players/nova_rider/", {
  headers: { Authorization: `Bearer ${process.env.BONKVERSE_API_KEY}` },
});
console.log(await res.json());