White Label Pricing Block for React

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.

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.

The button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. 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.

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.

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.

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.

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.