Using styles from Vibe design system

Forum|Forum|1 year ago
March 4, 2024
6 replies
558 views

edkiseki
Participating Frequently

Hi,

I am trying to use components from Monday’s Vibe design system (https://style.monday.com/), but I am a bit confused.

In some examples for a handful of components I see references to cx and styles, but I don’t know how to import these in my React App.js file. For instance for the Text component I see the following example:

<Text element="div" className={cx(styles.smallRectangle)} style={{
      backgroundColor: "black"
    }} align={Text.align.CENTER} color={Text.colors.FIXED_LIGHT}>
        Fixed light
      </Text>

I am able to import Text but I don’t know how to import the functions or components for cx(styles.smallRectangle)

Could you please help.
Thanks.

Matias.Monday
monday.com Team Member
Forum|Forum|1 year ago
March 7, 2024

Hello there @edkiseki,

Would you be able to please fill this form so our team can take a look into this? Please add as much detail about your case as possible.

Looking forward to hearing from you via the form!

Cheers,
Matias

Like

E

edkiseki
Author
Participating Frequently
Forum|Forum|1 year ago
March 11, 2024

Hi @Matias.Monday,

I now understand what I had to do after going through the Github repository of the Vibe design system.

cx comes from the classnames npm package, so once installed, it can be imported like this:

import cx from "classnames";

The styles come from one of the relevant css files associated with a component. For instance Text component styles can be imported this way:

import textStyles from "monday-ui-react-core/dist/Text.css" ;

Interestingly, in the repository you have styles associated with Storybook pages only. It would be good to ensure that the style examples we see on the official Vibe page are all in the /dist folder of monday-ui-react-core to make things less confusing.

Thanks!

Like

Matias.Monday
monday.com Team Member
Forum|Forum|1 year ago
March 11, 2024

Hello again @edkiseki,

I am glad you found the solution!

I will share your feedback with the team in charge of Vibe!

Cheers,
Matias

Like

Matias.Monday
monday.com Team Member
Forum|Forum|1 year ago
March 13, 2024

Hello again @edkiseki,

I heard back from the team in charge of Vibe. They mentioned that the example shown in the code snippet uses a utility for using multiple class names when provided to the component using the className prop. It is not required to provide it, and usually it’s meant for providing custom styles to components. The component itself already has its style without the className prop, so you don’t need to use and provide the classname package. It was used in the code snippet example for an internal use. We will make the code examples cleaner to make it less confusing, thanks for the feedback!