The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.
Visit our SGDS React storybook
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds/css/sgds.css"
/>
...
</head>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/sgdsusesbootstrap-iconsfor certain components like Form but it is not ship with it. Installbootstrap-iconsor 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.
$ npm i @govtechsg/sgds bootstrap-icons//importing css
import "@govtechsg/sgds/css/sgds.css";
import '@popperjs/core';
import * as bootstrap from 'bootstrap';Usage with frameworks such as React, Vue or Angular is discouraged since they manipulate the DOM in their own environments. Framework-specific implementations are in early development and can be found at sgds-react
See Changelog