VB6 XP UI React

React components styled like classic VB6 applications and Windows XP.

vb6-xp-ui-react is the React version of vb6-xp-ui: a component library with XP title bars, beveled buttons, sunken inputs, menu bars, tab strips, list views, tree views, progress bars, and desktop-style panels.

import { Button, Input, Window } from 'vb6-xp-ui-react'

export function App() {
  return (
    <Window text="Properties">
      <Input text="Project name" defaultValue="Inventory.vbp" />
      <Button text="OK" primary />
    </Window>
  )
}

Styles are loaded automatically when you import components.

Install

npm install vb6-xp-ui-react

react and react-dom are peer dependencies. The base vb6-xp-ui package is installed automatically.

Why Use It

• Idiomatic React components with XP/VB6 styling.
• No separate stylesheet import required in normal bundler setups.
• TypeScript declarations included.
• Simple control names: Input, Button, Window, Panel.
• One prop convention: use text for the visible label, caption, or title.
• Compatibility aliases are included for VBButton, VBTextInput, createButton, createTextInput, and similar names.

Component Model

Use text for the normal visible text:

<Button text="Save" />
<Input text="Project name" />
<Panel text="Settings" />
<Window text="Properties" />

Then add ordinary React props as needed:

<Input
  text="Output path"
  defaultValue="dist/"
  disabled={false}
  onChange={(event) => console.log(event.target.value)}
/>

Example Window

import {
  Button,
  Checkbox,
  Input,
  Select,
  Window
} from 'vb6-xp-ui-react'

export function PropertiesWindow() {
  return (
    <Window
      text="Properties - Command1"
      width={360}
      footer={
        <>
          <Button text="OK" primary />
          <Button text="Cancel" />
        </>
      }
    >
      <Input text="(Name)" defaultValue="Command1" />
      <Input text="Caption" defaultValue="OK" />
      <Select
        text="Style"
        defaultValue="standard"
        options={[
          { text: 'Standard', value: 'standard' },
          { text: 'Graphical', value: 'graphical' }
        ]}
      />
      <Checkbox text="Enabled" defaultChecked />
    </Window>
  )
}

Components

Forms

• Input
• Textarea
• Select
• Checkbox
• Radio
• Fieldset

Shell

• Desktop
• Window
• Panel
• StatusBar
• Separator

Navigation And Commands

• MenuBar
• Toolbar
• Tabs

Data And Feedback

• ListView
• TreeView
• ProgressBar
• Slider

Component Examples

<Toolbar
  text="Standard"
  items={[
    { text: 'New' },
    { text: 'Open' },
    { text: 'Save', active: true },
    { type: 'separator' },
    { text: 'Run' }
  ]}
/>

<Tabs
  tabs={[
    { text: 'General', content: <Input text="Name" /> },
    { text: 'Build', content: <Button text="Compile" primary /> },
    { text: 'About', content: 'Built with VB6 XP UI React.' }
  ]}
/>

<ListView
  columns={[
    { key: 'name', text: 'Name' },
    { key: 'type', text: 'Type' },
    { key: 'size', text: 'Size' }
  ]}
  rows={[
    { name: 'frmMain.frm', type: 'Form', size: '12 KB' },
    { name: 'modData.bas', type: 'Module', size: '4 KB' }
  ]}
/>

Styling

The XP stylesheet is imported by the package entry point, so most apps only need:

import { Button } from 'vb6-xp-ui-react'

An explicit CSS export is still available for custom build systems:

import 'vb6-xp-ui-react/styles.css'

The stylesheet uses xp-* classes and CSS custom properties from the base vb6-xp-ui package.

Related Package

Need framework-free DOM components instead of React?

npm install vb6-xp-ui