BUILD

SHIP

Open Source UI Components

Production-Grade
Components, Zero Dependencies

Build real UI components from scratch. No frameworks, no dependencies, just clean architecture and real education for developers who want to understand, not just use.

Explore Components Start Learning

~20KB

Bundle Size

Dependencies

100%

JavaScript

Open Source

Components That Matter

Every component is built from the ground up with a plugin architecture, full accessibility, and mobile-first design.

December 2025

Available Now

BW DatePicker

Full-featured date picker with plugin architecture. Theming, accessibility, positioning, mobile support, and more.

~15KB 12 Plugins React + Vue

→ Documentation

Name Status Date

Project Alpha Active Dec 01

Project Beta Pending Dec 03

Project Gamma Done Dec 05

Available Now

BW DataTable

Undo/Redo, Excel copy-paste, Command palette, AI filtering, offline-first, column formulas, URL state sync.

~20KB 15+ Features Mobile Ready

→ Documentation

⌘

+ New File

⚙ Settings

? Help

Available Now

BW Command

Command palette component with fuzzy search, keyboard navigation, nested menus, and custom actions.

~8KB Fuzzy Search A11y Ready

→ Documentation

Quick Start

Up and Running
in 30 Seconds

Install via npm, import the component, and you're ready to go. No complex setup, no configuration hell.

1 Install the package from npm

2 Import and initialize the component

3 Customize with plugins as needed

Terminal Usage

$ npm install
                    @bw-ui/datepicker

# Install core package

npm install @bw-ui/datepicker

# Optional: Install plugins

npm install @bw-ui/datepicker-theming

npm install @bw-ui/datepicker-a11y

// Import the component

import { DatePicker } from '@bw-ui/datepicker'

import { theming } from '@bw-ui/datepicker-theming'

// Initialize with plugins

const picker = new DatePicker('#date-input', {

plugins: [theming({ theme: 'dark' })]

})

Philosophy

Why Black & White?

We believe in building, not just consuming. Understanding the fundamentals, not hiding behind abstractions.

🏗️

Zero Dependencies

No bloated node_modules. Every line of code is intentional, auditable, and yours to understand.

🔌

Plugin Architecture

Use only what you need. Every feature is a separate plugin — theming, accessibility, mobile, positioning.

📚

Real Education

Not tutorials — deep understanding. Learn the architecture decisions, patterns, and trade-offs behind every component.

Education

Learn to Build,
Not Just Use

Most tutorials teach you how to use a library. We teach you how to build one. From architecture decisions to production optimization, learn the skills that separate junior from senior engineers.

✓ Deep-dive video series on component architecture

✓ Real-world patterns used in production libraries

✓ From beginner-friendly to advanced engineering

✓ Accessibility, performance, and mobile-first design

DatePicker Course

class BWDatePicker {

eventBus = new EventBus()

state = new StateManager()

use(plugin) { ... }

}

Watch Free

Free Course • 18 Episodes