Getting started

Build a W1C page

W1C is a Lit web component package for retro operating-system and early-web UI. Import the elements once, choose a theme, then write ordinary HTML.

W1C components use the w1c- prefix and work anywhere custom elements, ESM, CSS, and static assets are available.

Install

Install W1C from npm:

pnpm add @w1c/components @w1c/fonts
pnpm add -D @w1c/cli

Start with the CLI

Create a Vite project with W1C components and a theme import:

w1c create my-w1c-app --theme windows-95

Add W1C to an existing project by updating its browser entry file:

w1c init --entry src/main.ts --theme ubuntu-810

First window

import '@w1c/components';
import '@w1c/components/themes/windows-95.css';

<w1c-window title="Documents">
	<w1c-toolbar slot="toolbar">
		<w1c-button>Back</w1c-button>
		<w1c-button>Forward</w1c-button>
	</w1c-toolbar>

	<h1>Quarterly Notes</h1>
	<p>W1C renders a retro shell without taking over your app.</p>

	<w1c-statusbar slot="statusbar">3 objects</w1c-statusbar>
</w1c-window>

Build a W1C page

Install

Start with the CLI

First window

What to read next