https://github.com/govtechsg/sgds-govtech-react
React components for SGDS
https://github.com/govtechsg/sgds-govtech-react
Last synced: about 1 year ago
JSON representation
React components for SGDS
- Host: GitHub
- URL: https://github.com/govtechsg/sgds-govtech-react
- Owner: GovTechSG
- License: mit
- Created: 2019-07-30T10:14:02.000Z (almost 7 years ago)
- Default Branch: v2
- Last Pushed: 2025-02-23T19:37:06.000Z (over 1 year ago)
- Last Synced: 2025-04-09T20:05:58.806Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://react.designsystem.tech.gov.sg/
- Size: 26.8 MB
- Stars: 16
- Watchers: 3
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @govtechsg/sgds-react
React components powered by [Singapore Government Design System](https://www.designsystem.gov.sg)
`@govtechsg/sgds-react` take references from [react-bootstrap](https://react-bootstrap.github.io/)
## Version Compatibility
See the below table on which version of `@govtechsg/sgds` you should be using in your project.
| @govtechsg/sgds version | @govtechsg/sgds-react version |
| ----------------------- | ----------------------------- |
| v2.x | v2.x |
## Installation
`@govtechsg/sgds-react` is not shipped with any included CSS. Apply `@govtechsg/sgds@latest` styles by installing the module or using CDN.
`@govtechsg/sgds-react` uses `bootstrap-icons` for certain components like Form, but does not ship with it. Install `bootstrap-icons` or use CDN if you need it. Please refer to [bootstrap-icons](https://icons.getbootstrap.com/#usage) for usage instructions
```js
npm install @govtechsg/sgds-react
//not required if using CDN
npm install @govtechsg/sgds bootstrap-icons
```
## Importing Components
You should import individual components like: `@govtechsg/sgds-react/Button` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
```js
import { Button } from '@govtechsg/sgds-react/Button';
// or less ideally
import { Button } from '@govtechsg/sgds-react';
```
## Stylesheets
#### Using CSS / SASS
```js
// In your entry point
// import CSS or
import '@govtechsg/sgds/css/sgds.css';
// import SASS
import '@govtechsg/sgds/sass/sgds.scss';
```
#### Using CDN
```js
//index.html
//index.css
@import url('https://designsystem.gov.sg/css/sgds.css');
```
# Advanced Usage
## "as" Prop API
With certain SGDS React components, you may want to modify the component or HTML tag that is rendered.
If you want to keep all the styling of a particular component but switch the component that is finally rendered (whether it's a different SGDS React component, a different custom component, or a different HTML tag), you can use the "as" Prop to do so.
See [example](https://react-bootstrap.github.io/docs/getting-started/introduction#as-prop-api)