Browse Get started

Get started

Develop

Install SGDS, use the component library, and build interfaces with shared foundations.

GitHub

Storybook

Install SGDS

Add the SGDS web component package to your project.

npm

pnpm

yarn

bun

Bash

Copy

$	npm install @govtechsg/sgds-web-component

Bash

Copy

$	pnpm add @govtechsg/sgds-web-component

Bash

Copy

$	yarn add @govtechsg/sgds-web-component

Bash

Copy

$	bun add @govtechsg/sgds-web-component

Set up Tailwind CSS

SGDS utility classes require Tailwind CSS v4. Follow the official Tailwind installation guide for your framework.

Tailwind CSS framework guides

Import styles

Import the theme tokens, foundation styles, and utility classes in your main CSS file. The order matters — theme tokens must come first.

globals.css

Copy

1	@import "@govtechsg/sgds-web-component/themes/day.css";
2	@import "@govtechsg/sgds-web-component/themes/night.css";
3	@import "@govtechsg/sgds-web-component/css/sgds.css";
4	@import "@govtechsg/sgds-web-component/css/utility.css"; /* SGDS Tailwind v4 config file */

Set up font

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.

index.html

Copy

1	<head>
2	<link rel="preconnect" href="https://fonts.googleapis.com" />
3	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
4	<link
5	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"
6	rel="stylesheet"
7	/>
8	</head>

Import the component library

Import the library once at your app entry point. This registers all <sgds-*> custom elements globally.

React

Vue

Angular

Next.js

Others

React 19 and above

Step 1: Import the library once at your app entry point.

src/main.tsx

Copy

1	import "@govtechsg/sgds-web-component";

Step 2: Use web component tags directly in any component.

src/App.tsx

Copy

1	const App = () => {
2	return (
3	<form>
4	<sgds-input label="Full name" name="fullName"></sgds-input>
5	<sgds-button type="submit" ariaLabel="Submit">Submit</sgds-button>
6	</form>
7	);
8	};
9	export default App;

React 18 and below

Step 1: Use the React wrapper components for proper event handling.

src/App.tsx

Copy

1	import { SgdsButton, SgdsInput } from "@govtechsg/sgds-web-component/react";

Step 2: Use the wrapper components in JSX.

src/App.tsx

Copy

1	import { SgdsButton, SgdsInput } from "@govtechsg/sgds-web-component/react";
2
3	const App = () => {
4	return (
5	<form>
6	<SgdsInput label="Full name" name="fullName" />
7	<SgdsButton type="submit">Submit</SgdsButton>
8	</form>
9	);
10	};
11	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.

types.d.ts

Copy

1	import "@govtechsg/sgds-web-component/types/react";

Step 2: Ensure the file is included by your tsconfig.json.

tsconfig.json

Copy

1	{
2	"include": ["types.d.ts", "*/.ts", "*/.tsx"]
3	}

Step 1: Tell Vue to treat sgds-* tags as custom elements.

vite.config.ts

Copy

1	import { defineConfig } from "vite";
2	import vue from "@vitejs/plugin-vue";
3
4	export default defineConfig({
5	plugins: [
6	vue({
7	template: {
8	compilerOptions: {
9	isCustomElement: (tag) => tag.startsWith("sgds-"),
10	},
11	},
12	}),
13	],
14	});

Step 2: Import the library in your app entry.

src/main.ts

Copy

1	import "@govtechsg/sgds-web-component";

Step 1: Add CUSTOM_ELEMENTS_SCHEMA to your standalone component.

app.component.ts

Copy

1	import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2
3	@Component({
4	selector: "app-root",
5	templateUrl: "./app.component.html",
6	schemas: [CUSTOM_ELEMENTS_SCHEMA] // Step 1
7	})
8	export class AppComponent {}

Step 2: Import the library in your root component to register all custom elements globally.

app.component.ts

Copy

1	import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2	import "@govtechsg/sgds-web-component"; // Step 2
3
4	@Component({
5	selector: "app-root",
6	templateUrl: "./app.component.html",
7	schemas: [CUSTOM_ELEMENTS_SCHEMA]
8	})
9	export class AppComponent {}

Setup

Step 1: Create a client-side library loader.

src/app/sgds.tsx

Copy

1	"use client";
2	import { useEffect } from "react";
3
4	export default function SgdsLoader() {
5	useEffect(() => {
6	import("@govtechsg/sgds-web-component");
7	}, []);
8	return null;
9	}

Step 2: Import the loader in your root layout.

src/app/layout.tsx

Copy

1	import SgdsLoader from "./sgds";
2
3	export default function RootLayout({ children }: { children: React.ReactNode }) {
4	return (
5	<html lang="en">
6	<head>
7	<SgdsLoader />
8	</head>
9	<body>{children}</body>
10	</html>
11	);
12	}

TypeScript support

Step 1: Add a type declaration file at your project root to enable IntelliSense for all component props and typed event handlers.

types.d.ts

Copy

1	import "@govtechsg/sgds-web-component/types/react";

Step 2: Ensure the file is included by your tsconfig.json.

tsconfig.json

Copy

1	{
2	"include": ["types.d.ts", "*/.ts", "*/.tsx"]
3	}

Cannot find your frontend framework integration?

Raise an issue to propose for more integration guides

Start from shared building blocks

Use templates, blocks, and components when you need to move from product intent to working UI quickly.

Templates

Use full-page layouts for common service journeys and admin workflows.

Explore templates

Blocks

Compose reusable sections such as headers, forms, filters, and stats.

Browse blocks

Components

Use SGDS components for interaction patterns such as buttons, tabs, forms, cards, and tables.

View components

Use SGDS utilities

Apply SGDS utility classes for spacing, layout, typography, colour, and responsive behaviour instead of custom CSS.

Explore in Storybook

Use SGDS AI

Accelerate development with AI-assisted workflows and agent skills that understand SGDS components, utilities, and patterns.

Explore SGDS AI

Get started

Develop

Install SGDS

Set up Tailwind CSS

Import styles

Set up font

Import the component library

React 19 and above

React 18 and below

TypeScript support

Setup

TypeScript support

Start from shared building blocks

Templates

Blocks

Components

Use SGDS utilities

Use SGDS AI

Singapore Government Design System