Styling the React UI kit components

Stylesheet

The @weavy/uikit-react package contains pre-compiled stylesheets for inclusion in your app. You can either include the complete stylesheet from @weavy/uikit-react/dist/css/weavy.css, or you can reduce the css load by including stylesheets for individual Weavy apps. For instance, if you only use the Weavy chat app you can include @weavy/uikit-react/dist/css/weavy-chat.css.

You can provide the stylesheet using a <link> in your html (you will need to copy the stylesheet from the package to a proper location on your web server or use an external CDN link as in the example below).

<link href="https://cdn.jsdelivr.net/npm/@weavy/uikit-react/dist/css/weavy.css" rel="stylesheet" crossorigin="anonymous" />

If you have a build system such as webpack configured to process stylesheet includes, you can instead import the stylesheet directly from the package in your JS or typescript.

import "@weavy/uikit-react/dist/css/weavy.css";

Customizing styles

You can customize the styles in several ways, either by simply overriding the styles in your own stylesheet or by including and customizing the source SCSS files in your build pipeline.

Overriding CSS

The easiest way is to simply override any class name in your own stylesheet. All weavy class selectors starts with the .wy- prefix.

.wy-button {
    border-radius: .5rem;
}

Customizing SCSS

The SCSS source files are available in the package and if you have a SCSS build pipeline, you can integrate the weavy sources into your own SCSS. This way you can customize any SCSS variables or combine overrides. Make sure you specify the node_modules path correctly relative to your scss file.

@use "../node_modules/@weavy/uikit-react/scss/weavy";

Overriding UI elements

Common UI elements such as icons, buttons, dropdowns and overlays (modals) can be overridden and customized very simply in your code to match your own UI framework. Take a copy of the UI component you want to override and place it in your own application. The overridable UI components can be found in @weavy/uikit-react/src/ui/. Modify the copied file any way you like. Note that it still needs to use the same paramenters for input.

The second step is to apply the override. You only need do this the first time you import weavy in your code, before you make use of any weavy component.

// Import overridable UI elements from Weavy
import { Icon, Button, Dropdown, Overlay } from '@weavy/uikit-react';

// Import custom UI elements
import CustomIcon from './Icon';
import CustomButton from './Button';
import CustomDropdown from './Dropdown';
import CustomOverlay from './Overlay';

// Apply the override(s)
Icon.UI = CustomIcon.UI;
Button.UI = CustomButton.UI;
Dropdown.UI = CustomDropdown.UI;
Dropdown.Item = CustomDropdown.Item;
Overlay.UI = CustomOverlay.UI;
Weavy Docs