Version 0.40.0


Full documentation

Full documentation of Saagie UI is available in the Saagie Design System.


Install Saagie UI in your project with NPM:

npm install saagie-ui --save

CSS (not recommended)

Add the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="/saagie-ui/dist/css/saagie-ui.css">

SCSS (recommended)

Import the SCSS in your project main SCSS file.

@import "~saagie-ui/src/scss/index";


Some of our components require the use of JavaScript.

Import the individual component JS into your own wrapper component.
And follow each component documentation to configure and init components.


import { Tooltip } from 'saagie-ui';

new Tooltip(myElement, {}).init();

Starter HTML template

Be sure to have your pages set up with the latest design and development standards.
That means using an HTML5 doctype, including a viewport meta tag for proper responsive behaviors and add the #sui-root ID on the <body> tag (or any other root tag) to enable Saagie UI helpers classes.
Put it all together and your pages should look like this:`

<!doctype html>
<html lang="en">
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Import the CSS -->
    <link rel="stylesheet" href="/saagie-ui/dist/css/saagie-ui.css">
  <body id="sui-root">
    <h1>Hello, world!</h1>