@govtechsg/sgds
v2.3.5
Published
Design System unites Singapore Government digital services around a common visual language and user experience
Downloads
17,250
Maintainers
Keywords
Readme
Singapore Government Design System
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
usesbootstrap-icons
for certain components like Form but it is not ship with it. Installbootstrap-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/[email protected]/font/bootstrap-icons.css">
...
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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