shadcn.io is not affiliated with official shadcn/ui
Feature Gating Preview Billing Block for Svelte
A locked Advanced insights report drawn in greyscale behind a lock note, a switch that previews it with labelled sample data, and a side cell listing what Pro adds.
Installation
Overview
Let people see what a locked feature does before they pay for it, with this feature gate for Svelte with Ark UI. A compact header holds a Switch, "Preview with sample data". Inside a hairline frame with a plus mark on each corner, a report is drawn in greyscale: eight bars for the open rate by issue and a table of the top links. While it is locked the bars are faint, the table holds placeholders and a quiet note says it comes with Pro; no real data is blurred. Turning the switch on lifts the lock for the preview, fills the bars and the table with sample numbers and stamps the report "Sample data, not yours". The report keeps its size in both states. A side cell lists what Pro adds, and the only Shine Button, "Upgrade to Pro", sits in a foot with a status line. It's built from Switch, Badge, Shine Button and Guides, with an SVG chart and a CSS entrance only. For freemium products, plan limits and upgrade prompts.
FAQ
How do I change the report and the plan?
Edit PLAN (the plan's name and price), ISSUES (the bars) and LINKS (the table rows) at the top of the file, and ADDS for the list in the side cell. The bars are SVG rectangles whose heights come from the numbers, so a different series needs no other change.
Is the sample data ever mixed with real data?
No. The numbers in the preview are typed into the file and are the same for everyone, and the stamp "Sample data, not yours" is shown whenever they are. While the report is locked it holds no numbers at all, only shapes, so there is nothing real behind the lock to blur or reveal.
What does Upgrade to Pro do, and what stays local?
It only says the upgrade is noted and that nothing was upgraded. In your app, send the choice to your billing provider in upgrade, unlock the report once the plan changes and show the provider's answer in the same status line.
How is the switch wired on each library?
details.checked, and has no label slot, so it takes an aria-label.A switched-on switch is solid foreground, never the primary colour.Is it accessible?
The drawing is hidden from assistive technology. While the report is locked, the table is hidden too and a line says the report is locked; in the preview the table is read as a normal table with a caption that says it is sample data. The lock note is real text, and the status line is a polite live region that is present from the start.