Switch Page React template for Tailwind CSS v4

Add to a project

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

Usage

Import SwitchPage from @/components/templates/switch-page.

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

import Link from "next/link"
import { SwitchPage } from "@/components/templates/switch-page"

export default function SwitchRoute() {
  return (
    <SwitchPage
      linkComponent={Link}
      ctaTone="brand"
      onImport={async (config) => {
        const response = await fetch("/api/imports", {
          method: "POST",
          body: JSON.stringify(config),
        })
        if (!response.ok) throw new Error("The import could not start")
      }}
    />
  )
}

Props

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

  The whole page's look. classic: a glow behind a split hero with the import visual beside the copy, raised panels and muted bands; bold: a pill header, a giant start-aligned title on a grid with the visual below, gradient bands, flat tiles, featured testimonials, FAQ cards, a band CTA and a wordmark footer; minimal: a transparent header, a centered hero on a soft wash, outlined flat panels, no bands and a simple footer. testimonialsProps, faqProps and ctaProps still win.

• source
  string

  The picked source tool id, controlled. Use with onSourceChange.

• defaultSourcedefault "tasklane"
  string

  The source tool on load: tasklane, boardly, notebase, sheetwise, csv or acme (the first source when unknown).

• onSourceChange
  (source: string) => void

  A source tile was picked; the wizard goes back to Connect.

• step
  "connect" | "map" | "choose" | "move"

  The wizard step, controlled. Use with onStepChange.

• defaultStepdefault "connect"
  "connect" | "map" | "choose" | "move"

  The wizard step on load. Past Connect without data the wizard works on the source's sample export.

• onStepChange
  (step: SwitchStep) => void

  Fires when Continue, Back, the stepper or a source change moves the wizard.

• onConnect
  (source: SwitchSource) => (void | Promise<unknown>)

  The Connect button of an OAuth source. A promise keeps it loading and a rejection shows its message. Without it the button waits 900 ms and connects.

• onImport
  (config: SwitchImportConfig) => (void | Promise<unknown>)

  Runs the import with { source, origin, fileName?, mapping, options, totals }. A promise keeps the progress running until it settles and a rejection shows Try again. Without it a pretend import runs for about 3 seconds.

• maxFileSizedefault 10
  number

  The biggest CSV file the dropzone reads, in MB.

• whiteGloveThresholddefault 200
  number

  The team size the white-glove band speaks to (More than 200 people?).

• sourcesdefault "SWITCH_SOURCES"
  SwitchSource[]

  The source tools: { id, name, kind, description, icon?, method, imports, time, account?, counts, columns, rows, terms? }.

• fieldsdefault "SWITCH_FIELDS"
  SwitchField[]

  The Acme fields columns map to: { id, label, description?, synonyms, required? }. Title is required.

• matrixdefault "SWITCH_MATRIX"
  SwitchMatrixRow[]

  The What moves over rows: { id, feature, description?, support (by source id), notes? }.

• stagesdefault "SWITCH_IMPORT_STAGES"
  string[]

  The import's stages, shown one after another while it runs.

• testimonialsdefault "SWITCH_TESTIMONIALS"
  Testimonial[]

  Quotes from teams that switched, with a metric each.

• faqdefault "SWITCH_FAQ"
  FaqItem[]

  { question, answer } pairs about switching.

• labelsdefault "DEFAULT_SWITCH_PAGE_LABELS"
  Partial<SwitchPageLabels>

  Every visible string; the ones with names or numbers in them are functions.

• hrefsdefault "DEFAULT_SWITCH_PAGE_HREFS"
  Partial<SwitchPageHrefs>

  { signUp, contact, workspace, offer }.

• showSourcesdefault true
  boolean

  The source tiles above the wizard.

• showMatrixdefault true
  boolean

  The What moves over table.

• showTranslatordefault true
  boolean

  The same concepts, new names translator.

• showOfferdefault true
  boolean

  The 3 months free offer card.

• showWhiteGlovedefault true
  boolean

  The white-glove migration band for large teams.

• showTestimonialsdefault true
  boolean

  The testimonials.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing call to action.

• testimonialsLayoutdefault "grid"
  "grid" | "quote" | "featured"

  The testimonials layout. Applies to the classic design.

• 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.

• glowdefault true
  boolean

  The glow over the first screen; false is the plain page. Applies to the classic design; background wins over it.

• alternatedefault true
  boolean

  Bands in the bandBackground look on every other section. Applies to the classic and bold designs.

• backgrounddefault "glow"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. A design picks its own unless you set one (classic glow, bold grid, minimal soft).

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background; without one it follows tone when tone is not neutral.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of the alternating bands. Cards, fields and tiles inside a band are lifted one step above it, so they never share its color. bold picks gradient unless you set one.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; defaults to backgroundColor.

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

  Accents: the hero badge, the page glow when backgroundColor is not set, the import visual, the picked source ring, the stepper, switches, progress and chips.

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

  Start importing, Import now, Open workspace, Claim the offer, the header's Get started and the closing band; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the wizard's selects and buttons.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Overrides for the TestimonialsSection.

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• animateIndefault true
  boolean

  The hero rises in, the import visual plays and summary numbers roll on a client mount; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for counts and dates.

• 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<SwitchPageSlot, string>>

  Classes for header, hero, title, visual, sources, source, wizard, stepper, mapping, preview, options, progress, success, matrix, translator, offer, whiteGlove, testimonials, faq, cta and footer.

Parts