{"id":19107146,"url":"https://github.com/govtechsg/sgds-govtech-react","last_synced_at":"2025-04-09T20:06:06.173Z","repository":{"id":196600950,"uuid":"199627753","full_name":"GovTechSG/sgds-govtech-react","owner":"GovTechSG","description":"React components for SGDS","archived":false,"fork":false,"pushed_at":"2025-02-23T19:37:06.000Z","size":28088,"stargazers_count":16,"open_issues_count":10,"forks_count":8,"subscribers_count":3,"default_branch":"v2","last_synced_at":"2025-04-09T20:05:58.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react.designsystem.tech.gov.sg/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GovTechSG.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-30T10:14:02.000Z","updated_at":"2025-04-08T07:31:07.000Z","dependencies_parsed_at":"2023-10-05T08:03:43.462Z","dependency_job_id":"398ff8c7-9356-40c9-b6f2-82f1f4d94e56","html_url":"https://github.com/GovTechSG/sgds-govtech-react","commit_stats":{"total_commits":780,"total_committers":23,"mean_commits":33.91304347826087,"dds":"0.47948717948717945","last_synced_commit":"6386440978441c4d1a8d5b690cc0fdb1f6852e02"},"previous_names":["govtechsg/sgds-govtech-react"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-govtech-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-govtech-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-govtech-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-govtech-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GovTechSG","download_url":"https://codeload.github.com/GovTechSG/sgds-govtech-react/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103871,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T04:11:25.640Z","updated_at":"2025-04-09T20:06:06.144Z","avatar_url":"https://github.com/GovTechSG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @govtechsg/sgds-react\n\nReact components powered by [Singapore Government Design System](https://www.designsystem.gov.sg)\n\n`@govtechsg/sgds-react` take references from [react-bootstrap](https://react-bootstrap.github.io/)\n\n## Version Compatibility\n\nSee the below table on which version of `@govtechsg/sgds` you should be using in your project.\n\n| @govtechsg/sgds version | @govtechsg/sgds-react version |\n| ----------------------- | ----------------------------- |\n| v2.x                    | v2.x                          |\n\n## Installation\n\n`@govtechsg/sgds-react` is not shipped with any included CSS. Apply `@govtechsg/sgds@latest` styles by installing the module or using CDN.\n\n`@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\n\n```js\n\nnpm install @govtechsg/sgds-react\n\n//not required if using CDN\nnpm install @govtechsg/sgds bootstrap-icons\n\n```\n\n## Importing Components\n\nYou 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.\n\n```js\nimport { Button } from '@govtechsg/sgds-react/Button';\n\n// or less ideally\nimport { Button } from '@govtechsg/sgds-react';\n```\n\n## Stylesheets\n\n#### Using CSS / SASS\n\n```js\n// In your entry point\n// import CSS or\nimport '@govtechsg/sgds/css/sgds.css';\n// import SASS\nimport '@govtechsg/sgds/sass/sgds.scss';\n```\n\n#### Using CDN\n\n```js\n\n//index.html\n\u003clink href='https://designsystem.gov.sg/css/sgds.css' rel='stylesheet' type='text/css'/\u003e\n\n//index.css\n@import url('https://designsystem.gov.sg/css/sgds.css');\n\n```\n\n# Advanced Usage\n\n\n## \"as\" Prop API\n\nWith certain SGDS React components, you may want to modify the component or HTML tag that is rendered.\n\nIf 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.\n\nSee [example](https://react-bootstrap.github.io/docs/getting-started/introduction#as-prop-api)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovtechsg%2Fsgds-govtech-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgovtechsg%2Fsgds-govtech-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovtechsg%2Fsgds-govtech-react/lists"}