@lifesg/react-design-system v2.5.0
LifeSG React Design System
A React component library for LifeSG and BookingSG related products.
Installation
npm i @lifesg/react-design-system
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.
8 days ago
7 days ago
11 days ago
17 days ago
22 days ago
25 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
9 months ago
7 months ago
8 months ago
7 months ago
7 months ago
6 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
5 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago