Skip to content
UI Kit
Accent color

Problem and solution

The pain a visitor knows, then the way out. Side by side, crossed out while scrolling, as a switch between two weeks, as a monthly cost and as a conversation.

5 variants
Switch category

Problem and solution

Side by side

Each problem with its answer in one row. The arrow draws itself as the row scrolls in, hover lifts the answer. On phones the answer sits under the problem.

Open in Studio

Crossed out

Large problem lines get crossed out line by line while you scroll, the answer rises in below. The heading stays in place on wide screens.

Open in Studio

Two weeks

A switch with a gliding marker between the week today and the week with you. The bars shrink and keep a trace of before, the total counts in.

Open in Studio

What it costs

The problem as a monthly bill. Visitors tick off what applies to them, the total and what is left after your price follow at once.

Open in Studio

Conversation

Each problem in a customer’s own words. When it scrolls in, the answer types for a moment and then appears below, like a reply.

Open in Studio

Details

What Problem and solution brings along, read from the registry and the source.

Area
Marketing
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/problem-solution.tsx
Brings along
utilskitbuttoniconmotionrevealsectionnumber-ticker
npm packages
None
Languages
English and German, 10 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The ProblemSolutionProps interface from components/ui/problem-solution.tsx, with the comments from the code.

  • variantoptional
    ProblemSolutionVariant

    splitstriketogglecostconversation

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • problemLabeloptional
    string

    Heading over the problems, default Today

  • solutionLabeloptional
    string

    Heading over the answers, e.g. With Northwind

  • pairsoptional
    ProblemSolutionPair[]

    split, strike, conversation

  • statesoptional
    { before: ProblemSolutionState; after: ProblemSolutionState }

    toggle: the week before and after

  • unitoptional
    string

    toggle: unit after the values, e.g. h or Std.

  • captionoptional
    string

    toggle: heading of the card, e.g. Admin per week

  • costsoptional
    { problem: string; amount: number; detail?: string }[]

    cost: what the problem costs per month

  • offeroptional
    { name: string; price: number; text?: string }

    cost: the offer that replaces it

  • currencyoptional
    string

    cost: ISO currency, default EUR

  • answerNameoptional
    string

    conversation: name of the one who answers, e.g. your product

  • ctaoptional
    { label: string; href: string }

Built-in texts

Problem and solution writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 10 texts
todayEnglish TodayGerman Heute
afterEnglish From now onGerman Ab jetzt
lostEnglish What it costs you each monthGerman Was dich das jeden Monat kostet
totalEnglish TogetherGerman Zusammen
keepEnglish You keepGerman Dir bleiben
keepNoteEnglish every month, after {n} at {p}German jeden Monat, nach {n} für {p}
appliesEnglish {x} applies to meGerman {x} trifft auf mich zu
pickEnglish Tick what applies to youGerman Hake ab, was auf dich zutrifft
switchEnglish CompareGerman Vergleichen
typingEnglish {n} is typingGerman {n} schreibt

Accessibility

Read from the source of the component.

  • Problem and solution handles the keys Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-controls, aria-label and aria-live, so screen readers announce purpose and state.
  • Uses the roles radio and radiogroup.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Problem and solution?

With aiw add @ai-website/problem-solution. The command puts components/ui/problem-solution.tsx into your project, the code is yours from then on. It brings along button, icon, motion, reveal, section and number-ticker. It needs no further npm packages.

Which variants does Problem and solution have?

5 variants, Side by side, Crossed out, Two weeks, What it costs and Conversation. You pick one with the variant prop, for example variant="strike".

Can I translate the texts of Problem and solution?

Yes. Problem and solution carries 10 texts of its own in English and German, such as “Today”, “From now on” and “What it costs you each month”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Problem and solution?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Problem and solution with aiw_components and install it with aiw_add @ai-website/problem-solution. Name the variant in your prompt, for example variant="split", and the assistant writes your content straight into the props.

Can I adjust Problem and solution without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching ProblemSolution code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Problem and solution on a page.

Often searched

Jump to

Copied to the clipboard