/nextjs-with-opengovsg-design-system

Example of using https://github.com/opengovsg/design-system with Next.js & TypeScript

Primary LanguageTypeScript

Example app with opengovsg/design-system and TypeScript

This example features how to use opengovsg/design-system as the component library within a Next.js app with TypeScript.

Next.js and opengovsg/design-system have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.

We are connecting the Next.js _app.js with opengovsg/design-system's Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of opengovsg/design-system's style props.

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-opengovsg/design-system-typescript with-opengovsg/design-system-typescript-app
# or
yarn create next-app --example with-opengovsg/design-system-typescript with-opengovsg/design-system-typescript-app

Deploy it to the cloud with Vercel (Documentation).

Notes

OpenGovSG Design System is built on top of Chakra. Chakra has supported Gradients and RTL in v1.1. To utilize RTL, add RTL direction and swap.

If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.ts.