Blocks

Whole page sections, assembled from the components. A block 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 blocks differ from components

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

That also means blocks 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 />
        <FeaturesGrid />
        <StatsRow />
        <TestimonialsQuote />
        <PricingCards />
        <FaqAccordion />
        <CtaBanner />
      </main>
      <FooterColumns />
    </div>
  )
}

For AI agents

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

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