Kazbo UI
Use Ember

Kazbo UI · Ember

Interface pieces with taste, ready to copy.

Kazbo's own UI library. Every component here is live: try it, read its code, copy it, or link the whole style in one line.

Browse components
15 components · 1 style

Built with Kazbo

Sites we've shipped. The tiles are Ember's preview card.

LiveCDL Game Time multiview: spray-painted concrete wall with four CDL streams
Game TimeMultiview, Hero, Scores Visit
LiveCDL Zoom Zone: sticker crest over a red ticker band
Zoom ZoneSticker hero, Chat, Multiview Visit
NewToday Pros live tab: cards for each pro streaming on Twitch
Pros liveTabs, Live cards Visit
Store Kazbo storefront
KazboStorefront Visit

Components

Click Code to see the markup, Copy to take it. Everything uses ember.css; interactive bits use ember.js.

Icon buttonsActions
SearchInputs · rotating suggestions
Filter chipsInputs
Select menuInputs · keyboard ready
Text fieldInputs
New4d ago Live On air Pro
Tags and badgesDisplay
10k+ members
Avatar crowdDisplay
Bottom sheetOverlays · spring-out open

Panel

Surface 2 with the hairline shadow. Use it to group settings or stats.

PanelDisplay

The details behind great work.

One line that says what this is and why it's worth a click.

Get started
2k+ members
HeroPattern

Tokens

Change these on .ember to re-skin everything. Click a swatch to copy its variable.

Surfaces, text and accent

Type

DisplayNewsreader 500 · 54/1.04 · −0.015em
TitleNewsreader 500 · 28/1.15
Lead paragraph for introsInstrument Sans 500 · 20/1.45 · text-2
Body copy at 16 pixelsInstrument Sans 500 · 16/1.5
Kicker labelInstrument Sans 600 · 12 · caps · text-3

Radius and depth

xxs8px
xs18px
sm24px
md28px
pill999px
shadowhairline
popmenus

Motion (hover a row to play it)

Styles

Each style is one CSS file and one small JS file. Ember is the first.

Ember In use

Warm near-black gallery look: white pill actions, hairline edges, one hot accent, expo-out motion. Studied from details.so's design language, rebuilt as our own code with free fonts and Kaz's orange.

Game Time Next

Concrete wall, spray-paint masks, taped poster frames. From surge.kazbo.cc.

Zoom Zone Next

Ink sticker tiles with hard red offset shadows. From zoomzone.kazbo.cc.

Use Ember

Two lines in the head, one class on <html>. Then copy any component above.

<html class="ember">
<link rel="stylesheet" href="https://uilib.kazbo.cc/styles/ember/ember.css">
<script src="https://uilib.kazbo.cc/styles/ember/ember.js" defer></script>
ember.css ember.js