Components

Static rendering by default, client directives, and the pre-built component registry.

Components are plain React. Everything renders to static HTML at build time, and Sitex follows each page's module graph to include exactly the CSS that page imports. Pages ship zero JavaScript unless a component opts in.

Client Directives

Imported React components opt into browser rendering with a client:* directive. Directives live in TSX (layouts, blocks, components), never in MDX bodies, and never on HTML elements or same-file components.

import Search from "@/components/search"

export default function Header() {
  return <Search client:load />
}

client:load — hydrates immediately. For controls that must work right away.
client:idle — hydrates when the browser is idle. For page chrome like sidebars.
client:visible — hydrates when scrolled into view. For below-the-fold widgets.
client:media="(min-width: 64rem)" — hydrates when the media query matches.
client:only — skips static rendering, renders in the browser only.

Island props must be JSON-serializable — functions, symbols, React elements, and cyclic values throw at build time. Children pass through as static HTML; a nested client:* component inside them becomes its own independent island. Components that share client state belong inside one island root.

Pre-Built Components

Sitex ships components for the pieces content sites keep needing — sections, typography, code blocks, a table of contents, a price display. They follow the shadcn/ui conventions (Tailwind, cn from @/lib/utils, your theme tokens) and install from the Sitex registry: the source lands in src/components/ui, where you own and edit it. No npm package, no version to track, and they compose with regular shadcn/ui components.

Initialize shadcn once (creates components.json and src/lib/utils.ts), then add what you need:

pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add https://sitex.full.dev/r/section.json

Component	Description
`banner`	Dismissable site-wide announcement banner.
`code`	Code block with shiki highlighting and a copy button; drop-in MDX `pre` replacement.
`gradient`	Decorative gradient surface for hero and section backgrounds.
`header`	Site header with container and grouping primitives.
`layout`	Document primitives for Sitex layouts: html, head with SEO meta and JSON-LD, body, and main.
`marquee`	Continuously scrolling strip for logos and quotes.
`price`	Locale-aware price display with sale and discount formatting.
`rating`	Star rating display.
`section`	Page section with consistent vertical rhythm and container.
`theme-toggle`	Light/dark theme provider and toggle button.
`tile`	Card-like tile and tile group for feature grids.
`toc`	Table of contents navigation for page headings.
`typography`	Prose typography primitives for MDX content.

Prefetch

Navigation is prefetched by default: Sitex injects speculation rules so supporting browsers prerender links on hover (instant navigation), plus a small hover-prefetch script for the rest. Disable it with sitex({ prefetch: false }), or per link tree with a data-no-prefetch attribute.