shadcn.io is not affiliated with official shadcn/ui
White Label Pricing Block for Svelte
A live brand preview for a white-label program: type a brand name and pick an accent colour, and a mock client dashboard restyles as you go, beside the Partner plan.
Installation
Overview
Sell a reseller or white-label program by letting visitors try it. A short header says clients see your brand, never ours. Below it the section splits at one hairline, with plus marks where the bands meet the page's rails. On the left, a brand name Input and a row of five accent swatches drive a mock client dashboard as you type: its address (reports.<brand>.com), logo mark, name, active tab, button outline, chart bars and footer all take the brand and the colour. On the right, the one Partner plan: its price at display size, a Shine Button call to action, the 14-day pilot terms and a feature list with neutral check icons. The call to action is the only use of the theme's primary colour. The swatches are the theme's own colours (primary, destructive, a blend of the two, a chart colour and the foreground), so the preview looks at home in every preset. Built with Guides, Field, Input, Shine Button and Lucide icons, with CSS transitions only. For agencies, SaaS partner programs and platforms that let others resell them under their own brand.
FAQ
How do I change the plan, the features and the mock dashboard?
The price, the name and the terms are written in the markup beside the call to action, and FEATURES is the list under it. The mock dashboard's content is STATS (three tiles) and BARS (a year of values as percentages of the tallest bar); the stand-in brand is DEFAULT_BRAND and the name is capped at MAX_BRAND characters. Draw the mock from your own product's screens if you can: the closer it looks to what clients see, the better it sells.
How do I offer real brand colours?
ACCENTS lists the swatches: an id, a name and a CSS color. They are theme tokens here (var(--primary), var(--destructive), a color-mix of two tokens, var(--chart-3), var(--foreground)) so the block stays in tune with any preset. In your own project, put brand colours in the color field instead: hex, oklch() or any CSS colour. The preview paints with the colour pulled 25% toward the text colour, so it keeps its contrast against the page in light and dark themes; the mock puts no text on the colour, only fills and outlines.
How do I connect the call to action to a partner sign-up?
The button is a real link. It's a ShineButton whose asChild renders the link. Point it at your partner application or checkout. To carry the preview over, add the brand name and the swatch's id to the address, for example /partners/apply?brand=Fernhill&accent=red, and prefill the application with them.
Is the preview accessible?
Yes. The brand name has a visible label, and the swatches are a native radio group named "Accent colour": Tab reaches the selected swatch and the arrow keys change it, with a visible focus ring and a name for each colour. The mock dashboard is decorative, so it is hidden from assistive technology and inert; a polite status line says "Preview: Fernhill Analytics, theme accent" when the field loses focus or a colour is picked, and not at every key press. The plan is an h3 under the section's h2 and the features are a list.
What exactly changes as I type?
Everything that carries the brand: the text in the mock's header and footer, the address (the name lowercased, with anything that isn't a letter or digit removed; a name of only symbols gives brand) and the colour of the logo mark, the active tab's underline, the button's outline and the chart. An empty field shows "Your brand" and reports.yourbrand.com, so the mock never looks broken. Colour changes fade in under a short transition, which is off for reduced motion.
How does the split adapt to smaller screens?
From the lg breakpoint the preview and the plan sit on either side of a vertical hairline, and the plan's button stays within the first screen. Below it the order is the header, the brand name and swatches, the mock, then the plan. On a phone the mock drops its report subtitle and shortens its chart so the plan's button stays within a screen and a half, and the mock's navigation tabs hide to leave room for the name.
When should I show one partner plan instead of tiers?
Use one plan when most partners qualify for the same terms and the deal is closed in a conversation: a single offer keeps attention on what partners get under their own brand. Show tiers when partner terms really differ, such as client limits, revenue share or support levels, so partners can find their level without asking.