Templates

Whole page sections, assembled from the components. A template is a starting point rather than an API: copy it, then rewrite the copy, the links, and the layout until it is yours.

Each type has alternatives — pick the one closest to what you're building.

How templates differ from components

A component has a stable API you pass props to. A template has no props at all: the content is written directly into the markup, because you are going to replace it anyway. Nothing imports a template twice.

That also means templates are not covered by the zero-dependency contract in the way components are. They import the components they use, and they expect those to exist at @/components/ui/ — adjust the paths to wherever you put them.

Assembling a page

Blocks stack in the obvious order, and none of them set a width or a background, so the page shell is yours:

export default function Page() {
  return (
    <div className="min-h-screen bg-surface text-fg">
      <HeaderNav />
      <main>
        <HeroSplit />
        <PricingCards />
      </main>
      <FooterColumns />
    </div>
  )
}

For AI agents

Every template is served as plain text, the same way components are:

https://presetui.com/r/blocks/hero-split.txt