Styling

Cimpress UI components are designed to be consistent across all Cimpress applications. They include built-in styling that has been considered carefully, and has been extensively tested. In general, customizing Cimpress UI design is discouraged, but most components do offer some level of control.

Important!

The internal DOM structure, CSS properties, and CSS class names of Cimpress UI components are not part of the public API and can change at any time.

Style props

Most Cimpress UI components support a limited set of styling options. While internal component styles such as padding, colors, borders, and text styles are not available to override, external styles like margins can be set on most components.

For a list of style props available on a specific component, consult that component’s API reference.

The example below uses the marginTop prop on a Button to offset it further from the rest of the form:

Preview

Name*

Email*

Password*

Create account

Code

import { Button, Form, Stack, TextField } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Form>
      <Stack gap={16}>
        <TextField label="Name" name="name" isRequired />
        <TextField label="Email" name="email" defaultValue="test@example.com" isRequired />
        <TextField label="Password" name="password" type="password" isRequired />

        <Button type="submit" marginTop={32}>
          Create account
        </Button>
      </Stack>
    </Form>
  );
}

Responsiveness

In addition to static values, some props support object syntax to specify different values for the prop depending on the responsive breakpoint.

Cimpress UI’s breakpoints are mobile first, which means style props apply at that breakpoint and above. For example, the lg breakpoint is applied at screen sizes 1024px and wider.

The example below shows a radio group whose options are stacked vertically by default, but horizontally on screen sizes >= 1024px:

Preview

Favourite fruit

Apple

Banana

Cherry

Code

import { Radio, RadioGroup } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <RadioGroup label="Favourite fruit" direction={{ sm: 'vertical', lg: 'horizontal' }}>
      <Radio value="apple">Apple</Radio>
      <Radio value="banana">Banana</Radio>
      <Radio value="cherry">Cherry</Radio>
    </RadioGroup>
  );
}

Custom components

Sometimes, you may find yourself needing to build a component that doesn’t exist in Cimpress UI yet. In these cases, you can ensure consistency with other Cimpress UI components by utilizing Cimpress UI’s CSS variables. Consult the foundation guides for more information.

Escape hatches

While we encourage teams to utilize Cimpress UI as it is, we do realize that sometimes product specific customizations may be needed. In these cases, we encourage you or your designers to talk to us. We may be able to suggest an alternative implementation strategy, or perhaps your design can help inform future Cimpress UI additions.

While the traditional className and style props are not supported in Cimpress UI components, there are two escape hatches that you can use at your own risk. These are UNSAFE_className and UNSAFE_style. Use of these props should be considered a last resort. They can be used to work around bugs or limitations in Cimpress UI, but should not be used in the long term.

The internal DOM structure, CSS properties, and CSS class names of Cimpress UI components can change at any time, which may lead to conflicts with your custom CSS overrides.