Login form
A focused sign-in screen with labelled fields, a remember-me option, and native browser validation.
Layout demo · no authentication backend.
Everyday interfaces. Plain HTML.
Explore common UI patterns built with tty.css. Each example is independent; tags show its features and technology.
Product landing
A product homepage with a hero, architecture diagram, feature grid, pricing, and a signup form.
Layout demo · signup is not connected.
Pricing calculator
Compare plans and estimate usage with a working calculator, grouped controls, and accessible results.
Runs locally · no billing service.
Admin dashboard
A metrics dashboard with customer filtering, period controls, keyboard-accessible tabs, and account details.
Interactive demo · sample customer data.
Classic status site
Current service health, monthly incident history, and detailed recovery timelines in a classic status-page layout.
Interactive sample data · no live monitoring or notifications.
Search interface
A query builder with search modes, filters, loading feedback, and result states.
Simulated search · no external search service.
Task board
Create, filter, and move tasks across a release board with native dialogs and browser persistence.
Runs locally · tasks stay in this browser.
Color theme
A Monokai-inspired palette applied to common controls and cards, with a light companion theme.
Visual showcase · switch between themes.
Source downloads need tty.css and the assets linked in their HTML. Alpine.js examples load a pinned version from a CDN.