Vitops

Components

Every UI pattern across the three tiers — CSS framework classes, wc-* web components, and the platform wrappers (Astro components, Bricks elements) — which tiers provide it, and how they compose.

A pattern — a tree, a carousel, a dialog, a card — is provided by up to three tiers, and they compose rather than compete. Each page below lists one in full.

There are four pages but three tiers, because Astro and Bricks are both tier 3: platform wrappers that generate HTML using the classes and elements of tiers 1 and 2. They are siblings chosen by which platform you are on, not steps in a ladder — no project uses both, and neither outranks the other. They get separate pages because you arrive knowing your stack and want only its list.

Choosing a tier

Use the highest tier your stack has, and write only its call. In Astro that is the Astro component; in Bricks the element; anywhere else the classes, plus the<wc-*> tag when one exists. Each page names the call to write per pattern — and because that call names the highest tier available, a pattern's row on theCSS page may well tell you to write an Astro component instead. That is the recommendation, not a correction.

Do not compose two tiers by hand

Where an Astro component wraps a web component it emits that tag with the accessible fallback inside it, so that one call is the whole composition. Wrapping it again nests two elements on one tree:

<!-- wrong: two elements, one tree -->
<wc-tree><Tree items={…} /></wc-tree>

<!-- right -->
<Tree items={…} />

The Astro components page records which components wrap a tag and which emit plain markup.

A web component enhances markup you supply

Tier 2 exists only where a pattern genuinely benefits from progressive enhancement. The slotted markup is the fallback: it must be semantic and usable with no JavaScript, and the element parses and augments it in place — it never renders from empty. Turn JavaScript off and the carousel is a scroll-snap strip, the compare slider is two images, the entries are headings and definition lists. If you want a component that renders from nothing, the pattern is in the wrong tier.

Working demos of every pattern are on thePatterns page. For how a pattern's CSS is assembled — token cascade, states, role variants — seeComponent patterns.