shadcn.io is not affiliated with official shadcn/ui
Upgrade Prompts Settings Block for React
An upgrade prompt panel where an admin picks when a prompt shows, how often, its style and its message, beside a drawn app row with a locked item that wears the chosen style.
Installation
Overview
Choose when an app nudges an admin toward a bigger plan, and see it before it ships, with this upgrade prompts panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, a drawn app sits beside the form: a sidebar with a locked Custom roles item and, in place, the prompt as it would show. The form is a checklist of Checkbox triggers (a teammate opens a locked feature, usage reaches a share of the plan, the trial has days to go) with a Number Input in the two that take a number, a number of days for the most often a prompt may show, three style cards in a Radio Group (inline banner, popover on the item, dialog) and an Input for the message, which the drawing wears as typed. A sentence under the form says what the settings amount to and whether anything is due today. No price appears anywhere. A status line counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. On a phone the drawing comes first and the form follows. It's built from Checkbox, Number Input, Radio Group, Input, Button, Shine Button and Guides, with a CSS entrance only. For SaaS products with a free tier, design and developer tools and any plan with locked features.
FAQ
How do I change the triggers, the styles or the sample workspace?
STYLES lists the prompt styles with their hint, TODAY holds the usage share and the trial days the sample workspace has, and the triggers are written in the form and in triggerWords. The summary sentence and the line about what is due today are built from the draft and TODAY, so a new trigger needs a line in each, plus a box in the checklist.
How does the drawing change?
All three prompts are drawn in the same stage and only the chosen one is visible, so choosing a style changes what you see and never the height of the page. The message you type is repeated in each, wrapped inside its card, and a screen reader gets one sentence about it instead of the drawing. The drawing is decorative and takes no focus.
What counts as valid?
The message must not be empty (up to 90 characters), prompts need at least one day between them, the usage share runs from 50 to 100 and the trial days from 1 to 14. Leaving a number field puts a whole number inside its range back in it, and Save with an empty message is refused with focus on the field.
What stays local, and how do I wire it for real?
Everything: no prompt is shown to anyone. Save keeps the settings in this page and says so. To make it real, store them with the workspace, check the triggers where the app already knows usage, trial days and feature access, and keep the last time a prompt showed per admin so the gap between prompts holds.
How is it labelled by keyboard and screen reader?
Each checkbox is named by its sentence, each number field has its own name, the style cards are one radio group read out with their hints, and the status line is a polite live region present from the start. Save and Discard stay focusable while nothing changed, marked aria-disabled, and say so when pressed.
Related
- Pro
A free trial panel with a 7, 14 or 30 day length over a drawn timeline whose reminders and end date move with it, a card requirement, what happens when a trial ends, and the features the trial includes.
- Pro
Upgrade Proration Billing
Upgrade and downgradeChanging plan inside app settings with the bill worked out first: pick a higher plan and the credit for unused days, the new plan's cost for those days, what's due today and the next invoice roll live, then an alert dialog confirms the charge.
- Pro
Upgrade Plan Dialog
Payments and plansA product-analytics usage page with its upgrade dialog shown open: your plan and the next joined by an arrow, a yearly switch, and a table of limits with what you have now and what you would have after.
- Pro
Limit Reached Billing
Upsell and retentionThe upgrade prompt shown where someone hits a plan limit: what was blocked, the limit reached against the next plan's, a two-column comparison and Upgrade or Remind me later.
- Pro
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.
- Pro
Account Deletion Settings
Backups and exportsA whole-page account deletion that first asks what happens to each kind of data (delete, anonymise or transfer, with invoices locked for tax law), sums the choices in one sentence, then schedules deletion 14 days out behind a typed-email alert dialog.