@govtechsg/sgds

2.3.3 • Public • Published

Singapore Government Design System

npm

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Visit our React storybook Visit our Web Component storybook


Installation

CSS

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

Vanilla JavaScript

SGDS components makes 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 React, you do not need to import this.

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

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

For more information, please refer to the components documentation.

Via NPM

$ npm i @govtechsg/sgds bootstrap-icons

For Webpack

//importing css
import '@govtechsg/sgds/css/sgds.css';

import '@popperjs/core';
import * as bootstrap from 'bootstrap';

Patch Notes

See Changelog

Readme

Keywords

none

Package Sidebar

Install

npm i @govtechsg/sgds

Weekly Downloads

2,317

Version

2.3.3

License

MIT

Unpacked Size

621 kB

Total Files

97

Last publish

Collaborators

  • kenneth_leong_gt
  • govtechsg_a11y
  • younglim
  • gtrgchua
  • isomer.govtech
  • gyunikuchan
  • gds_ace_dlt
  • gdsbot
  • gylsky
  • ryanoolala
  • dyihoon90