shadcn.io is not affiliated with official shadcn/ui
Split Panel Gated Document CTA Block for React
A split CTA that gates a PDF: an email form and Shine Button beside a stack of paper pages in a hairline frame, the cover blurred and locked, with a closing band of chapters. Submitting unlocks the cover and offers a download with progress.
Installation
Overview
A split call to action that trades an email address for a document, for React with Base UI, between solid rails. The headline, a short paragraph and an email form with a Shine Button sit at the start; at the end, past a solid divider that meets the top rule, a stack of paper pages in a hairline frame with + marks on its corners has its cover blurred and marked "Locked". Submitting a valid email lifts the lock with a CSS transition: the blur clears, an "Unlocked" badge appears and the form is replaced by a download button that shows a progress fill, a spinner and a check as the file arrives. A closing band, ruled by its top line only, lists the guide's three chapters with their page counts, and the total is summed from them. It's built from Field, Input Group, Shine Button, Download Button, Badge and Guides, with Lucide icons, Tailwind CSS and CSS-only motion that stays still under reduced motion. On a phone the text and form come first. Made for guides, reports and whitepapers that live behind a lead form.
FAQ
How do I connect the form and the download to real services?
Both are simulated. unlock validates the address and sets a timer (LATENCY, 0.9 seconds) that moves the block from "sending" to "unlocked": replace it with a request to your email list or CRM and set the phase when it succeeds, or put the message in error when it fails. startDownload drives the button with a timer (TICK and STEP): replace it with a fetch that reports its bytes into progress, set "complete" at the end and let resetDelay bring the button back to idle. Nothing in the block is a real file.
Is the lock secure?
No. The blur is a visual cue, not protection: the file isn't in the page, so there is nothing to see through it, but the gate is only as strong as the request behind it. Serve the file from a URL your server only reveals after the sign-up succeeds, or email it a one-time link.
How does the email field validate?
The form has noValidate and unlock calls the form's checkValidity(), which reads type="email" and required. A bad address shows its message in FieldError, marks the input invalid, and sends focus back to the field; typing clears the message.
The label's htmlFor, the input's id and its aria-describedby link them, from one useId.
What do keyboard and screen reader users get?
The field has a visually hidden label, "Work email". While the request runs the button keeps its name and the field turns read-only. On success the form is hidden and inert, and focus moves to the heading "The guide is unlocked", so the next Tab lands on the download button. The button announces its progress politely every quarter and says when it is done. The paper stack is a named figure whose caption says whether it is locked; its pages are decorative.
How do I change the document on the cover?
The CHAPTERS constant holds the three chapter names and their page counts, and GUIDE the size and the title; the page total is summed from the chapters. The closing band lists the chapters. The cover itself is plain markup on a bg-card page with a soft shadow, so it follows the theme, light or dark, in any preset. To show a real first page, put an image inside the cover where the text sits and keep the blur class on it while locked.
What moves, and what happens with reduced motion?
The cover's blur fades out over 0.7 seconds, the lock overlay fades, the badge fades in and the download button fills as it progresses. With reduced motion requested, the entrance and the fades are switched off, and the download fill steps instead of sliding.
Related
- Pro
Centered Seat-Capped Invite CTA
Urgency and limitsA centred card-in-card CTA with a tags input of teammate emails that stops at the seats a plan has left, ten seat dots that fill as you add chips and a Shine Button that counts the invites.
- Pro
Split Panel Team Picker CTA
Pickers and togglesA split CTA where visitors pick the engineer they want to talk to from four choice cards with initials, role and availability, a Shine Button that names their choice, and a closing band of assurances.
- Pro
Split Panel Phone QR Code CTA
Product previewsA split CTA for a habit app between solid rails: copy and a Shine Button that emails the link beside a phone, in a hairline frame, whose screen is a scannable QR code.
- Pro
Centered Newsletter Archive Hero
Signup and waitlistA centered newsletter hero with an email signup that confirms in place, over the four latest issues as links in one hairline grid between the rails.
- Pro
Centered Email Capture Form Hero
Signup and waitlistA compact centered newsletter hero with the email field in a full-width band between two hairlines: a Shine Button subscribes, then a confirmation replaces the form, over a row of subscriber proof.
- Pro
Split Signup Form Hero
Signup and waitlistA split hero with a sign-up form on the page: copy and ticks at the start, and a card in card form at the end with a work email, a password and a Shine Button that shows a spinner, then a confirmation.