Build with HTML. Let CSS do the shaping.

Thin-Sky UI helps you make resilient websites and server-rendered applications from semantic HTML, modern CSS, and optional hypermedia enhancement.

Start quickly Browse the reference

Quick start · release candidate

Two tags, then your own HTML.

Use the self-hosted CDN starter for the 3.0.0-rc.2 release candidate. Versioned paths are stable for production; /v3/ is the moving release-channel alias.

<link rel="stylesheet" href="/v3/thin-sky.css" crossorigin="anonymous">
<script type="module" src="/v3/thin-sky.js"></script>

Read the quick-start guide for SRI, CSP, caching, Datastar pinning, and granular asset loading.

How it works

Start with a page that works before it is styled.

HTML owns meaning and actions. CSS owns layout and presentation. The server owns durable state. JavaScript stays optional and focused on the few interactions the platform cannot express alone.

HTML is the foundation

Use real links, forms, buttons, labels, headings, lists, and native controls. Their semantics and browser behavior remain available in every layer.

CSS adapts to context

Intrinsic layouts, custom properties, container queries, logical properties, and resilient type make the same markup fit more places.

Enhancement has a boundary

Tabs, comboboxes, and live updates can be enhanced when needed. The authored HTML and ordinary HTTP path remain the fallback.

Follow the progressive guides to see the decisions in a real page.

Composition

Apply layout directly to your markup.

<ul class="thin-stack" data-space="s">
  <li>Shipping updates</li>
  <li>Payment confirmation</li>
</ul>

Stable starting points

A curated foundation for production work.

41 stable items are available today; this short list highlights common entry points. Preview and Lab work stays visible in the full catalog with explicit status filters.

Buttonstable
component
Trigger an immediate native action with theme-driven presentation.
Fieldstable
component
Arrange a native label, form control, persistent hint, and optional server-rendered error without owning form behavior.
Text inputstable
component
Present a native single-line text control while preserving browser-owned typing, validation, autofill, submission, and password-manager behavior.
Selectstable
component
Present a native option list while preserving browser-owned keyboard, pointer, validation, and submission behavior.
Dialogstable
component
Present a focused task in the browser top layer while preserving native dialog semantics, Escape dismissal, and form method=dialog submission.
Alertstable
component
Present persistent, in-flow feedback that remains visible without JavaScript and does not steal focus from the current task.
Badgestable
component
Present a compact inline status or category label without replacing meaningful text or native semantics.
Cardstable
component
Group related content, metadata, and actions in a raised surface without replacing semantic landmarks or native control behavior.
Tabsstable
component
Organize related sections with an authored ARIA tablist and an optional, dependency-free keyboard and panel coordinator.
Paginationstable
component
Navigate between related result pages with durable links and a clearly marked current page.
Breadcrumbsstable
component
Show the current page location within a site hierarchy using a named navigation landmark and an ordered list.
Product cardstable
pattern
Summarize a server-authored product with a durable detail-page link, honest price, inventory message, and resilient media treatment.

Release footprint

Small, inspectable browser assets.

Generated from the production release during every build and deployment. Compressed figures are gzip level 9, measured once by the asset build and read from the release manifest.

Complete CSS: 24.8 kB167.2 kB raw
Optional JavaScript: 9.0 kB29.9 kB raw
Icon sprite: 4.4 kB18.4 kB raw
Total browser bundle: 38.2 kB215.6 kB raw