LifeSG React Design System

A React component library for LifeSG and BookingSG related products.

Installation

npm i @lifesg/react-design-system

Peer dependencies

{
    "@floating-ui/dom": "^1.6.10",
    "@floating-ui/react": "^0.26.23",
    "@lifesg/react-icons": "^1.5.0",
    "react": "^17.0.2 || ^18.0.0",
    "react-dom": "^17.0.2 || ^18.0.0",
    "styled-components": "^5.3.5"
}

Getting Started

The module requires some custom css for certain components to work properly. As the module does not ship with css, you will need to add this into the head of your html file.

<link
    rel="stylesheet"
    type="text/css"
    href="https://assets.life.gov.sg/react-design-system/css/main.css"
/>

Or if you are importing to an existing css file

@import url("https://assets.life.gov.sg/react-design-system/css/main.css");

Setting up the theme

If you are intending to make use of the themes, you will need Styled Components.

Styled components provide us with the ThemeProvider which you could make use of.

// app.tsx
import { ThemeProvider } from "styled-components";
import { BaseTheme } from "@lifesg/react-design-system/theme";
import { Component } from "./index";

const App = () => {
    return (
        <ThemeProvider theme={BaseTheme}>
            <Component />
        </ThemeProvider>
    );
};

export default App;

For more information on the usage of themes, you can visit our documentation about it.

Importing the components

// Efficient manner
import { Button } from "@lifesg/react-design-system/button";

// Less ideal manner
import { Button } from "@lifesg/react-design-system";

To see the full suite of components available, visit our Storybook documentation.

Migrations

If you are migrating from an older version of the Design System, you may refer to our migration guides.