@lifesg/react-design-system
v2.9.0-canary.2
Published
A component design system for LifeSG web apps
Downloads
2,043
Keywords
Readme
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.