Skip to content
8-bit UI kitTailwind CSS

Press start on your next interface

Coinslot is a pixel UI kit for Tailwind CSS: chunky 4px edges, stepped shadows, three palettes and a hand-drawn icon set. Plain HTML you can copy into any project.

Browse componentsExample screens
  • 3 themes
  • 57 pixel icons
  • No framework
Player 1Lv 12

Ada

Pixel ranger

1,280coins
HP7/10
XP70/100
3
1
12

A wild bug appeared!

What's inside

Everything you need for a pixel interface

Every piece is plain HTML with Tailwind classes. Copy it, change the tokens and ship.

35 components

Buttons, forms, dialogs, tabs, toasts, menus, tables and more, each with a copy button.

Open

3 themes

Classic arcade, handheld green and night. Swap with one attribute on the html tag.

Open

57 pixel icons

Drawn on a 16px grid, crisp at every size and coloured with currentColor.

Open

2 example screens

A product landing page and an inventory dashboard built only from the kit.

Open

Three themes

One set of classes, three palettes

Colours are CSS variables, so bg-cs-primary follows the theme. Set data-theme on any element, even a single card.

Classic

Theme

Cream, gold and berry. A bright arcade cabinet.

Handheld

Theme

Four greens, like an old pocket console screen.

Night

Theme

Deep navy with neon gold and mint.

Motion

Animations that move in steps

No easing curves: every keyframe uses steps(), so movement reads as frames. Everything stops when the visitor asks for reduced motion.

READY

Blink

animate-blink for cursors and prompts.

Sprite bounce

animate-bounce-px hops in three frames.

Coin spin

animate-coin-spin fakes a turning coin.

Stepped fill

animate-fill-px loads in 10 ticks.

Pixel icons

57 icons on a 16px grid

Inline SVG with crisp edges and currentColor fills. Click an icon to copy its SVG.

Also in assets/icons/

Typography

Three pixel fonts, one job each

All three are open source under the SIL Open Font License and ship inside the kit as woff2 files.

Display · font-display

Aa 123

Press Start 2P for headings and scores.

Labels · font-label

Aa 123

Silkscreen for buttons, badges and tabs.

Body · font-body

Aa 123

Pixelify Sans keeps long text readable in 400 to 700 weights.

Tokens

A palette small enough to remember

Twelve colour roles, plus "on" colours for text on each fill. Every pair passes WCAG AA contrast in all three themes.

  • bg#FFF4DC
  • surface#FFFCF2
  • sunk#F4E6C4
  • ink#1A1C2C
  • muted#4E4A63
  • edge#1A1C2C
  • primary#FFCD4D
  • secondary#3B5DC9
  • accent#41C6B4
  • success#237A4B
  • danger#B13E53
  • focus#3B5DC9

Example screens

Two pages built only from the kit

Use them as a starting point or as a reference for how the pieces fit together.

landing.html

Turn chores into quests

Landing page for a fictional habit app.

Pixel art treasure chest full of star coins

Landing page

Hero, features, steps, FAQ and call to action.
inventory.html
3
1
12
5

Inventory dashboard

Sidebar, stats, item grid, detail panel and a quest table.

Insert coin to continue

Download Coinslot free on Templates.party. HTML, tokens, fonts and icons included, plus MCP access for AI coding tools.

Get Coinslot