vb6-xp-ui

VB6 XP UI

Classic Windows XP and VB6-flavored UI components for plain JavaScript.

vb6-xp-ui gives you small DOM component factories plus a complete XP/VB6 visual style sheet: Luna title bars, sunken inputs, beveled buttons, menu bars, tab strips, list views, tree views, status bars, and property-window energy.

import { Button, Input, Window } from 'vb6-xp-ui'
import 'vb6-xp-ui/styles.css'

const form = document.createElement('div')

form.append(
  Input({ text: 'Project name', value: 'Inventory.vbp' }),
  Button({ text: 'OK', primary: true })
)

document.body.appendChild(Window({
  text: 'Properties',
  content: form
}))

Install

npm install vb6-xp-ui

Why Use It

• Framework-free components that return real DOM nodes.
• A consistent XP/VB6 visual system in one CSS file.
• Simple control names: Input, Button, Window, Panel.
• One prop convention: use text for the visible label, caption, or title.
• Compatibility aliases for older naming styles: VBButton, VBTextInput, createButton, createTextInput, and friends.

Component Model

Every component is a function that returns an HTMLElement.

const name = Input({ text: 'Name', value: 'Command1' })
const save = Button({ text: 'Save', onClick: saveProject })

document.body.append(name, save)

Use text for the normal visible text:

Button({ text: 'Save' })          // button caption
Input({ text: 'Project name' })   // input label
Panel({ text: 'Settings' })       // panel title
Window({ text: 'Properties' })    // title bar

Then add options only when a control needs them:

Input({
  text: 'Output path',
  value: 'dist/',
  disabled: false,
  onChange: (event) => console.log(event.target.value)
})

Example Window

import {
  Button,
  Checkbox,
  Input,
  Select,
  Window
} from 'vb6-xp-ui'
import 'vb6-xp-ui/styles.css'

const content = document.createElement('div')

content.append(
  Input({ text: '(Name)', value: 'Command1' }),
  Input({ text: 'Caption', value: 'OK' }),
  Select({
    text: 'Style',
    value: 'standard',
    options: [
      { text: 'Standard', value: 'standard' },
      { text: 'Graphical', value: 'graphical' }
    ]
  }),
  Checkbox({ text: 'Enabled', checked: true })
)

document.body.appendChild(Window({
  text: 'Properties - Command1',
  width: 360,
  content,
  footer: [
    Button({ text: 'OK', primary: true }),
    Button({ text: 'Cancel' })
  ]
}))

Components

Forms

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

Shell

• Window
• Panel
• StatusBar
• Separator

Navigation And Commands

• MenuBar
• Toolbar
• Tabs

Data And Feedback

• ListView
• TreeView
• ProgressBar
• Slider

Styling

Import the stylesheet once in your app:

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

Or load it in HTML:

<link rel="stylesheet" href="node_modules/vb6-xp-ui/styles.css">

The CSS exposes the visual language through xp-* classes and custom properties such as --xp-panel, --xp-blue-mid, and --xp-font.

React Version

Using React? Install the companion package:

npm install vb6-xp-ui-react

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>
  )
}

Package Notes

This package is intentionally dependency-free. It is best for vanilla JS apps, Web Components, small tools, demos, and framework adapters.

For React apps, use vb6-xp-ui-react.