Skip to content
voxui

Components

Button Input & Textarea Select Checkbox & Radio Toggle Switch Badge Card Widget Drag & Drop Grid Form Template HBox & VBox Bar Splitter Carousel Calendar + Picker Tree Table Table Progress Accordion Segmented Button Tabs UI Grid Layout Retro Charts Status Card Modal Toast Map Slider Tooltip Spinner Breadcrumb Avatar
Button
Specs & Integration

Buttons represent concrete touch activities and submission workflows inside forms or panels.

CSS Class Modifiers:

ClassDescriptionAesthetic State
.vox-btnDefault standard secondary action buttonBlack background & hover border
.vox-btn-primaryPrimary call-to-action buttonWhite background & inverted text
.vox-icon-btnSquare button for single glyphsTransparent with icon centering
 
<button class="vox-btn">Default</button>
<button class="vox-btn vox-btn-primary">Primary</button>
<button class="vox-icon-btn" aria-label="Settings">⚙︎</button>
.vox-btn {
  padding: 0 16px;
  height: var(--touch-target);
  border: 1px solid var(--line);
  background: var(--surface-elevated);
}
.vox-btn-primary {
  background: var(--cta);
  color: var(--cta-text);
}
const btn = document.querySelector('.vox-btn');
btn.addEventListener('click', () => {
  console.log('Action triggered');
});
Select
Specs & Integration
Documentation for the select controller. 
<!-- HTML structure for select -->
/* CSS variables for select */
// TypeScript integration for select
Checkbox & Radio
Specs & Integration
Documentation for the checkbox controller. 
<!-- HTML structure for checkbox -->
/* CSS variables for checkbox */
// TypeScript integration for checkbox
Toggle Switch
Specs & Integration
Documentation for the switch controller. 
<!-- HTML structure for switch -->
/* CSS variables for switch */
// TypeScript integration for switch
Badge
Live Beta v0.2.1
Specs & Integration
Documentation for the badge controller. 
<!-- HTML structure for badge -->
/* CSS variables for badge */
// TypeScript integration for badge
Card
AI² Summit

June 19 • 420 attending

Live Now
3,842 online
Specs & Integration
Documentation for the card controller. 
<!-- HTML structure for card -->
/* CSS variables for card */
// TypeScript integration for card
Widget
Total Events
142
+12 this month
Active Users
3,842
↑ 8%
Specs & Integration
Documentation for the widget controller. 
<!-- HTML structure for widget -->
/* CSS variables for widget */
// TypeScript integration for widget
Drag & Drop Grid

Drag widgets from the palette and drop them into the dotted grid area (1cm alignment lattice).

Widgets
Stat Widget
Info Widget
Status Widget
Specs & Integration

An interactive high-performance Grid space carrying dotted 1cm structural guides.

Spacing Spec: Dotted lattice is defined as exactly 1cm x 1cm repeating background vectors for layout alignment.

<div class="dnd-grid" id="dropZone"></div>
.dnd-grid {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 1cm 1cm;
  border: 2px dashed var(--line);
}
class VoxDragAndDrop {
  constructor(zoneId: string) {
    const zone = document.getElementById(zoneId);
    zone?.addEventListener('dragover', (e) => e.preventDefault());
  }
}
Form Template
Create New Event
Event Name
Description
Event Mode
Specs & Integration
Documentation for the form controller. 
<!-- HTML structure for form -->
/* CSS variables for form */
// TypeScript integration for form
HBox & VBox
Item 1
Item 2
Item 3
Stacked Item 1
Stacked Item 2
Specs & Integration
Documentation for the hbox controller. 
<!-- HTML structure for hbox -->
/* CSS variables for hbox */
// TypeScript integration for hbox
Bar (Toolbar)
Draft
Specs & Integration
Documentation for the bar controller. 
<!-- HTML structure for bar -->
/* CSS variables for bar */
// TypeScript integration for bar
Splitter
Left Panel
Right Panel
Specs & Integration
Documentation for the splitter controller. 
<!-- HTML structure for splitter -->
/* CSS variables for splitter */
// TypeScript integration for splitter
Calendar + Date & Time Picker
June 2026 ← →
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
09:00 — Team Sync
14:30 — AI² Summit
Date Picker
Time Picker
Specs & Integration
Documentation for the calendar controller. 
<!-- HTML structure for calendar -->
/* CSS variables for calendar */
// TypeScript integration for calendar
Tree Table
Event / CategoryDateStatus
▶ Conferences
Specs & Integration
Documentation for the treetable controller. 
<!-- HTML structure for treetable -->
/* CSS variables for treetable */
// TypeScript integration for treetable
Table
EventDateAttendeesStatus
AI² SummitJun 19420Live
Design SystemsJun 28189Upcoming
Specs & Integration
Documentation for the table controller. 
<!-- HTML structure for table -->
/* CSS variables for table */
// TypeScript integration for table
Progress
Specs & Integration
Documentation for the progress controller. 
<!-- HTML structure for progress -->
/* CSS variables for progress */
// TypeScript integration for progress
Accordion (Compact UI5)

Kernel: v2.10.4-vox
Subsystem status: OK
Baud rate: 115200

Specs & Integration
Documentation for the accordion controller. 
<!-- HTML structure for accordion -->
/* CSS variables for accordion */
// TypeScript integration for accordion
Segmented Button
Specs & Integration
Documentation for the segmented controller. 
<!-- HTML structure for segmented -->
/* CSS variables for segmented */
// TypeScript integration for segmented
Tabs UI (Compact Component)
$ voxui-cli --init
initializing retro terminal design framework... done.
Specs & Integration
Documentation for the tabs controller. 
<!-- HTML structure for tabs -->
/* CSS variables for tabs */
// TypeScript integration for tabs
Grid Layout
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Specs & Integration
Documentation for the grid controller. 
<!-- HTML structure for grid -->
/* CSS variables for grid */
// TypeScript integration for grid
Retro Charts (Pure CSS)
Q1
Q2
Q3
Q4
Specs & Integration
Documentation for the charts controller. 
<!-- HTML structure for charts -->
/* CSS variables for charts */
// TypeScript integration for charts
Status Card (Grok 3.0 Verified)
System Status

Grok 3.0 Integration: ACTIVE

Last Update:

Specs & Integration
Documentation for the status-card controller. 
<!-- HTML structure for status-card -->
/* CSS variables for status-card */
// TypeScript integration for status-card
Toast
Specs & Integration
Documentation for the toast controller. 
<!-- HTML structure for toast -->
/* CSS variables for toast */
// TypeScript integration for toast
Map Layout Component (Mappish integration)

Frictionless vector map container integrating mapbox-gl/maplibre styles directly from voxras.

vox.voxras MAP STAGING (LAT: 20, LNG: 0)
[ Maplibre Map Instance rendering... ]
Specs & Integration

Designed for tracking active check-ins, telemetry devices, or localization widgets easily.

<div class="vox-map-frame" id="map"></div>
.vox-map-frame {
  width: 100%;
  height: 350px;
  border: 1px solid var(--line);
}
import maplibre from 'maplibre-gl';
const map = new maplibregl.Map({
  container: 'map'
});
Slider
Specs & Integration

Range slider for numeric input with retro terminal track styling.

<input type="range" class="vox-slider-input" min="0" max="100" value="42">
.vox-slider-input {
  width: 100%;
  accent-color: var(--text);
  background: transparent;
}
const slider = document.querySelector('.vox-slider-input');
slider.addEventListener('input', (e) => console.log(e.target.value));
Tooltip
Specs & Integration

Pure CSS tooltip wrapper using data attributes. No JavaScript required.

<span class="vox-tooltip" data-tip="Tooltip text">
  <button class="vox-btn">Hover me</button>
</span>
.vox-tooltip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
}
// Tooltip is pure CSS; update data-tip dynamically if needed.
tooltip.setAttribute('data-tip', 'Updated text');
Spinner
Specs & Integration

Loading spinner with retro blocky animation. Use `aria-label="Loading"` for accessibility.

<span class="vox-spinner" aria-label="Loading"></span>
.vox-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  animation: vox-spin 1s linear infinite;
}
const spinner = document.createElement('span');
spinner.className = 'vox-spinner';
spinner.setAttribute('aria-label', 'Loading');
container.appendChild(spinner);
Avatar
AB
Specs & Integration

User avatar with initials fallback. Add `vox-avatar-image` and inline background-image for photos.

<span class="vox-avatar">AB</span>
<span class="vox-avatar vox-avatar-image" style="background-image:url(...)"></span>
.vox-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
}
function initials(name: string): string {
  return name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
}
Online VoxUI Explorer Retro Terminal
Create New Event
Event created successfully