Installation

Requirements

• react 17.x | 18.x
• node >= 16.x

Installation

Install package

To install the package, please run:

npm install @deriv/quill-design@latest

Setup Styles

add this to your main or global stylesheet, so you get all the needed classes for the components.

@import '@deriv/quill-design/dist/quill-design.css';

if you want to use the components, this is it, go ahead, you're done. if you wanna use the quill-tokens as well, keep reading.

Setting up quill tailwind config ( optional )

If you just want to use the components, you don't have to setup the configuration and tailwind.

Setup Tailwind

based on your project and build tools please follow the instructions on the tailwind official documentation to install it on your project.

when you're done with tailwind installation, please add:

1. update your tailwind.config.js to use the quill customised tailwind config as preset, like so:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // your theme stuff
    }
  },
  presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],
};

2. add the required stylesheet to your global stylesheet file, so your global stylesheet should look something like:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@deriv/quill-design/dist/quill-design.css';
@import '@deriv/quill-design/quill-tailwind/styles.css';
@import '@deriv/quill-design/quill-tailwind/fonts.css';

Setup VS-Code IntelliSense

Please follow the instruction on Setup IntelliSense to have developer experience.