Component Catalog
Every Ditherweb component is built with native accessibility semantics, typed props, and calibrated retro CSS tokens. Inspect interactive states, typography hierarchy, layout primitives, forms, surfaces, and feedback components.
Heading
Semantic heading (h1-h6) with decoupled visual size scaling.
Semantic Level Hierarchy (h1–h6)
Heading 1 — System Core Architecture
Heading 2 — Subsystem Module Protocol
Heading 3 — Peripheral Controller Interface
Heading 4 — Register Buffer Mapping
Heading 5 — Interrupt Vector Table
Heading 6 — Bitwise Flag Mask
Decoupled Semantic Level vs. Visual Size
Semantic h2 with Display Size (5XL)
Semantic h1 with Compact Size (Small)
<Heading level={2} size="xl">System Core</Heading>Text
General-purpose typographic primitive supporting tags, scales, weights, and tones.
Type Scales (xs, sm, base, lg, xl)
Text XL — Vintage mainframe terminal display banner
Text LG — Primary interface lead paragraph and summary
Text Base — Standard system typography for body text and documentation
Text SM — Secondary technical parameters and metadata captions
Text XS — Microscopic hardware register notation and memory addresses
Color Tones & Weights
Default Variant (Bold)
Muted Variant (Medium)
Accent Variant (Semibold)
Monospace Font Stack Flag Enabled (mono)
<Text as="p" size="base" variant="muted" weight="medium">Ditherweb</Text>Link
Framework-agnostic anchor primitive with calibrated retro hover and keyboard states.
<Link href="/docs" variant="default">Documentation →</Link>Code & Kbd
Sunken inline code substrate and tactile raised keycap shortcut primitives.
Inline Code Primitive (<code>)
To import components, execute npm install @ditherweb/ui and configure your bundler with tokens.css.
Tactile Keyboard Shortcut Keycaps (<kbd>)
<Code>npm i @ditherweb/ui</Code> | <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>Blockquote & List
Vintage quote indentation and semantic ordered/unordered list primitives with pixel bullets.
Semantic Blockquote (<blockquote>)
“Retro appearance. Modern engineering. The early Web was defined by hard edges, pixel matrices, and tactile controls designed for mechanical human feedback.”
List: Pixel Bullet Variant
- Floppy Disk Controller (1.44 MB DMA Channel 2)
- Serial Comms (RS-232 16550A UART @ 115,200 baud)
- Parallel Port (Centronics ECP/EPP IEEE 1284)
List: Ordered Numeric Hierarchy
- Execute BIOS POST memory integrity scan
- Initialize master/slave PIC interrupt controllers
- Bootstrap operating system sector from Master Boot Record
<List type="unordered" variant="pixel"><ListItem>...</ListItem></List>Container & Box
Content width constraints with responsive padding, and neutral polymorphic layout primitive.
Container Width Variants (sm, md, lg, xl, full)
Box: Polymorphic Container Primitive
Box as="section"
Box is completely neutral for composable styling. It introduces zero unexpected margins or decorators.
<Container size="lg"><Box as="main">...</Box></Container>Stack, Flex, & Grid
Directional stack flow, flexbox composition, and CSS grid primitives.
Stack (Vertical vs. Horizontal)
Flex with Spacer Primitive
Grid Primitive (4 Columns)
<Stack gap="md"><Flex><Logo /><Spacer /><Nav /></Flex></Stack>AspectRatio & ScrollArea
CSS aspect-ratio constraint and accessible native scroll container.
AspectRatio (16 / 9)
ScrollArea (Keyboard Accessible)
[SYSTEM INITIALIZATION LOG]
0001: DMA Channel 0 initialized.
0002: DMA Channel 1 initialized.
0003: Memory controller mapped 640K base memory.
0004: Video BIOS extension at C000:0000.
0005: Keyboard buffer initialized (16 bytes).
0006: Serial UART 16550A ready at 03F8h.
0007: Parallel printer port ready at 0378h.
0008: Sound Blaster 16 DSP 4.05 detected at 220h IRQ 5 DMA 1.
0009: Mouse driver loaded on IRQ 12 (PS/2 auxiliary device).
0010: IDE hard disk drive C: 540 MB LBA mode ready.
0011: CD-ROM drive D: ATAPI 4X ready.
0012: Operating system boot sequence complete.
<AspectRatio ratio={16/9}>...</AspectRatio> | <ScrollArea className="h-48">...</ScrollArea>Textarea
Native multiline input with sunken inset styling, invalid states, and zero-radius geometry.
<Textarea rows={4} placeholder="..." invalid={hasError} />PasswordInput
Masked credential field with non-submitting retro show/hide toggle and focus preservation.
SecretPass99<PasswordInput value={pwd} onChange={...} showToggle />SearchInput
Native type="search" field with accessible clear button and zero form disruption.
<SearchInput value={query} onClear={() => setQuery("")} placeholder="Search..." />NumberInput
Native numeric input with min, max, step boundaries and sunken retro bevel.
<NumberInput min={0} max={100} step={2} value={val} onChange={...} />Select
Native HTML select dropdown styled with custom pixel caret and sunken well.
<Select value={mode} onChange={...}><option value="...">...</option></Select>Combobox
Accessible WAI-ARIA searchable listbox with keyboard navigation, active-descendant, and empty state.
<Combobox options={[{ value, label }]} value={val} onValueChange={...} />Slider
Native range input with grooved retro channel and tactile raised square thumb.
<Slider min={0} max={100} value={val} onChange={...} />Toggle
Button-style pressed/unpressed state with aria-pressed and bevel inversion.
<Toggle pressed={active} onPressedChange={setActive}>BOLD</Toggle>ToggleGroup
Accessible grouped toggles with single or multiple selection modes.
<ToggleGroup type="single" value={val} onValueChange={...}><ToggleGroupItem value="...">...</ToggleGroupItem></ToggleGroup>Field
Accessible form-field composition primitive wiring label, description, error, and aria attributes.
Assigned AX.25 packet radio call sign. Must be uppercase.
Baud rate parity mismatch: 8N1 required
<Field required error="..."><FieldLabel>...</FieldLabel><Input ... /><FieldDescription>...</FieldDescription></Field>Input
Sunken bevel text field with monospace typing dynamics and focus rings.
<Input placeholder="Enter value..." />Label
High-contrast typography for form controls with optional required indicator.
<Label htmlFor="baud">Baud Rate</Label>Checkbox
Crisp 16x16 pixel sunken checkbox supporting checked, unchecked, and indeterminate states.
<Checkbox checked={active} onChange={(e) => setActive(e.target.checked)}>Enable</Checkbox>Radio
Square-frame radio selection group for mutually exclusive options.
<Radio name="mode" value="vga" checked={val === "vga"} onChange={...}>VGA</Radio>Switch
Tactile slider switch with bevel thumb and track depression.
<Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)}>Sound</Switch>Card
Structured container primitive with default, raised, and sunken surfaces.
Default Card
Flat surface with 2px hard border.
Standard card container for general UI layout grouping.
Raised Card
3D elevated window bevel.
Tactile elevated dialog frame appearance.
Inset Card
Inverted depressed well.
Depressed viewport style for data logs and terminal consoles.
Separator
Geometric divider supporting horizontal and vertical orientations.
Badge
Pixel-framed status tag for metadata, state indicators, and tags.
<Badge variant="success">ONLINE</Badge>Alert
System message notification with role="alert" and distinct chromatic borders.
System Notice
Dialup handshake established at 57,600 baud. V.90 protocol active.
Line Interference
High noise floor detected on telephone subscriber loop.
Fatal Exception
Stack overflow in TSR driver module at 0028:C0011E36.
File Transfer Complete
ZMODEM transfer verified with 32-bit CRC.
<Alert variant="destructive"><AlertTitle>Error</AlertTitle><AlertDescription>...</AlertDescription></Alert>PanelPhase 3C Primitive
Generic application and content surface with compound header, title, description, content, and footer layout.
System Architecture Panel
Configured for ISA bus arbitration and memory layout.
Conventional Memory: 640 KB Base RAM
Expanded Memory (EMS 4.0): 2,048 KB Paged
Extended Memory (XMS): 8,192 KB High Memory
Raised Panel
Tactile 3D bevel face.
Inset Panel
Sunken cavity surface.
Flat Panel
Bevel flat border.
Default Panel
Border with hard shadow.
GroupBoxPhase 3C Primitive
Classic desktop grouping surface powered by native semantic <fieldset> and <legend>.
Well & InsetPhase 3C Primitives
Recessed, sunken content surfaces for terminal buffers, log readouts, and deep cavity containers.
Well (Recessed Regions)
Subtle sunken background with inset bevel border.
Inset (Low-Level Cavity)
Foundational sunken surface primitive with optional deep shadow.
Standard Inset
Classic bevel-inset border geometry.
Deep Inset
Bevel-inset with interior hard shadow depth.
ProgressPhase 3C Primitive
Native semantic <progress> element with retro track, stepped fills, and animated indeterminate stripe.
Spinner & LoadingPhase 3C Primitives
Stepped retro pixel indicators and accessible loading composition with zero icon libraries.
Spinner (Pixel Clock)
CSS-driven stepped rotation with screen-reader text.
Loading (Composition)
Stacked and inline compositions with live region role="status".
SkeletonPhase 3C Primitive
Content placeholder using procedural dither patterns and stepped pulse animation.
EmptyStatePhase 3C Primitive
Reusable empty-content presentation with title, description, and accessible action trigger.
No Floppy Disks Detected
Drive A: is empty. Insert a formatted 1.44MB diskette to mount volume.
Clean Work Directory
No temporary batch files or scratch tapes present in working folder.
ResultPhase 3C Primitive
Semantic outcome presentations for success, error, warning, and info operations.
Disk Formatting Complete
80 tracks formatted with 18 sectors per track. Zero bad clusters found.
General Protection Fault
Memory parity violation detected at address 0x0040:0x0013.
Disk Quota Depleted
Master volume contains less than 512 KB free sectors.
Hardware Configuration Audit
ISA bus query detected 1x VGA adapter, 1x Sound Blaster 16.