Style your app

You can style a Stripe App using design tokens that we provide. This helps you match the Dashboard visually, provide consistency, and maintain a high quality bar.

• The Box and Inline components support custom styles.
• Other components have preset styles which you can sometimes adjust.

Custom styles

The Box and Inline components support custom styles. Box and Inline are styleable containers like HTML div and span. To style them, use their css prop. They use CSS syntax, with a few differences from vanilla CSS.

Unlike in vanilla CSS, you can’t choose arbitrary font faces and styles. Use the font and fontWeight properties. For more information, see Typography.

Layout also works differently than it does in vanilla CSS. Instead, Stripe Apps use the same layout system Stripe uses internally. For more information, see Layout.

All styling tokens are exposed through TypeScript, which means you’ll get a dropdown in your editor to autocomplete from the available values.

Color

Set colors in your custom styles by using the following values.

Backgrounds

To set the background color of a Box or Inline component, use the CSS backgroundColor property:

Use the following tokens as values for backgroundColor:

Borders

To add a border to a Box or Inline component, use the CSS keyline property:

Use the following tokens as values for keyline:

Text & icons

To set a color for all text or icons in a Box or Inline component, use the CSS color property:

For an icon that contrasts with the other children of its container, use fill. Otherwise, icons match the text around them.

Use the following tokens as values for color and fill:

Typography

To change the style of text in a Box or Inline component, use the custom font property:

The following styles are available:

Text overflow and wrapping

To change how overflow text is handled in a Box component, use the textOverflow, overflow, whiteSpace, and overflowWrap properties:

For for more overflow and text wrapping scenarios, see Wrapping and Breaking Text.

Text transformation

You can transform text in a Box or Inline component using the textTransform property:

Here are some common values that can be used for the textTransform property:

See text-transform for the full list.

Text alignment

You can change the alignment of text in a Box component using the textAlign property:

Use the following token values for textAlign:

Layout

The Stripe Apps layout styling API allows you to write styles that can take advantage of our design tokens and includes other improvements over vanilla CSS. Use these tokens in a Box component to control layout for its children. Other containers, like List, handle layout automatically.

We conceptualize layouts as “stacks.”

Horizontal stacks

To stack elements horizontally and match widths:

To stack elements horizontally with fractional widths:

To stack elements horizontally with a fractional width for one element and the rest of the elements stretched:

To align elements to the start with a gap:

To distribute elements:

To align elements to the end with a gap:

To vertically align elements to the bottom:

To include dividers between elements:

To wrap items into rows:

To have a different horizontal and vertical gap:

To center elements horizontally while wrapping:

To center elements vertically while wrapping:

Vertical stacks

To stack elements vertically and match widths:

To stack elements vertically while centering horizontally:

Layered stacks

To display elements atop one another:

Layout properties

Spacing

You can specify margins, padding, and layout gaps using the values listed below.

Sizing

You can specify width and height using fractions or content-based sizing tokens.

Fractional sizing

The available fractions include halves, thirds, quarters, fifths, sixths and, twelfths. The fill token enables a component to match the size of its container.

Content-based sizing

You can size a Box relative to the content within it.

Preset styles

Components other than Box and Inline have preset styles, which helps maintain consistency. You can sometimes control or override the presets in a specific way.

Automatic styling

Some components style themselves automatically. For example, Chips automatically change their appearance depending on what callbacks they implement. This helps the user understand their behavior. To avoid confusion, you can’t override these details.

Several presets

Some components, like Buttons, have a few styles you can select using a prop. See the documentation for each component for details.

Limited CSS

Some components support specific CSS properties. For example, Icons support color using the fill property. See the documentation for each component for details.