Installation

Installation guide that will help you quicky spin up a site using SGDS

SGDS components make use of bootstrap v5.1.3 js library as an external dependency.

If you only need the visual parts of SGDS, or if you are using frontend frameworks like ReactJS, you do not need to import this.

For React JS

npm i @govtechsg/sgds-react

// not required if using cdn
npm i @govtechsg/sgds bootstrap-icons

@govtechsg/sgds-react is not ship with any included CSS . Apply @govtechsg/sgds styles by installing the module or using CDN.

@govtechsg/sgds uses bootstrap-icons for certain components like Form but it is not ship with it. Install bootstrap-icons or use CDN if you need it. Please refer to bootstrap-icons for usage instructions.

Visit the SGDS React storybook for detail installation guide.

For Vanilla JS

Frontend developers can use npm to download sgds and use it as a dependency in their projects. Using npm is especially useful when using a module bundler or build tool, such as Webpack.

Via node

npm i @govtechsg/sgds bootstrap-icons

If you use a module bundler like Webpack, import sgds in your entry point:

import "@govtechsg/sgds/css/sgds.css";

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Via CDN

<head>
  ...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds/css/sgds.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  ...
</head>

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
</body>