Get started
Develop
Install SGDS, use the component library, and build interfaces with shared foundations.
| npm install @govtechsg/sgds-web-component |
| pnpm add @govtechsg/sgds-web-component |
| yarn add @govtechsg/sgds-web-component |
| bun add @govtechsg/sgds-web-component |
SGDS utility classes require Tailwind CSS v4. Follow the official Tailwind installation guide for your framework.
Import the theme tokens, foundation styles, and utility classes in your main CSS file. The order matters — theme tokens must come first.
| @import "@govtechsg/sgds-web-component/themes/day.css"; |
| @import "@govtechsg/sgds-web-component/themes/night.css"; |
| @import "@govtechsg/sgds-web-component/css/sgds.css"; |
| @import "@govtechsg/sgds-web-component/css/utility.css"; /* SGDS Tailwind v4 config file */ |
SGDS foundation styles use Inter by default. Add the Google Fonts link in your HTML head before any SGDS CSS. This loads only the four weights defined by the SGDS design tokens (300, 400, 600, 700) in both normal and italic styles.
| <head> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,600;0,14..32,700;1,14..32,300;1,14..32,400;1,14..32,600;1,14..32,700&display=swap" |
| rel="stylesheet" |
| /> |
| </head> |
Import the library once at your app entry point. This registers all <sgds-*> custom elements globally.
React 19 and above
Step 1: For client-side only React 19+ apps (e.g. Vite), you can use native web component tags directly. Import the library once at your app entry point.
| import "@govtechsg/sgds-web-component"; |
Step 2: Use web component tags in any component. Custom events use the on prefix with the original event name.
| const App = () => { |
| return ( |
| <form> |
| <sgds-input label="Full name" name="fullName" onsgds-change={(e: CustomEvent) => console.log(e)}></sgds-input> |
| <sgds-button type="submit" ariaLabel="Submit">Submit</sgds-button> |
| </form> |
| ); |
| }; |
| export default App; |
React wrapper components (recommended for SSR)
Step 1: For SSR frameworks (Next.js, Remix) or React 18 and below, use the React-wrapped SGDS components. The wrappers resolve hydration timing issues and provide camelCase event naming.
| import { SgdsButton, SgdsInput } from "@govtechsg/sgds-web-component/react"; |
| const App = () => { |
| return ( |
| <form> |
| <SgdsInput label="Full name" name="fullName" onSgdsChange={(e) => console.log(e)} /> |
| <SgdsButton type="submit">Submit</SgdsButton> |
| </form> |
| ); |
| }; |
| export default App; |
TypeScript support
Step 1: Add a type declaration file at your project root to enable IntelliSense for all component props and typed event handlers.
| import "@govtechsg/sgds-web-component/types/react"; |
Step 2: Ensure the file is included by your tsconfig.json.
| { |
| "include": ["types.d.ts", "**/*.ts", "**/*.tsx"] |
| } |
Step 1: Tell Vue to treat sgds-* tags as custom elements.
| import { defineConfig } from "vite"; |
| import vue from "@vitejs/plugin-vue"; |
| export default defineConfig({ |
| plugins: [ |
| vue({ |
| template: { |
| compilerOptions: { |
| isCustomElement: (tag) => tag.startsWith("sgds-"), |
| }, |
| }, |
| }), |
| ], |
| }); |
Step 2: Import the library in your app entry.
| import "@govtechsg/sgds-web-component"; |
Step 1: Add CUSTOM_ELEMENTS_SCHEMA to your standalone component.
| import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; |
| @Component({ |
| selector: "app-root", |
| templateUrl: "./app.component.html", |
| schemas: [CUSTOM_ELEMENTS_SCHEMA] // Step 1 |
| }) |
| export class AppComponent {} |
Step 2: Import the library in your root component to register all custom elements globally.
| import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; |
| import "@govtechsg/sgds-web-component"; // Step 2 |
| @Component({ |
| selector: "app-root", |
| templateUrl: "./app.component.html", |
| schemas: [CUSTOM_ELEMENTS_SCHEMA] |
| }) |
| export class AppComponent {} |
Setup
Step 1: Import the React-wrapped SGDS components in your client components. The React wrappers resolve hydration timing issues that cause event listeners to fail on initial page load.
| 'use client'; |
| import { SgdsInput, SgdsButton } from "@govtechsg/sgds-web-component/react"; |
| export default function MyForm() { |
| return ( |
| <> |
| <SgdsInput label="Name" onSgdsChange={(e) => console.log(e)} /> |
| <SgdsButton variant="primary" onSgdsBlur={(e) => console.log(e)}>Submit</SgdsButton> |
| </> |
| ); |
| } |
TypeScript support
Step 1: Add a type declaration file at your project root to enable IntelliSense for all component props and typed event handlers.
| import "@govtechsg/sgds-web-component/types/react"; |
Step 2: Ensure the file is included by your tsconfig.json.
| { |
| "include": ["types.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"] |
| } |
Cannot find your frontend framework integration?
Use templates, blocks, and components when you need to move from product intent to working UI quickly.
Components
Use SGDS components for interaction patterns such as buttons, tabs, forms, cards, and tables.
Apply SGDS utility classes for spacing, layout, typography, colour, and responsive behaviour instead of custom CSS.
Accelerate development with AI-assisted workflows and agent skills that understand SGDS components, utilities, and patterns.