skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-components

Provides reference documentation and framework integration guidance for SGDS web components.

Updated Sep 5, 2026
Search Tags:#frontend#react#design system#nextjs#web components#sgds#singapore government
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-components-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-components
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-components
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-components-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @govtechsg/sgds-web-component, and includes references (resource) components.

What problem does it solve? Developers building Singapore government websites need accurate, component-level guidance for the SGDS web component library, including correct installation, framework-specific integration patterns, and per-component API details that generic documentation often misses. ## Core Features & Use Cases - Framework Integration Guidance: Covers React 19+, React 18 and below, Next.js (SSR), Vue, and Angular with correct import paths, event naming conventions, and hydration-safe patterns. - Component Reference Library: Detailed per-component references for 40+ <sgds-*> elements covering attributes, slots, events, methods, usage guidelines, and edge cases. - Troubleshooting Workflow: Directs inspection of compiled source in node_modules when component behavior is unexpected. - Use Case: A developer building a Next.js form asks how to use <sgds-combo-box> with validation; the Skill supplies the React wrapper import, camelCase event props, and the correct hasFeedback/invalidFeedback attributes. ## Quick Start Ask how to use a specific SGDS component such as sgds-button or sgds-combo-box in your React, Next.js, Vue, or Angular project.

Frequently Asked Questions about sgds-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use SGDS web components in a Next.js project?▼

Next.js is SSR-based, so use the React wrapper components imported from @govtechsg/sgds-web-component/react inside client components. The wrappers resolve hydration timing issues, and event props use camelCase like onSgdsChange.

How do I install and set up sgds-web-component?▼

Install with npm install @govtechsg/sgds-web-component or pnpm add, then import the library once at your app entry point with import "@govtechsg/sgds-web-component". After that, sgds-* tags are available throughout the app.

Does SGDS web component work with React 18 and React 19?▼

Yes, but the approach differs. React 19 supports native custom elements, so use sgds-* tags directly with lowercase event props like onsgds-blur. React 18 and below require the SgdsButton-style wrapper components with camelCase event props like onSgdsBlur.

Can I use SGDS components with Vue or Angular?▼

Yes, both support web components natively with no SGDS-specific wrappers. Vue needs a compiler check using tag.startsWith("sgds-") to suppress unknown element warnings, and Angular uses CUSTOM_ELEMENTS_SCHEMA.

Why is my SGDS component event not firing or property not reflecting?▼

Read the compiled source in node_modules/@govtechsg/sgds-web-component under the relevant component folder. The .js file shows the full implementation and the .d.ts file lists all properties, events, and slots. If node_modules is missing, run your package install first.

Should I set explicit widths on sgds components?▼

No, never set width, inline width styles, or fixed-width utility classes directly on sgds-* elements. Width is controlled by the parent layout using flex, grid, or wrapper divs, except when a fixed width is explicitly required.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

sgds-components

Identify and apply SGDS web components across React, Vue, Angular, and Next.js.

Official
Advanced
GovTechSGGovTechSG
18

sgds-templates

Provide ready-to-use SGDS page templates for government UI development.

Official
Intermediate
fabioc-alohafabioc-aloha

UI/UX Design

Audit and implement accessible interfaces using WCAG 2.1 standards and design tokens.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate