@emberkit/ui v9.0.1

@emberkit/ui — Component Library

A dark-themed, high-contrast atomic design system built with EmberKit JSX and Tailwind 4. Import @emberkit/ui/tokens.css after Tailwind for polished defaults out of the box.

Install

pnpm add @emberkit/ui
4

Atomic Levels

20+

Components

90+

Icons

Start here

Usage

Install the package, import design tokens after Tailwind, then pull components from the @emberkit/ui/* entry points so your bundler tree-shakes cleanly.

Install & global styles

Peer deps: @emberkit/core, @emberkit/icons, tailwindcss ^4. Point Tailwind at your app sources and at published UI (tokens ship a @source for dist/).

package.json

pnpm add @emberkit/ui @emberkit/core @emberkit/icons tailwindcss

globals.css (example)

@import "tailwindcss";
@import "@emberkit/ui/tokens.css";
@source "./src/**/*.{tsx,ts,jsx}";

Glass utilities (.glass, .glass-card, etc.) are defined in tokens.css— always import it when using Card, secondary Button, or Modal.

Imports by layer

Match published package.json exports so installs from npm resolve without monorepo path hacks.

import { Button, Input, Text } from "@emberkit/ui/atoms";
import { Card, Alert, Modal } from "@emberkit/ui/molecules";
import { DataTable, Header } from "@emberkit/ui/organisms";
import type { ButtonProps } from "@emberkit/ui/atoms";

Rendering & interactivity

Components return EmberKit JSX. Mount with a function so the runtime attaches click handlers and hydrates signals, e.g. render(() => <App />, document.getElementById("root")!). See below.

System

Design Tokens

Tailwind 4 theme — Orange Ember high-contrast dark palette.

Primary — Ember/Orange

Full scale from lightest to darkest orange.

50

100

200

300

400

500

600

700

800

900

Surface — Dark Neutral

Inverted for dark mode — 50 is darkest, 900 is lightest.

50

100

200

300

400

500

600

700

800

900

Semantic Colors

Status colors for feedback and state.

success

#16a34a

warning

#d97706

error

#dc2626

info

#0891b2

Glassmorphism

Utility classes for frosted glass effects.

.glass

Light frost

.glass-strong

Deep frost

.glass-card

Card surface

.glow-primary

.glow-accent

Typography

Font scale with Inter and JetBrains Mono.

4xlfont-bold

2.25rem / 36px

3xlfont-semibold

1.875rem / 30px

2xlfont-semibold

1.5rem / 24px

xlfont-semibold

1.25rem / 20px

lgfont-medium

1.125rem / 18px

basefont-normal

1rem / 16px

smfont-normal

0.875rem / 14px

xsfont-normal

0.75rem / 12px