shadcn.io is not affiliated with official shadcn/ui
Split Panel Gated Document CTA Block for Vue
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 Vue with Ark 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.
Field links the label, the input and the error by itself.
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.