sgds-govtech-react

React components powered by Singapore Government Design System.

React Documentation can be found here - https://govtechsg.github.io/sgds-govtech-react

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!

Installation

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.

Usage

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

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

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 https://www.designsystem.tech.gov.sg/docs/customise-sgds/ 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">
      <Button>Submit</Button>
    </div>
  );
};

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