Styling

Restyle Bunny's React components to match your brand with the appearance prop, using variables, rules and fonts, on BunnyProvider or on a single component.

Every Bunny component is styled through one prop, appearance. Set it on BunnyProvider to restyle every component inside it, or on any component to restyle just that one on top of the provider’s. style and className on a component are for positioning only.

appearance has three parts:

• variables: colors, font, radius and spacing the default look is built from. Change one and everything built from it follows.
• rules: per-selector overrides such as .Input, .Label or .Button, merged over the defaults.
• fonts: web fonts for variables.fontFamily, loaded onto the page and into the payment fields.

import { BunnyProvider, Checkout } from "@bunnyapp/components";

<BunnyProvider
  apiHost={apiHost}
  token={token}
  appearance={{
    variables: {
      colorPrimary: "#14532d",
      colorBackgroundSecondary: "#f6f1e7",
      fontFamily: "Inter, sans-serif",
    },
    rules: {
      ".Input:focus": { borderColor: "#14532d" },
    },
    fonts: [
      { cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" },
    ],
  }}
>
  <Checkout priceListCode="business-monthly" />
</BunnyProvider>

Learning the APILink to Learning the API section

The Appearance type is the reference. Type appearance={{ in your editor and use autocomplete and hover: every variable documents its default, and most selectors do too.

For the full styling guide (fonts, payment fields, CSP) and upgrading from 1.x, see Styling components and Migrating to 2.0 in the package README.

The bunny-components agent skill can write an appearance object for you.