Astro components

Tier 3 — authoring conveniences that emit the correct markup at build time: which wrap a web component, and which emit plain tier-1 markup.

Tier 3 is authoring convenience. Each component renders the correct markup and classes so you don't hand-write boilerplate, and none of them requires runtime JavaScript — Subgrid emits a subgrid list, Popover uses the native Popover API with Anchor Positioning, Details/Drawer/NavShellcompose <details> with Invoker Commands. If a wrapper would need runtime JS it is the wrong tier: that becomes a web component, and the wrapper emits its tag instead.

Tier 3 has two platforms and these are one of them — theBricks elements are the other, at the same tier rather than above it. Both generate HTML from the classes and elements of tiers 1 and 2; which you use is decided by your platform, and no project uses both.

Read the "emits" column before you write markup

Where a component wraps a web component, it emits that tag with the accessible fallback inside it — so the one call is the whole composition, and adding your own wrapper nests two elements on one tree:

<!-- wrong -->
<wc-tree><Tree items={…} /></wc-tree>

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

`<Cards />`

Pattern: card
Import: @getvitops/astro/components/Cards.astro
Emits: the <wc-cards> tag, fallback inside
Recommended call: <Cards> — it emits <wc-cards> itself, so do NOT add your own wrapper. <Subgrid> is the same grid without the click enhancement.
Also in: CSS, Web component

`<Carousel />`

Pattern: carousel
Import: @getvitops/astro/components/Carousel.astro
Emits: the <wc-carousel> tag, fallback inside
Recommended call: <Carousel slides={…} label="…" /> — it emits <wc-carousel> itself, so do NOT add your own wrapper. .carousel is the shell and .carousel__track the scroller; add loop for the cloned infinite strip (autoplay implies it).
Also in: CSS, Web component, Bricks

`<CookieConsent />`

Pattern: consent
Import: @getvitops/astro/CookieConsent.astro
Emits: the <wc-consent> tag, fallback inside
Recommended call: <CookieConsent />. Its own Lit-free bundle so a site needing consent does not download a rendering framework.
Also in: CSS, Web component

`<Counter />`

Pattern: counter
Import: @getvitops/astro/components/Counter.astro
Emits: the <wc-counter> tag, fallback inside
Recommended call: <Counter value="94%" /> — it emits <wc-counter> itself, so do NOT add your own wrapper. The final value is parsed from the fallback text, never passed separately.
Also in: CSS, Web component

`<Details />`

Pattern: details
Import: @getvitops/astro/components/Details.astro
Emits: tier-1 markup — no web component
Recommended call: <Details> — or hand-write <details>. No JS at either tier; ::details-content animates in CSS.
Also in: CSS

`<Drawer />`

Pattern: drawer
Import: @getvitops/astro/components/Drawer.astro
Emits: tier-1 markup — no web component
Recommended call: <Drawer> — <dialog class="drawer"> plus an Invoker Commands trigger. No JS.
Also in: CSS

`<Gallery />`

Pattern: gallery
Import: @getvitops/astro/components/Gallery.astro
Emits: the <wc-gallery> tag, fallback inside
Recommended call: <Gallery images={…} label="…" /> — it emits <wc-gallery> itself, so do NOT add your own wrapper. Each thumbnail is a command="show-modal" invoker for its own <dialog class="lightbox-dialog"> (see lightbox), so it is a working modal lightbox with no JS.
Also in: CSS, Web component

`<Icon />`

Pattern: icon
Import: @getvitops/astro/components/Icon.astro
Emits: tier-1 markup — no web component
Recommended call: <Icon name="menu" />. Names are semantic and resolve per configured set; a name containing : passes through.
Also in: CSS, Bricks

`<NavShell />`

Pattern: navshell
Import: @getvitops/astro/components/NavShell.astro
Emits: tier-1 markup — no web component
Recommended call: <NavShell> with a nav slot, plus <NavShellToggle> if the toggle must live outside the shell.
Also in: CSS

`<NavShellToggle />`

Pattern: navshell
Import: @getvitops/astro/components/NavShellToggle.astro
Emits: tier-1 markup — no web component
Recommended call: <NavShell> with a nav slot, plus <NavShellToggle> if the toggle must live outside the shell.
Also in: CSS

`<Popover />`

Pattern: popover
Import: @getvitops/astro/components/Popover.astro
Emits: tier-1 markup — no web component
Recommended call: <Popover> — native Popover API + CSS Anchor Positioning. No JS.
Also in: CSS

`<Subgrid />`

Pattern: subgrid
Import: @getvitops/astro/components/Subgrid.astro
Emits: tier-1 markup — no web component
Recommended call: <Subgrid> — emits <ul class="subgrid" role="list">; author <li class="card subgrid-card"> items yourself, so tranches align across the set.
Also in: CSS

`<Tree />`

Pattern: tree
Import: @getvitops/astro/components/Tree.astro
Emits: the <wc-tree> tag, fallback inside
Recommended call: <Tree items={…} /> — it emits <wc-tree> itself, so do NOT add your own wrapper.
Also in: CSS, Web component

Installing and configuring the integration is covered inInstallation; the package's full surface is on @getvitops/astro.