// Neutral pallet
$chalk: rgb(228, 228, 228);
$charcoal: rgb(51, 51, 51);
$pebble: rgb(117, 117, 117);
$silver: rgb(196, 196, 196);
$smoke: rgb(248, 248, 248);
$white: rgb(255, 255, 255);

// Additional pallet
$scooter: rgb(38, 186, 212);
$buttercup: rgb(244, 174, 38);
$cerulean: rgb(1, 82, 129);
$cinnabar: rgb(232, 61, 71);
$fern: rgb(92, 184, 92);
$sky: rgb(16, 156, 241);
$skyhigh: rgb(206 228 255);
$tangerine: rgb(229, 114, 0);

$error: rgb(255, 52, 24);

$primary: $scooter;
$secondary: $pebble;
$tertiary: $charcoal;

$fontfamily: 'Montserrat', sans-serif;

Create your index.scss file:

@import 'colors.scss';
@import '~ghost-design-system/dist/assets/_global.scss';
@import '~ghost-design-system/dist/assets/_general.scss'; // Optional

Load the required icon set, for example in your index.tsx :

import { loadIcons } from 'ghost-design-system';

loadIcons();

You should be ready to use any of the components of the library.

References

This react components library uses the following:

Peer dependencies:

react
react-dom
suneditor - for SCSS import
tippyjs - for SCSS import

Dev dependencies:

To go further

Keywords

FAQs

What is ghost-design-system?

Is ghost-design-system popular?

Is ghost-design-system well maintained?

Last updated on 07 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install