> ## Documentation Index
> Fetch the complete documentation index at: https://ship-jskiller1404-add-ommiting-private-fields-feature.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

Ship aims for efficiency and convenience in styling by leveraging the [Mantine UI](https://v6.mantine.dev/) 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](https://v6.mantine.dev/theming/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`).

```typescript theme/components/index.ts theme={null}
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`.

```typescript theme/components/index.ts theme={null}
.label {
  font-weight: 500;
}
```