OPEN-SOURCE FRONTEND LIBRARIES

The batteries
your frontend
is missing.

Every app needs more than components. Buildkit packages common design patterns into framework-agnostic TypeScript, with bindings for React and adapters for common component libraries.

Explore packages Read the docs
MIT licensed Fully typed
Try it: switch the theme
Workspace settingsInteractive example

Appearance

Choose a theme for this preview.

Color themeReset restores the default.
Dark theme selected
theme.ts
const theme = createThemeStore({
  defaultTheme: "dark"
})

theme.setTheme("dark")
// One store. Use it anywhere.
theme: "dark"TypeScript

Powered by theme-core + react-theme.

How the packages
fit together

The core owns the behavior. Framework bindings connect it to your app, and component adapters provide the UI. Changing the UI doesn’t require rewriting the underlying logic.

YOUR APPLICATIONUse any layer directly

Core

State, operations, and lifecycle rules in plain TypeScript. No framework or rendering dependencies.

Runs independently of your UI

Framework bindings

Subscribe to core state and connect updates and cleanup to the framework’s rendering lifecycle.

React hooks and renderers

Component adapters

Connect the behavior to a component library’s controls, styling, and accessibility primitives.

Replaceable presentation
Dependencies point toward the core

Use an existing adapter, supply your own components, or build directly on a core package.

Read about the architecture

Save a reading preference

Choose a text size. It’s saved in this browser and restored when you reload the page. Reset removes your saved choice and returns to the default.

Preferences guide
preferences.ts
const preferences = createPreferences({
  defaults: { textSize: "medium" }
})

// Connect in the browser
connectPreferencesStorage(preferences, {
  storage: "localStorage",
  key: "buildkit-reading-demo"
})
Reading preferences
Text size
Default: Medium
Reading preview

Team update

The new navigation is ready for review. We’re checking the mobile layout and keyboard controls before the next release.

Please leave your feedback in the project notes so everyone can follow the discussion.

Reload the page to try your saved choice. This setting only affects the example.

Await a decision

Open a dialog from an event handler or a service. Confirming returns true; cancelling or pressing Escape returns false. Your code continues when the person decides.

Modal manager guide
project-modal.tsx
const confirmed = await manager.confirm({
  title: "Archive this project?",
  confirmLabel: "Archive project"
})

if (confirmed) setIsArchived(true)
ProjectsConfirm

Website refresh

Active

A sample project. Changes stay in this example.

Returned valueOpen the example to see its result

Confirm, cancel, or press Escape. Each path resolves the same promise.

Find a package

Each package has its own installation guide, public API reference, and examples. Filter by the layer or integration you need.

29 packages@buildkitgg /
Developer tools

dev-domains

Stable local HTTPS domains for applications, Storybook, and Git worktrees, built on Portless.

Guide Examples
Install packages individually from npm.Browse the API reference

Documentation

Package guides

Installation, usage, and integration requirements for each package.

Read the guides

API reference

Public types and signatures, generated from the package source.

Browse the API

Storybook

Interactive examples with the code behind each behavior.

Open Storybook

Contribute an adapter

We welcome bindings for other frameworks and adapters for other component libraries. Reuse the core behavior and connect it to the conventions of the tools you use.

Have an integration in mind? Open an issue to discuss it, or read the contributing guide to get started.

Contributing guide Discuss an adapter