DiscoUI

Custom Elements for a Metro-inspired mobile shell: pivot navigation, frame/page transitions, and a splash screen—built with vanilla JS, Shadow DOM, and CSS.

Quick Start

npm install
npm run dev
# open http://localhost:3000 (auto-opens by default)

The viewer loads examples/index.html by default.

Documentation

• Docs

Related

• DiscoUI Capacitor - Capacitor plugin for Android, Electron, and Web.

Usage

Import the bundle and drop the components:

<disco-frame>
	<disco-pivot-page app-title="DISCO APP">
		<disco-pivot-item header="Home">…</disco-pivot-item>
		<disco-pivot-item header="Music">…</disco-pivot-item>
		<disco-pivot-item header="About">…</disco-pivot-item>
	</disco-pivot-page>
</disco-frame>

Theming

Set the theme and accent color via attributes on the <html> tag:

<html disco-theme="auto" disco-accent="#d80073" disco-font="Times New Roman">

<html disco-theme="dark" disco-accent="green">

Project Structure

• src/components/ — web components (frame, page, splash, pivot, hub, list view, buttons, inputs)
• examples/ — demo apps and viewer shell
• vite.config.js — bundling/dev-server config

Development

• npm run dev — start Vite dev server with hot reload
• npm run build — production bundle
• npm run test:unit — run unit tests (Vitest + jsdom)
• npm run test:e2e — run browser tests (Playwright)

Planned

• Password Box
• Radio Button
• Text Box

Contributing

1. Install dependencies: npm install.
2. Run tests: npm test.
3. Ensure npm run types passes before opening a PR.

Components

	Control	Description
✅	DiscoApp	App entry/runner (launch, ready, splash control)
✅	DiscoAppBar	Bottom app bar / command area
✅	DiscoButton	Button control
✅	DiscoCheckbox	Checkbox input
✅	DiscoComboBox	Combo box input
✅	DiscoContextMenu	Contextual menu / right-click menu
✅	DiscoDatePicker	Date picker input
✅	DiscoDialog	Programmatic dialog with backdrop and flipped panel
✅	DiscoFlipView	Displays a collection of items one at a time
✅	DiscoFlyout	Fullscreen flyout modal with flip/slide animations
✅	DiscoFrame	Top-level frame handling navigation, theme, and transitions
✅	DiscoHub	Panoramic layout with parallax header
	DiscoHyperlink	Displays a hyperlink inline
	DiscoHyperlinkButton	Button that displays a hyperlink
✅	DiscoImage	Image with loading progress bar and fade transitions
✅	DiscoListView / DiscoListItem	Virtualized list for long lists
✅	DiscoLongListSelector	Jump list for grouped list views
✅	DiscoMediaElement	Audio media playback with custom controls and volume flyout
✅	DiscoMessageDialog	Programmatic message dialog with text and actions
✅	DiscoPage	Base page component for content and transitions (used by variants)
✅	DiscoPivot / DiscoPivotPage	Pivot navigation (pivot page and pivot items)
✅	DiscoProgressRing	Circular indeterminate progress indicator
✅	DiscoProgressBar	Indeterminate/determinate progress indicator
✅	DiscoPasswordBox	Password input
✅	DiscoRadioButton	Radio button input
✅	DiscoScrollView	Scrollable content area
✅	DiscoSlider	Slider input control
✅	DiscoLoopingSelector	Base class for wheel/column pickers
✅	DiscoSplash	Optional splash screen (modes: none, auto, manual)
✅	DiscoTextBox	Single-line text input
✅	DiscoTimePicker	Time picker input
✅	DiscoTimeSpanPicker	Duration picker input
✅	DiscoToggleButton	On/off toggle button
✅	DiscoToggleSwitch	On/off toggle control

...maybe more to come! (feel free to open issues/PRs for them)

License

This project is licensed under the MIT License.

Contact

For any inquiries or feedback, feel free to reach out!