+
+ Theming Playground
+ Overview
+
+ Components
+ Buttons
+ Forms
+ Navigation
+ Data Display
+ Overlays
+
+
+ Resources
+ Documentation
+ GitHub
+ Changelog
+
+ Feedback
+ Contact
+
+
+
+
+
+ Toggle Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Theming
+
+
+
+ Documentation
+ Getting Started
+ Component Library
+
+
+ GitHub
+ Discussions
+ Changelog
+
+
+ Report a Bug
+ Feature Request
+ FAQ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Overview
+ + +
+
+
+
+ Learn more
+
+
+
+
+ New
+ A dismissible system banner with a badge. Users can close this notification.
+
+ View details
+
+
+
+
+
+ Details
+
+
+
+
+
+
+
+
+
+ This is a primary alert with a title and description text.
+ Your changes have been saved successfully.
+ Please review your inputs before proceeding.
+ Something went wrong. Please try again later.
+ A new version is available for download.
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Neutral
+
+
+
+
+
+
+
+ Spinners (tones)
+
+
+ Spinners (sizes)
+
+
+ Forms
+ +
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
+ Apple
+ Banana
+ Cherry
+ Durian
+
+
+
+
+ Feedback & Status
+ + +
+ Show Toast
+
+ This is a success toast notification.
+
+
+
+
+ Stepper (horizontal)
+
+
+ Enter your personal information
+ Review your submission
+ Complete payment
+ Confirmation
+
+
+
+
+ Stepper (vertical)
+
+
+ Your account has been set up
+ Personal details saved
+ Awaiting email verification
+ Ready to use
+
+
+
+
+
+
+ Data Display
+ + +
+
+
+ Name
+ Role
+ Status
+ Action
+
+
+ Alice
+ Engineer
+ Active
+
+ Bob
+ Designer
+ Away
+
+ Charlie
+ Manager
+ Offline
+
+
+
+
+ Accordion (default density)
+
+
+
+
+
+
+
+
+
+
+
+
+ What is SGDS?
+ The Singapore Government Design System (SGDS) is a collection of reusable components and patterns built for government digital services. It ensures consistency and accessibility across all touchpoints.
+ How do I get started?
+ Install the web component library via npm: npm install @govtechsg/sgds-web-component. Then import and use the components in your HTML or framework of choice.
+ Is SGDS accessible?
+ Yes. All components are built with WCAG 2.1 AA compliance in mind. They include proper ARIA attributes, keyboard navigation, and focus management out of the box.
+ Accordion (compact density)
+
+
+
+
+
+
+
+
+
+
+
+
+ Compact Item 1
+ This accordion uses compact density for tighter spacing. Useful for sidebars or constrained layouts.
+ Compact Item 2
+ Content remains readable while taking up less vertical space.
+ Compact Item 3
+ Ideal for navigation menus or settings panels.
+ Accordion (spacious density)
+
+
+
+
+
+
+
+
+
+
+
+
+ Spacious Item 1
+ The spacious density gives more breathing room between items. Best for content-heavy sections where readability is paramount.
+ Spacious Item 2
+ Each item has generous padding, making it easy to scan through multiple sections.
+ Spacious Item 3
+ Use this density for FAQ pages, documentation, or long-form content.
+ Accordion (border variant)
+
+
+
+
+
+
+
+
+
+
+ Border Item 1
+ The border variant adds an outlined style to each accordion item for visual separation.
+ Border Item 2
+ Useful when the accordion sits on a coloured background and needs extra definition.
+
+
+
+ Project Name
+ SGDS Web Components
+
+
+ Version
+ 3.24.0
+
+
+ Framework
+ Lit + TypeScript
+
+
+ License
+ MIT
+
+
+
+
+
+ Project Details
+
+
+ Card Title
+ This is a basic card component with a title and description.
+
+
+
+
+ 
+ Thumbnail Card
+ A card with an image thumbnail.
+
+
+ 
+ Image Card
+ A card with a prominent image.
+
+
+ Overlays & Interactive
+ + +
+ Open Modal
+
+
+
+
+ Open Drawer
+
+
+
+ This is a modal dialog. It overlays the page content.
+
+
+ Dropdown
+ Action 1
+ Action 2
+ Action 3
+
+
+
+
+ Menu Item 1
+ Menu Item 2
+ Menu Item 3
+
+
+
+
+
+
+ Hover for Tooltip
+
+
+
+
+ Icon List (small)
+
+
+
+
+
+
+
+
+ Icon List (medium)
+
+
+
+
+
+
+
+
+ Icon List (large)
+
+
+
+
+
+
+
+
+
+
+
+
+ Overview
+ Buttons
+ Forms
+ Feedback
+ Navigation
+
+
+ Theming Playground
+A demonstration of all SGDS web components for theming and visual testing.
+Resources
+ Community
+ Support
+