Lead magnet
Something useful in exchange for an email address, with a real piece shown first. A checklist with the rest behind a blur, a course by email, a quick check of the visitor’s website and template pages that fan out.
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
Lead magnet
Details
What Lead magnet brings along, read from the registry and the source.
- Area
- Marketing
- Variants
- 4
- Version
- 1.0.0 · since 1.1.0
- File
- components/ui/lead-magnet.tsx
- npm packages
- None
- Languages
- English and German, 21 texts of its own
- Studio
- All 4 variants editable
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The LeadMagnetProps interface from components/ui/lead-magnet.tsx, with the comments from the code.
variantoptionalLeadMagnetVariantchecklist-previewemail-coursemini-audittemplate-preview
eyebrowoptionalReact.ReactNodetitlerequiredReact.ReactNodedescriptionoptionalReact.ReactNodeitemsoptionalstring[]checklist-preview: all points, the first `visible` are readable
visibleoptionalnumbertotaloptionalnumberchecklist-preview: points in the full list, default the length of items
daysoptional{ title: string; text: string }[]email-course: the days
checksoptionalstring[]mini-audit: the checks shown while it runs, and the result to tease
resultoptional{ score: number; summary: string; findings: { label: string; ok: boolean }[] }contentsoptional{ label: string; icon?: IconName }[]template-preview: what is inside and the page titles drawn on the sheets
pagesoptionalstring[]formatoptionalstringe.g. PDF, 14 pages
pointsoptionalstring[]Short promises under the form
actionoptionalstringonSubmitoptional(data: { email: string; url?: string }) => void
Built-in texts
Lead magnet writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 21 texts
| Key | English | German |
|---|---|---|
| English Email | German E-Mail | |
| emailPlaceholder | English you@example.com | German du@beispiel.de |
| invalid | English Please enter an email address like name@example.com. | German Bitte gib eine E-Mail-Adresse wie name@beispiel.de ein. |
| getList | English Send me the full list | German Ganze Liste zuschicken |
| startCourse | English Start the free course | German Kostenlosen Kurs starten |
| getTemplate | English Send me the template | German Vorlage zuschicken |
| getReport | English Send me the full report | German Ganzen Bericht zuschicken |
| sentTitle | English It is on its way | German Ist unterwegs |
| sentText | English Check your inbox at {e}. If nothing arrives in five minutes, look in the spam folder. | German Schau in dein Postfach unter {e}. Kommt in fünf Minuten nichts, sieh im Spam-Ordner nach. |
| more | English {n} more points in the full list | German {n} weitere Punkte in der ganzen Liste |
| day | English Day {n} | German Tag {n} |
| url | English Your website | German Deine Website |
| urlPlaceholder | English example.com | German beispiel.de |
| urlInvalid | English Please enter a web address like example.com. | German Bitte gib eine Adresse wie beispiel.de ein. |
| check | English Check my website | German Meine Website prüfen |
| checking | English Checking {u} | German Prüfe {u} |
| score | English Score | German Wertung |
| of | English of 100 | German von 100 |
| unlock | English The full report with {n} findings and how to fix each one | German Der ganze Bericht mit {n} Befunden und wie du jeden behebst |
| again | English Check another website | German Andere Website prüfen |
| inside | English What is inside | German Das steckt drin |
Accessibility
Read from the source of the component.
- Sets aria-describedby, aria-label and aria-live, so screen readers announce purpose and state.
- Uses the roles alert and status.
- Announces changes through a live region without moving focus.
- Every field has a label, visible or for screen readers.
- 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.
Frequent questions
How do I install Lead magnet?
With aiw add @ai-website/lead-magnet. The command puts components/ui/lead-magnet.tsx into your project, the code is yours from then on. It brings along button, icon, motion, reveal and section. It needs no further npm packages.
Which variants does Lead magnet have?
4 variants, Checklist preview, Email course, Website check and Template preview. You pick one with the variant prop, for example variant="email-course".
Can I translate the texts of Lead magnet?
Yes. Lead magnet carries 21 texts of its own in English and German, such as “Email”, “you@example.com” and “Please enter an email address like name@example.com.”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Lead magnet?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Lead magnet with aiw_components and install it with aiw_add @ai-website/lead-magnet. Name the variant in your prompt, for example variant="checklist-preview", and the assistant writes your content straight into the props.
Can I adjust Lead magnet without code?
Yes, in the Studio. All 4 variants are editable there, texts, lists and switches. The Studio writes the matching LeadMagnet code to copy.
Similar components, Often combined with
Similar components
More from Marketing, the same area of the kit.
- OfferOne offer with its value, bonuses and ways to pay made plain.
- Scroll storiesSections that tell while the page scrolls. Cards that stack, rows that move sideways, pictures that zoom open and media that stays while chapters change.
- ManifestoWhat a company stands for, in its own voice.
- Scroll journeysA number, a picture or a marker that travels while the page scrolls. Counters through stages, flipbook frames and paths that draw themselves.
- All of MarketingSections that sell. Heroes, features, pricing, social proof and calls to action.
Often combined with
Sections that usually sit next to Lead magnet on a page.
Loading the source