Installation

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

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.

@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.

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>

Last updated 22 November 2023
Home


Latest version 2.2.0