Tollgate
In-app upgrade / paywall block: TollgateLock dims any feature behind a frosted veil with a Pro chip that lifts on hover, and its Upgrade button morphs into a focus-trapped upgrade dialog — usage meter at its limit, monthly/annual toggle with savings badge, plan radio cards with Tally-rolled prices, a ticking unlock list and async onUpgrade that bursts Sparks into “You're on Pro” and lifts every lock under the provider. Presentation only — gate for real server-side.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/tollgateManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| unlocked | boolean | Controlled unlocked state. Omit to let a successful upgrade unlock automatically. | |
| defaultUnlocked | boolean | false | Initial unlocked state when uncontrolled. |
| onUnlockedChange | (unlocked: boolean) => void | Fires when a successful upgrade (or reset()) changes the unlocked state. | |
| onUpgrade | TollgateUpgradeHandler | Called with the chosen plan and cycle. Resolve to finish the upgrade — every lock under this provider lifts its veil; reject to show the rejection message (or a generic one) inline in the dialog. | |
| children | React.ReactNode |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.