Baukasten UI

A UI toolkit for building native-feel web applicaiton, that runs on browser, Eclipse Theia or VSCode.

• Website: https://typefox.dev/baukasten
• Storybook: https://typefox.dev/baukasten/storybook/

Project Structure

This is a monorepo managed with npm workspaces:

baukasten/
├── packages/
│   ├── baukasten/           # Main UI component library
│   ├── web-wrapper/         # VSCode theme wrapper for browser demos
│   ├── website/             # Source code of the website
│   └── examples/
│       ├── web-example/     # Web application example
│       └── vscode/          # VSCode extension example (Log Viewer)
└── package.json             # Root package with workspace config

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0

Installation

1. Clone the repository:

   git clone [https://github.com/TypeFox/baukasten](https://github.com/TypeFox/baukasten)
   cd baukasten

2. Install dependencies:

   npm install

Development

Quick Start with VSCode:

This project includes pre-configured VSCode launch configurations. Simply:

1. Open the project in VSCode
2. Press F5 to launch the VSCode extension example, or
3. Use the Run and Debug panel to select:
   • Launch VSCode Extension Example
   • Attach to Web Example (Chrome)
   • Attach to Storybook (Chrome)
   • Launch All Examples (runs multiple at once)

Manual Commands:

Start the component library development:

npm run dev

Start Storybook for component documentation:

npm run storybook

Storybook will be available at http://localhost:6006

Run the examples:

Web example (browser application with theme wrapper):

npm run example:web

The web example will be available at http://localhost:3000

VSCode extension example (Log Viewer demo):

npm run example:vscode

Then press F5 in VSCode to launch the extension host.

Run the website:

Web example (browser application with theme wrapper):

npm run website

Then visit localhost:3000/baukasten

Building

Build all packages:

npm run build

Build Storybook documentation:

npm run build-storybook

Packages

baukasten

The main UI component library with VSCode-inspired components. All components use VSCode CSS variables (like --vscode-button-background) to match the native VSCode look and feel.

• Button: Versatile button component with variants and sizes
• Input: Text input with label and error state support
• Badge: Status indicator component
• ... etc

View Package Documentation

baukasten-ui-web-wrapper

A theme wrapper that provides VSCode CSS variables for browser environments (Storybook, demos, etc.). In real VSCode extensions, these variables are provided by VSCode itself. This package simulates that environment for development and demos.

Features:

• 5 VSCode theme presets (Dark+, Light+, Monokai, GitHub Dark, Solarized Dark)
• Built-in theme switcher with dropdown
• Real VSCode CSS variables

View Package Documentation

@baukasten/examples

Example implementations showing how to use the component library in real applications.

View Examples Documentation

Tech Stack

• React 19: UI framework
• TypeScript: Type safety and developer experience
• VSCode CSS Variables: Native VSCode styling
• Vite: Fast build tool and dev server
• Storybook 8: Component documentation and development
• npm workspaces: Monorepo management

Features

• 🎨 VSCode-native design system using CSS variables
• 🌗 Multiple theme support (Dark+, Light+, Monokai, GitHub Dark, Solarized Dark)
• 📦 Tree-shakeable component exports
• 📚 Comprehensive Storybook documentation
• 💪 Full TypeScript support
• ⚡ Fast development with Vite and React 19
• 🧩 Modular component architecture
• 🔄 Theme switcher for demos and development

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT