Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


React components powered by Singapore Government Design System.

React Documentation can be found here -

We are in early development! If you are trying out sgds-govtech-react, feel free to leave us feedback in the issues page, or even submit a PR!


npm install sgds-govtech-react

Peer dependencies

Note that sgds-govtech-react has a peer dependency of styled-components - both packages need to be installed.


You will need to first import the sgds css styles, either in your website's <head> element or through your frontend build.

For example, create-react-app users should insert the css into the <head> of public/index.html


Alternatively, install the sgds-govtech package:

npm install sgds-govtech

And import the css using your build tool (e.g. Webpack):

// In your entry point
import "sgds-govtech/css/sgds.css";

Customisation with Sass (advanced)

If you want to modify SGDS's base styling, you can import the Sass source (your project needs to support Sass compilation) and override SGDS's sass variables.

npm install sgds-govtech

For example, importing sgds in your own sass file:

// styles/app.scss

// Override SGDS defaults
$primary: rgb(8, 11, 56);
$secondary: #ff8c00;
$warning: rgb(134, 37, 37);

// You must override this variable!
// See for details
$sgds-font-path: "../../../fonts";

// Import all of sgds
@import "~sgds-govtech/sgds/sass/sgds.scss";

Then, in your app:

import React from "react";

import "./styles/app.scss";

export default function App() {
  return <div>...</div>;

For more information on customising with Sass, see the SGDS documentation.

Getting started

import React from "react";
import ReactDOM from "react-dom";

import { Button } from "sgds-govtech-react";

const app = () => {
  return (
    <div className="App">

ReactDOM.render(app, document.getElementById("root"));

Patch Notes

V0.1.7: Added Sidenav, Tab and their storybook documentation to the library V0.1.2: Added footer and masthead to component library