Skip to content
UI Kit
Accent color

Objections

The doubts that stop people before they buy, answered with proof. Cards with counted figures, a picker for the one doubt, a list that ticks itself off, before and after from the same person, and calm rows.

5 variants
Switch category

Objections

Proof cards

The doubt as a quote, the answer as the headline and a figure that counts up as proof. Cards rise in one after another, light follows the pointer.

Open in Studio

Pick a doubt

Visitors pick what holds them back and get one tailored answer with its proof. The marker moves with the arrow keys, the answer rises in.

Open in Studio

Ticked off

Each doubt gets its tick when it reaches the middle of the screen, a ring counts the answered ones. On phones a slim bar stays on top while you read.

Open in Studio

Then and now

The doubt of a real customer and what the same person says months later. The line between both draws itself as the card scrolls in.

Open in Studio

Rows

Doubt, answer and proof in three calm columns, for long sales pages. Rows rise in, figures count, a linked row lights up on hover.

Open in Studio

Details

What Objections brings along, read from the registry and the source.

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

Props

The ObjectionsProps interface from components/ui/objections.tsx, with the comments from the code.

  • variantoptional
    ObjectionsVariant

    proof-cardsselectorchecklistthen-nowrows

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsrequired
    ObjectionItem[]
  • questionoptional
    string

    selector: the question above the chips

  • ctaoptional
    { label: string; href: string }
  • noteoptional
    string

    A short promise under the action, e.g. cancel any month

Built-in texts

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

Show all 9 texts
questionEnglish What is holding you back?German Was hält dich noch zurück?
answeredEnglish {n} of {t} doubts answeredGerman {n} von {t} Bedenken beantwortet
answeredShortEnglish {n} of {t}German {n} von {t}
answeredRestEnglish doubts answeredGerman Bedenken beantwortet
thenEnglish BeforeGerman Vorher
nowEnglish TodayGerman Heute
doubtEnglish DoubtGerman Bedenken
answerEnglish AnswerGerman Antwort
proofEnglish ProofGerman Beleg

Accessibility

Read from the source of the component.

  • Objections handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-controls, aria-labelledby 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.
  • Adds text for screen readers where icons and graphics stand alone.
  • 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).
  • With reduced motion (prefers-reduced-motion) it stays still. 10 places in the code switch motion off then.

Frequent questions

How do I install Objections?

With aiw add @ai-website/objections. The command puts components/ui/objections.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 Objections have?

5 variants, Proof cards, Pick a doubt, Ticked off, Then and now and Rows. You pick one with the variant prop, for example variant="selector".

Can I translate the texts of Objections?

Yes. Objections carries 9 texts of its own in English and German, such as “What is holding you back?”, “doubts answered” and “Before”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Objections?

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

Can I adjust Objections without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Objections on a page.

Often searched

Jump to

Copied to the clipboard