A React component library for LifeSG and BookingSG related products.
npm i @lifesg/react-design-system
{
"@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"
}
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");
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.
// 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.
If you are migrating from an older version of the Design System, you may refer to our migration guides.