# Switch Page

> A migration page for teams leaving other tools: an import visual, source tiles, a working 4-step import wizard, a support matrix and offers.

- Type: React template (Templates)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add switch-page`
- Docs: https://wingo-ui.com/templates/switch-page

## Interaction

The hero rises in once and its drawn import plays: the old tool's cards dim, Acme rows land one by one and the counter rolls up to 1,284 tasks imported (still under reduced motion and on the server). Start importing scrolls to the import section. Pick the tool you are coming from on the source tiles (a radio group: arrows, Home and End move and select); the wizard below follows it and starts over. The wizard has four steps on a stepper (completed steps are clickable; below 640px it becomes a compact header). Connect: sign in with a pretend OAuth button (it spins, then shows the connected account and counts), use the sample data, or drop or choose a real .csv file, which is read in the browser (header row, row count, a type, size and empty check with an inline error). Map fields: every column comes auto-matched to an Acme field with a Matched, Check or Skipped badge; change any select (a bottom sheet on phones) and the three preview task cards update live, a field taken by another column moves off it, Reset matches puts the suggestions back, and Continue waits until a column maps to Title. Choose what to bring: switches for comments, attachments, archived items and people invites (disabled when the export has none) roll the summary counts and the time estimate. Import (the move step): the progress bar and percentage run on a motion value through five stages, then a success card says what moved, with Open workspace and Import something else. onImport receives the whole config; a rejected promise shows Try again. Below, the What moves over table marks full, partial and unsupported features per source, highlighting the picked one; on phones it becomes one card per source with a chip switcher. The translator maps the old tool's words to Acme's (chips switch the source), followed by the 3 months free offer, the white-glove band for large teams, testimonials, the FAQ and the closing band.

## Installation

```bash
npx wingo-ui@latest add switch-page
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/switch-page` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/templates/switch-page.tsx`
- `components/templates/switch-page-data.ts`

npm dependencies: `npm i lucide-react motion`

Wingo UI dependencies (installed automatically):

- [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md))
- [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md))
- [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md))
- [Testimonials Section](https://wingo-ui.com/components/testimonials-section) ([Markdown](https://wingo-ui.com/components/testimonials-section.md))
- [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md))
- [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md))
- [Steps](https://wingo-ui.com/components/steps) ([Markdown](https://wingo-ui.com/components/steps.md))
- [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
// 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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | 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. |
| `defaultSource?` | `string` | `"tasklane"` | 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. |
| `defaultStep?` | `"connect" \| "map" \| "choose" \| "move"` | `"connect"` | 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. |
| `maxFileSize?` | `number` | `10` | The biggest CSV file the dropzone reads, in MB. |
| `whiteGloveThreshold?` | `number` | `200` | The team size the white-glove band speaks to (More than 200 people?). |
| `sources?` | `SwitchSource[]` | `"SWITCH_SOURCES"` | The source tools: { id, name, kind, description, icon?, method, imports, time, account?, counts, columns, rows, terms? }. |
| `fields?` | `SwitchField[]` | `"SWITCH_FIELDS"` | The Acme fields columns map to: { id, label, description?, synonyms, required? }. Title is required. |
| `matrix?` | `SwitchMatrixRow[]` | `"SWITCH_MATRIX"` | The What moves over rows: { id, feature, description?, support (by source id), notes? }. |
| `stages?` | `string[]` | `"SWITCH_IMPORT_STAGES"` | The import's stages, shown one after another while it runs. |
| `testimonials?` | `Testimonial[]` | `"SWITCH_TESTIMONIALS"` | Quotes from teams that switched, with a metric each. |
| `faq?` | `FaqItem[]` | `"SWITCH_FAQ"` | { question, answer } pairs about switching. |
| `labels?` | `Partial<SwitchPageLabels>` | `"DEFAULT_SWITCH_PAGE_LABELS"` | Every visible string; the ones with names or numbers in them are functions. |
| `hrefs?` | `Partial<SwitchPageHrefs>` | `"DEFAULT_SWITCH_PAGE_HREFS"` | { signUp, contact, workspace, offer }. |
| `showSources?` | `boolean` | `true` | The source tiles above the wizard. |
| `showMatrix?` | `boolean` | `true` | The What moves over table. |
| `showTranslator?` | `boolean` | `true` | The same concepts, new names translator. |
| `showOffer?` | `boolean` | `true` | The 3 months free offer card. |
| `showWhiteGlove?` | `boolean` | `true` | The white-glove migration band for large teams. |
| `showTestimonials?` | `boolean` | `true` | The testimonials. |
| `showFaq?` | `boolean` | `true` | The FAQ. |
| `showCta?` | `boolean` | `true` | The closing call to action. |
| `testimonialsLayout?` | `"grid" \| "quote" \| "featured"` | `"grid"` | The testimonials layout. Applies to the classic design. |
| `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. |
| `glow?` | `boolean` | `true` | The glow over the first screen; false is the plain page. Applies to the classic design; background wins over it. |
| `alternate?` | `boolean` | `true` | Bands in the bandBackground look on every other section. Applies to the classic and bold designs. |
| `background?` | `"plain" \| "soft" \| "glow" \| "aurora" \| "grid" \| "dots"` | `"glow"` | 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). |
| `backgroundColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint and glow color of the main background; without one it follows tone when tone is not neutral. |
| `bandBackground?` | `"muted" \| "tinted" \| "gradient" \| "dots"` | `"muted"` | 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. |
| `bandColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint of tinted and gradient bands; defaults to backgroundColor. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | 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. |
| `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Start importing, Import now, Open workspace, Claim the offer, the header's Get started and the closing band; brand is the marketing orange. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | The corners of the wizard's selects and buttons. |
| `header?` | `boolean` | `true` | The marketing header; off inside a site layout. |
| `footer?` | `boolean` | `true` | 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. |
| `animateIn?` | `boolean` | `true` | 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. |
| `locale?` | `string` | `"en-US"` | Intl locale for counts and dates. |
| `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `"<a>"` | 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

### parseSwitchCsv (function)

(text, maxRows = 5000) => { columns, rows, rowCount }: a small CSV parser for exports (quoted fields, doubled quotes, comma or semicolon, CRLF, a byte order mark, duplicate headers renamed).

### matchSwitchColumns (function)

(columns, fields = SWITCH_FIELDS) => SwitchMapping: suggests a field per column. An exact name is a high match, a name containing a known word a medium one; each field is used once and the rest are skipped.

### SWITCH_SOURCES (constant)

Tasklane (task tracker), Boardly (kanban), Notebase (wiki), Sheetwise (spreadsheet), CSV or Excel and Another Acme workspace, each with counts, a sample export and translated terms.

### SWITCH_FIELDS (constant)

Title, Status, Assignee, Due date, Priority, Space, Tags, Description and Estimate, with the column names each one matches.

### SWITCH_SKIP_FIELD (constant)

"skip": the field id of a column left behind.

### SWITCH_MATRIX (constant)

Nine features (tasks, workflows, comments, attachments, custom fields, docs, automations, people, history) by source.

### SWITCH_IMPORT_STAGES (constant)

The five stages the import runs through.

### SWITCH_TESTIMONIALS (constant)

Northwind, Globex and Stark Logistics on their move.

### SWITCH_FAQ (constant)

Six questions about switching: the old tool, links, undo, invites, limits and security.

### SWITCH_SAMPLE (constant)

All the sample content in one object: sources, fields, matrix, testimonials, faq and stages.

### DEFAULT_SWITCH_PAGE_LABELS (constant)

The English strings.

### DEFAULT_SWITCH_PAGE_HREFS (constant)

The default link targets.

### SWITCH_PAGE_DESIGNS (constant)

The design names, classic first: ["classic", "bold", "minimal"].

### SwitchPageProps (type)

Props of SwitchPage.

### SwitchPageDesign (type)

"classic" | "bold" | "minimal".

### SwitchStep (type)

"connect" | "map" | "choose" | "import".

### SwitchSource (type)

One source tool.

### SwitchField (type)

One Acme field a column can map to.

### SwitchMatrixRow (type)

One row of the What moves over table.

### SwitchImportConfig (type)

What onImport receives.

### SwitchImportOptions (type)

{ comments, attachments, archived, invites }.

### SwitchMapping (type)

Column name to { field, confidence }.

### SwitchPageLabels (type)

The strings labels can override.

### SwitchPageHrefs (type)

The link targets hrefs can override.

## Examples

- **Bold design**: design="bold": a giant start-aligned title on a grid, the visual below it, flat tiles, featured testimonials and FAQ cards.
- **Minimal design**: design="minimal": a transparent header, a centered hero on a soft wash, outlined flat panels, no bands and a simple footer.
- **CSV import in brand orange**: defaultSource csv with tone and ctaTone brand: drop a .csv file, or use the sample data, then map its columns.
- **Mapping a wiki, embedded**: defaultSource notebase on the Map fields step, without the header and footer, as it would sit inside an existing site.
- **Importer down**: An onImport that rejects: go to the last step, start the import and see Try again.

## See also

- [Compare Page](https://wingo-ui.com/templates/compare-page) ([Markdown](https://wingo-ui.com/templates/compare-page.md))
- [Steps](https://wingo-ui.com/components/steps) ([Markdown](https://wingo-ui.com/components/steps.md))
- [CSV Import](https://wingo-ui.com/components/csv-import) ([Markdown](https://wingo-ui.com/components/csv-import.md))
- [Pricing Page](https://wingo-ui.com/components/pricing-page) ([Markdown](https://wingo-ui.com/components/pricing-page.md))
- [Enterprise Page](https://wingo-ui.com/templates/enterprise-page) ([Markdown](https://wingo-ui.com/templates/enterprise-page.md))

---

Canonical: https://wingo-ui.com/templates/switch-page
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt