Styling

Ship aims for efficiency and convenience in styling by leveraging the Mantine UI library. Mantine UI offers a wide range of customizable components and hooks that facilitate the creation of visually appealing and functional interfaces.

​

Theme Configuration (theme/index.ts)

Our application’s design system is built on top of Mantine’s theme object. The theme object allows us to define global style properties that can be applied consistently across web application.

​

Custom Components (components/index.js)

We extend Mantine’s components to create custom-styled versions specific to our application needs.

Here’s an example of how we extend the Mantine Button component:

• We set the default button size to ‘large’ (lg).

import { Button } from '@mantine/core';

import classes from './index.module.css';

export default Button.extend({
  defaultProps: {
    size: 'lg',
  },
  classNames: {
    label: classes.label,
  },
});

• Custom class names are applied for additional styling, defined in our index.module.css.

.label {
  font-weight: 500;
}