baukasten

A webview UI toolkit for Eclipse Theia and VSCode extensions, built with React and vanilla-extract . Components use Theia/VSCode CSS variables to match the host platform look and feel.

Installation

npm install baukasten react react-dom 

Usage

In a VSCode Extension (Webview)

Components automatically use CSS variables provided by VSCode:

import { Button, Input, Badge } from 'baukasten-ui';
import 'baukasten-ui/dist/baukasten-base.css';
import 'baukasten-ui/dist/baukasten-vscode.css';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Username" placeholder="Enter username" />
      <Badge variant="success">Active</Badge>
    </div>
  );
}

In Browser (Storybook, demos, etc.)

Use baukasten-ui-web-wrapper to simulate VSCode's environment:

npm install baukasten-ui-web-wrapper

import { Button, Input, Badge } from 'baukasten-ui';
import { VSCodeThemeWrapper } from 'baukasten-ui-web-wrapper';

function App() {
  return (
    <VSCodeThemeWrapper>
      <div>
        <Button variant="primary">Click me</Button>
        <Input label="Username" placeholder="Enter username" />
        <Badge variant="success">Active</Badge>
      </div>
    </VSCodeThemeWrapper>
  );
}

CSS Files

The library provides several CSS files for different use cases:

Base Styles

The baukasten-base.css file contains component styles generated by vanilla-extract. This is required for all platforms:

import 'baukasten-ui/dist/baukasten-base.css';

Platform-Specific CSS Variables

Choose one of these CSS files based on your target platform:

| File | Description | Use Case | | ---------------------- | ------------------------------- | --------------------------- | | baukasten-vscode.css | Uses --vscode-* CSS variables | VS Code extensions | | baukasten-theia.css | Uses --theia-* CSS variables | Eclipse Theia applications | | baukasten-web.css | Uses default fallback values | Standalone web applications |

Example Setup

// Base styles (always required)
import 'baukasten-ui/dist/baukasten-base.css';

// Then choose ONE platform-specific file:
import 'baukasten-ui/dist/baukasten-vscode.css'; // For VS Code
// OR
import 'baukasten-ui/dist/baukasten-theia.css';  // For Eclipse Theia
// OR
import 'baukasten-ui/dist/baukasten-web.css';    // For standalone web apps

Components

Button

A versatile button component with multiple variants and sizes.

<Button variant="primary" size="medium">
  Click me
</Button>

Input

A text input component with label and error support.

<Input 
  label="Email" 
  placeholder="Enter email"
  error="Invalid email"
/>

Badge

A badge component for status indicators.

<Badge variant="success">Active</Badge>

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build library
npm run build

License

MIT