Skip to content

W1C Web 1.0 Components

Getting Started About Components Repo

Theme

Overview

Getting started Build your first retro UI.Installation Add W1C to your project.Usage Register components, cherry-pick imports, and apply theme CSS.

Manual

Drag & Drop Add DnD with framework-neutral drag, resize, pointer session, and geometry helpers.Typography See the heading, UI, and code fonts used by each theme.Themes Compare every W1C theme.Icons Using W1C icon data.Components Index of W1C custom elements.

Themes

GNOME 2 Tan GNOME 2 theme.Ubuntu 8.10 Human-brown Ubuntu 8.10 theme.Windows 95 Classic Windows 95 inspired theme.Classic Mac Black-and-white (System 7 inspired) mono theme.Web 1.0 Early browser and plain HTML theme.Geocities High-color personal homepage theme.

Icons

Icons Using W1C icon data.Icon Catalog Browse every bundled W1C icon with source and license attribution.

Components

Shell

Window Window shell with chrome slots.Titlebar Dense titlebar for windows and dialogs.Toolbar Compact row for controls and fields.Statusbar Footer row for status text and panes.Panel Framed grouped content surface.Divider Horizontal or vertical separator.

Controls

Button Raised, sunken, and flat command controls.Address field Toolbar location field.Label Form label with required and disabled states.Input Native text input with W1C control chrome.Select Native select control with W1C control chrome.Textarea Native textarea with W1C control chrome.Checkbox Labelled native checkbox control.Validation message Compact validation and helper message.Tabs Slotted tabs with keyboard selection.

Desktop

Desktop icon Desktop shortcut button or link.Taskbar Desktop taskbar or GNOME-style panel row.

Geocities

Badge 88x31 Native-size early-web badge.Visitor counter Odometer-style visitor count.Guestbook panel Guestbook entries and sign links.Webring Previous, home, random, and next ring navigation.Under construction Hazard-stripe unfinished page notice.Marquee Reduced-motion friendly marquee banner.Blink Reduced-motion friendly inline blink emphasis.Tiled background Repeated image or CSS background surface.Link cluster Directory-style link grouping.Last updated Static page update stamp.Image map Clickable sticker sheet with positioned hotspots.

Menus

Menu bar Horizontal app menu surface.Menu Vertical command menu surface.Menu item Button or anchor command row.

Documents and data

Data table Dense ARIA table grid.Data list Dense record list surface.Status card Compact status summary card.Endpoint row Dense endpoint and status row.Source viewer Full source viewer shell.Document browser Browser shell with toolbar, sidebar, content, and statusbar.Word processor Editor shell with toolbar, ruler, page, and details pane.JSON viewer Read-only formatted JSON/source viewer.

Feedback and icons

Dialog Dialog shell for alerts and confirmations.Toast Status, info, warning, and danger notice shell.Alert Inline alert or flash notice.Icon Render bundled W1C icon data.

Meta

Inspiration Where the dev got this idea.References Source links behind W1C.

Web components for the indie web.

W1C

W1C (Web 1.0 Components) takes retro operating-system and early-web UI patterns as components & UI primitives for your next project.

Getting started Build your first retro UI.Components Index of W1C custom elements.Icons Using W1C icon data.