Documentation
Learn how Ditherweb combines the unpolished authenticity of 1990s computing with modern React engineering standards, CSS custom properties, and accessible interaction patterns.
1. Quick Start
Ditherweb components are authored as clean, copy-pasteable React 19 primitives with zero black-box dependencies. They use standard React props and consume Tailwind CSS tokens.
UI Package Architecture (@ditherweb/ui)
All 10 core primitives and the cn(...) utility are exported directly from the package @ditherweb/ui:
import { Button, Input, Card, Badge, cn } from "@ditherweb/ui";
import "@ditherweb/ui/styles";2. Design Token Architecture
Tokens are declared as CSS custom properties in app/globals.css. Dark mode is toggled cleanly by adding or removing the .dark class on <html>.
--background: Page substrate canvas--surface: Elevated panel surface (#c0c0c0 / #252830)--surface-sunken: Recessed control well--primary: Accent blue (#000080 / #3366cc)--secondary: Teal (#008080 / #208080)--accent: Amber highlight (#cc6600)--destructive: Error crimson (#cc0000)
--bevel-light: Highlight edge (#ffffff / #404552)--bevel-dark: Shadow edge (#808080 / #101216)--bevel-face: Midtone face fill--border: Hard pixel contour--ring: High-visibility focus indicator
3. Tactile Bevel Primitives
Bevels are implemented with calibrated borders to produce the classic pseudo-3D look without heavy images or filters.
Simulates an elevated button or dialog box with top/left highlight.
Simulates a recessed input field or sunken panel well.
Active depressed state applied to buttons and toggles on interaction.
4. Procedural Dither Patterns
Dither patterns in Ditherweb are procedural SVG data-URIs encoded directly into CSS. They use pixel-aligned SVG rectangles with shape-rendering="crispEdges" to ensure identical rendering across screens.
5. Accessibility Standards
Early Web interfaces were often inaccessible by modern metrics. Ditherweb strictly couples authentic retro visuals with uncompromising modern accessibility:
- Full keyboard navigation: Enter and Space on buttons, Arrow keys on RadioGroups, Space on Switches and Checkboxes.
- Explicit ARIA attributes:
role="switch",role="radiogroup",role="alert",aria-checked,aria-invalid. - High-contrast focus rings:
focus-visible:outline-ringensures focus indicators are always discernible in both light and dark modes. - Semantic HTML elements are used natively whenever possible (
<button>,<input>,<label>).
6. Package Distribution Status
In accordance with project architecture guidelines, standalone npm packaging, exports, and publishing infrastructure are intentionally deferred until the component system and documentation reach full maturity in Phase 6. Components are currently consumed directly within Next.js / React projects.