Styling

Container

The Weavy components will resize and adapt automatically to a flex layout in the container where they are placed.

The wrapper UI components <Messenger> and <Chat> has predefined overflow scroll styles. If you use other UI components to provide a custom messenger you will need to provide overflow scrolling to the container you are placing the component in by adding overflow-y: scroll in your CSS.

Stylesheet

All styling is provided from the @weavy/themes package. The themes package contains central styling that can be used in multiple frameworks, for instance both in uikit-react and dropin-js. This means that any customizations you make may be kept even if you decide to change frontend.

Install the themes package if you haven't already.

npm install @weavy/themes

You need to include the default stylesheet from @weavy/themes/dist/weavy-default.css. If you plan to only use the messenger or chat components, you can reduce the css load by only include the stylesheet for that app using for instance @weavy/themes/dist/weavy-default-messenger.css or @weavy/themes/dist/weavy-default-chat.css.

You may provide the stylesheet traditionally 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.

<!-- HTML -->
<link href="https://cdn.jsdelivr.net/npm/@weavy/themes/dist/weavy-default.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.

/* Javascript/Typescript */
import "@weavy/themes/dist/weavy-default.css";

Customizing styles

You can customize the styles in several ways, either by simply overriding the styles or by including the SCSS in your build pipeline or by customizing your

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.

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

Customizing SCSS

The SCSS source files are also available in the themes package. 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.

/* SCSS */
@use "./node_modules/@weavy/themes/scss/weavy-default";

Make sure you specify the node_modules path correctly relative to your scss file.

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 customized 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