What it does
Singapore Government Design System supplies shared foundations, components, templates and blocks for public services. SGDS v3 connects Figma libraries with web components and design tokens for colour, spacing and typography. The component code is MIT-licensed; private GovTech Figma libraries require a corporate account.
SGDS offers different starting points for design and development. GovTech designers enable SGDS v3 through Figma’s Assets library control. Agencies and partners without those private libraries are directed to the official SGDS UI Kit in Figma Community.
For code, open Develop and install @govtechsg/sgds-web-component. Import theme tokens before foundation and utility styles, then register the component library at the app entry point. The guide has separate React, Vue, Angular and Next.js examples. SGDS utility classes require Tailwind CSS v4.
React 19 client-only apps can use native custom-element tags. React 18 and earlier, and server-rendered frameworks such as Next.js, use the supplied React wrappers. Templates offer full pages, while Blocks provide sections such as headers, forms and filters. The design guide tells .gov.sg teams to include the Official Government Banner and Global Footer.
Strengths
- Figma libraries and code share a design-token model
- Framework-specific examples cover events and component imports
- Templates and blocks provide larger layouts beyond individual controls
Watch out for
- Private GovTech Figma libraries require a corporate account
- SGDS utility classes require Tailwind CSS v4
- Older React and server-rendered apps need the wrapper setup
Best for
- Teams designing Singapore government digital services
Sources
- Singapore Government Design System (Oct 27, 2026)
- SGDS design getting-started guide (Oct 27, 2026)
- SGDS developer getting-started guide (Oct 27, 2026)
- SGDS Web Component MIT licence (Oct 27, 2026)