Template Gallery Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/templates/page.tsx
"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { TemplateGalleryPage } from "@/components/templates/template-gallery-page"

export default function TemplatesRoute() {
  const router = useRouter()
  return (
    <TemplateGalleryPage
      linkComponent={Link}
      ctaTone="brand"
      templateHref={(template) => `/app/templates/${template.id}`}
      onUseTemplate={async (template) => {
        const response = await fetch("/api/templates/copy", { method: "POST", body: JSON.stringify({ id: template.id }) })
        if (response.status === 401) router.push(`/sign-up?template=${template.id}`)
        if (!response.ok) throw new Error("Could not copy the template")
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic: a centered hero over a fanned stack of three template cards, raised cards and a gray collection band; bold: a pill header, a split hero with heavy type on a gradient mesh and a cascade of cards, bigger tiles, an inverted collection panel, an image band and a wordmark footer; minimal: a transparent header, a quiet hero without previews, flat cards with outlined previews, no gray bands, plain closing and a simple footer.

• templatesdefault "GALLERY_TEMPLATES"
  GalleryTemplate[]

  The gallery: { id, name, description, summary?, category, preview, previewItems?, creator: { name, role?, team? }, uses, plan: free | business, createdAt, includes, views?, keywords? }. preview picks the drawn mini app; previewItems feeds it words.

• categoriesdefault "TEMPLATE_CATEGORIES"
  TemplateCategory[]

  { value, label, description? } for the sidebar and the chip row: Product, Engineering, Design, Marketing, HR, Operations, Personal.

• collectiondefault "TEMPLATE_COLLECTION"
  TemplateCollection

  The featured collection: { eyebrow, title, description, steps: { template (id), label, note }[] }.

• heroTemplatesdefault "TEMPLATE_GALLERY_HERO"
  string[]

  Three template ids drawn in the hero: back left, front, back right.

• popularSearchesdefault "TEMPLATE_POPULAR_SEARCHES"
  string[]

  The chips under the search; a tap fills the search and scrolls to the results.

• labelsdefault "DEFAULT_TEMPLATE_GALLERY_PAGE_LABELS"
  Partial<TemplateGalleryPageLabels>

  Every visible string; counts and names go through small functions (results, uses, previewTemplate...).

• hrefsdefault "DEFAULT_TEMPLATE_GALLERY_PAGE_HREFS"
  Partial<TemplateGalleryPageHrefs>

  { submit, guidelines, signUp, sales }: the community submit form, its guidelines and the closing band's buttons.

• category
  string

  The selected category (controlled): "all" or a category value.

• defaultCategorydefault "all"
  string

  The category selected at first (uncontrolled).

• onCategoryChange
  (category: string) => void

  Runs when a category is picked.

• query
  string

  The search text (controlled).

• defaultQuerydefault ""
  string

  The search text at first (uncontrolled).

• onQueryChange
  (query: string) => void

  Runs on every keystroke in the search.

• defaultSortdefault "popular"
  "popular" | "newest" | "az"

  The first order of the cards: most used, most recently published, or by name.

• defaultSourcedefault "all"
  "all" | "acme" | "community"

  The Made by filter at first: everyone, the Acme team only, or community members only.

• columnsdefault 3
  2 | 3

  Cards per row from 1280px (two from 640px either way, one on phones).

• pageSizedefault 12
  number

  Cards shown before a Show more button that opens the rest of the matches; a new search, category, filter or sort pages again. 0 shows every match.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• showPopulardefault true
  boolean

  The popular search chips under the search.

• showHeroPreviewsdefault true
  boolean

  The three template cards in the hero (classic and bold).

• showSidebardefault true
  boolean

  The sticky category sidebar from 1024px; off, the chip row shows at every width.

• showSourceFilterdefault true
  boolean

  The Made by filter: Everyone, Acme, Community.

• showSortdefault true
  boolean

  The Popular / Newest / A to Z control.

• showCollectiondefault true
  boolean

  The featured collection rail.

• showSubmitdefault true
  boolean

  The community band with the top creators, and the sidebar's submit card.

• showCtadefault true
  boolean

  The closing call to action.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the selected category chip, the segmented controls, Business badges, the hero pill, the preview glow and the included checks.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Use template, Add all, Submit a template, the header's Get started and the closing band; brand is the marketing orange.

• onUseTemplate
  (template: GalleryTemplate) => (void | Promise<unknown>)

  Use template and Add all. A returned promise keeps the button loading; a rejection leaves the template as it was. Without it the button waits 900 ms and confirms.

• templateHrefdefault "/app/templates/<id>"
  (template: GalleryTemplate) => string

  Where Open template goes once the template was added.

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the closing CtaSection.

• animateIndefault true
  boolean

  The hero and its cards rise in once on mount; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the use counts (de-DE: 63,9K), publish dates and the A to Z order.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<TemplateGalleryPageSlot, string>>

  Classes for header, hero, title, search, fan, gallery, sidebar, chips, toolbar, grid, card, preview, collection, submit, detail, cta and footer.

Parts