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).
theme/components/index.ts
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.
theme/components/index.ts
.label {
  font-weight: 500;
}