Vanilla · Zero dependencies · No build step

A warm, minimalist UI kit for personal sites & online tooling.

Ember is plain HTML, CSS and a single small JavaScript file. It is function over form: a tight set of design tokens drives semantic, accessible components that look right out of the box — in light and dark, on a phone or a 4K display.

Browse components See the 32 frames

Drop it in

<link rel="stylesheet" href="ember/ember.css">
<script src="ember/js/ember.js" defer></script>

Everything with a data-ember-* attribute initialises itself. No frameworks, ~89KB CSS + ~41KB JS unminified, gzip far less.

48interactive components
32frame templates
0dependencies
2themes, auto-aware

Theming

Light, dark, and system-aware

Themes are a single attribute on <html>. Leave it off to follow the OS; set data-theme="light" or "dark" to pin it. The toggle in the navbar persists the choice to localStorage.

resolved: … 
Ember.theme.apply('dark');   // or 'light' / 'auto'
Ember.theme.toggle();        // flip
Ember.theme.resolved();      // -> 'light' | 'dark'

Foundations

Warm tokens

Never pure white, never cold black. Components reference semantic tokens (--surface, --text, --accent…) so a single override re-skins everything.

--bg
--surface
--surface-3
--accent
--accent-soft
--border
clay amber olive sage teal plum rose

#1–6 · Components

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-soft">Soft</button>

#7–10

Badges, chips & avatars

Neutral Accent Active Pending Failed Outline
Design Selected Removable AS JD ABC

#11

Cards

Trailhead

A card with media, body and footer regions. Hover for elevation.

New

Interactive card

The whole surface lifts and highlights — good for clickable tiles.

EM
Profile card
Composed from primitives

Mix utilities and components freely.

#12–23 · Form controls

Form controls

As it appears on your profile.
Enter a valid address.
$ USD

#24–30 · JS-enhanced inputs

Advanced inputs

Drop files hereor click to browse

#31–37 · Feedback

Alerts, toasts, progress & loaders

ℹ️
Heads up
This is an informational alert.
✅
Saved successfully.
⚠️
Your trial ends soon.
⛔
Something went wrong.

#38–43 · Overlays

Modal, drawer, menu, popover, tooltip

  • Account
Quick note

Popovers hold richer content than tooltips.

 Hover me

Data display

Tables, trees, timelines, stats

NameRoleScore
AdaMaker98
GraceManager87
LinusMaven91
  • › 📁 src
    • › 📁 components
      • 📄 button.css
    • 📄 index.js
  • 09:00
    Deployed v1.0
  • 11:30
    Reviewed PRs
  • 14:00
    Shipped docs
Revenue$12.4k▲ 8.2%
Users3,210▲ 1.1%
Churn2.4%▼ 0.3%

Self-layouting primitives

Layout without media queries

These containers arrange their own children using intrinsic CSS — they reflow on any screen, including touch, with no breakpoints to manage.

.auto-grid
1
2
3
4
5
.cluster (wrapping row)
taganotherself-wrappingspan
.with-sidebar
Sidebar
Content that takes the rest, wrapping under the sidebar when cramped.
.split (drag the divider)
Pane A
Pane B

Canvas + HTML-in-canvas

Drawing & rasterising HTML

A pointer/touch drawing surface, plus a dependency-free Ember.canvas.fromHTML() that rasterises any DOM node into a canvas via SVG <foreignObject>.

Open full canvas demo →

Page-level

32 frame templates

Dashboards, docs, auth, pricing, kanban, chat, workspaces and more — drop-in responsive page skeletons.

Browse the frame gallery →