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!
npm install sgds-govtech-react
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
<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";
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.
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"));
V0.1.7: Added Sidenav, Tab and their storybook documentation to the library V0.1.2: Added footer and masthead to component library