Iron Plans
Search…
Custom themes
Make Iron Plans more closely match your design
We expose a few parameters to change your Iron Plans theme using a Theme object with the following interface (all optional):
1
interface Theme {
2
base: {
3
customFont: string
4
fontFamily: string
5
darkMode: 'off' | 'on' | 'auto'
6
colors: {
7
primary: string
8
secondary: string
9
danger: string
10
success: string
11
}
12
}
13
gridCard: CSSStyleDeclaration
14
card: CSSStyleDeclaration
15
button: {
16
base: CSSStyleDeclaration
17
primary: CSSStyleDeclaration
18
secondary: CSSStyleDeclaration
19
danger: CSSStyleDeclaration
20
success: CSSStyleDeclaration
21
}
22
cardModal: {
23
base: {
24
card: CSSStyleDeclaration
25
innerCard: CSSStyleDeclaration
26
header: CSSStyleDeclaration
27
body: CSSStyleDeclaration
28
button: CSSStyleDeclaration
29
}
30
checkoutForm: {
31
card: CSSStyleDeclaration
32
innerCard: CSSStyleDeclaration
33
header: CSSStyleDeclaration
34
body: CSSStyleDeclaration
35
button: CSSStyleDeclaration
36
}
37
selectFreePlanConfirmation: {
38
card: CSSStyleDeclaration
39
innerCard: CSSStyleDeclaration
40
header: CSSStyleDeclaration
41
body: CSSStyleDeclaration
42
button: CSSStyleDeclaration
43
}
44
// same schema as above cardModal variants
45
cancelConfirmation: { ... }
46
switchPlanConfirmation: { ... }
47
customPlanConfirmation: { ... }
48
renewConfirmation: { ... }
49
paymentConfirmation: { ... }
50
}
51
planPrice: CSSStyleDeclaration
52
planBillingPeriod: CSSStyleDeclaration
53
table: {
54
base: {
55
table: CSSStyleDeclaration
56
thead: {
57
th: CSSStyleDeclaration
58
}
59
tbody: {
60
td: CSSStyleDeclaration
61
}
62
}
63
invoice: {
64
table: CSSStyleDeclaration
65
thead: {
66
th: CSSStyleDeclaration
67
}
68
tbody: {
69
td: CSSStyleDeclaration
70
}
71
}
72
invoices: {
73
table: CSSStyleDeclaration
74
thead: {
75
th: CSSStyleDeclaration
76
}
77
tbody: {
78
td: CSSStyleDeclaration
79
}
80
}
81
selectPaymentMethod: {
82
table: CSSStyleDeclaration
83
thead: {
84
th: CSSStyleDeclaration
85
}
86
tbody: {
87
td: CSSStyleDeclaration
88
}
89
}
90
}
91
}
Copied!

base

The majority of what you'll need to customize will be here. For most users, just changing base may be sufficient.
  • customFont tells Iron Plans to load up a Google font for your widgets. For example, if you enter 'JetBrains Mono', a request will be made to load uphttps://fonts.googleapis.com/css?family=JetBrains+Mono before rendering your components. Make sure that the font is available by checking https://fonts.google.com/
  • fontFamily is exactly like the fontFamily css attribute. You can pass in the customFont above, or Iron Plans will assume you want customFont by default.
  • darkMode can be always on or off. auto will toggle dark mode based on a user's OS and browser preferences.
  • colors have 4 different variants. Pass in any valid CSS color value, e.g. rgb, or hex.
    • primary used for your primary brand color. By default, it will be used for buttons, check marks, highlighted borders, etc. A brightened version of this color will be used for hover states.
    • secondary a complementary color, e.g. a medium gray. It will be used for less prominent buttons, e.g. Cancel states.
    • danger a color to alert users there's potential danger in their actions, e.g. confirmation of canceling a subscription.
    • success a color to signify success. Not currently used for anything yet, but might as well throw this in while you're in here!

CSSStyleDeclaration

If you require further customization, Iron Plans supports nearly every CSS property passed in as an object into Card and Button variants, e.g.
1
{
2
borderRadius: '5px',
3
fontSize: '12px',
4
backgroundColor: 'green'
5
}
Copied!

card

Will be applied to the div containing a single plan card's contents. Apply backgrounds, shadows, border radiuses, etc.

gridCard

Will be applied to the outer div containing two columns of cards. Currently it's used in the checkout page, using 10% opacity of the primary color you specify.

button

button supports the same variants as the colors above. base css will be applied to every button. primary css will be applied to only primary buttons.

table

You can apply css to any table, th, td . base css will apply to every table, invoice will only apply to the invoice table in checkout.

Other Custom CSS Compatible Elements

  • planPrice - the price text in plan cards
  • planBillingPeriod - the billing period text (e.g. /month) in plan cards

Basic Example

Take the following Theme object
1
const theme = {
2
base: {
3
customFont: 'JetBrains Mono',
4
colors: {
5
primary: '#FBD2D7'
6
},
7
fontFamily: 'JetBrains Mono, sans-serif',
8
darkMode: 'on',
9
}
10
}
Copied!
Pass it into a React widget:
1
<PlanSelect theme={theme} />
Copied!
This will result in something that looks like:
Custom Plan Select widget rendered for a customer currently subscribed to "Business Plan"

Advanced example

1
const theme = {
2
base: {
3
customFont: 'Work Sans',
4
fontFamily: '"Work Sans", sans-serif',
5
darkMode: 'on',
6
colors: {
7
primary: 'rgba(97, 111, 238, 0.8)',
8
secondary: 'rgb(103, 108, 124)',
9
danger: 'rgb(227, 54, 109)',
10
success: 'rgb(56, 168, 138)',
11
},
12
},
13
card: {
14
backgroundColor: 'rgb(38, 40, 47)',
15
boxShadow: 'rgb(0 0 0 / 33%) 0px 4px 15px 0px',
16
borderRadius: '8px',
17
border: '2px solid rgba(158, 180, 255, 0)',
18
},
19
button: {
20
base: {
21
boxShadow: 'rgb(0 0 0 / 19%) 0px 2px 5px 0px',
22
borderRadius: '5px',
23
fontSize: '14px',
24
fontWeight: '500',
25
},
26
},
27
}
28
Copied!
This theme will result in:
secondary color applied to cancel
danger color applied for this confirmation of cancel button