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

Usage in Eclipse Theia

Basic Setup

Eclipse Theia applications use the Theia-specific CSS file:

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

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

Multi-Window Support (Secondary Windows)

When using Baukasten in Theia secondary/popup windows, portal-based components (Select, Dropdown, Tooltip, etc.) need a PortalProvider to ensure dropdowns render in the correct window:

import { useRef, useState, useEffect } from 'react';
import { PortalProvider, Select, Dropdown, Button } from 'baukasten-ui';
import 'baukasten-ui/dist/baukasten-base.css';
import 'baukasten-ui/dist/baukasten-theia.css';

function SecondaryWindowContent() {
  const rootRef = useRef<HTMLDivElement>(null);
  const [ready, setReady] = useState(false);
  
  // Wait for ref to be available
  useEffect(() => setReady(true), []);
  
  return (
    <div ref={rootRef} style={{ height: '100%' }}>
      {ready && (
        <PortalProvider root={rootRef.current}>
          {/* All portal content will now render in this window */}
          <Select
            options={[
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
            ]}
            placeholder="Select an option"
          />
          
          <Dropdown trigger={<Button>Open Menu</Button>}>
            <div>Menu content</div>
          </Dropdown>
        </PortalProvider>
      )}
    </div>
  );
}

Why is this needed?

By default, portal-based components render floating content (dropdowns, tooltips) to the main window's document.body. In Theia's secondary windows, this causes the content to appear on the wrong window. The PortalProvider redirects portal content to the correct window.

Components that use portals:

• Select - dropdown options
• Dropdown - dropdown content
• Tooltip - tooltip popups
• ContextMenu - right-click menus
• ButtonGroup.Dropdown - split button menus

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