It's a simple and faster React UI
sagu-ui is available as an npm package.
To install it, run:
//with npm
npm install sagu-ui
//with yarn
yarn add sagu-uistyled-components package is required
Here is a quick example to get you started, it's all you need:
import React from 'react'
import { theme, SaguGlobalStyles, SaguProvider, Button } from 'sagu-ui'
function App() {
return (
<SaguProvider theme={theme}>
<SaguGlobalStyles />
<Button>Click me</Button>
</SaguProvider>
)
}
export default AppYou can easily override the values of the theme object
import { theme, SaguProvider } from 'sagu-ui'
function App() {
Object.assign(theme.colors.primary, { medium: "#510763" });
return <SaguProvider theme={theme}>...</SaguProvider>
}Also you can add an entire custom object and it will be available on the Provider
import { theme, SaguProvider } from 'sagu-ui'
import { CustomWrapper } from './components/CustomWrapper'
function App() {
const customColors = {
tertiary: {
lighter: "#fb973a",
light: "#e37c1d",
medium: "#da710f",
dark: "#9e4c01"
}
};
Object.assign(theme.colors, customColors);
return (
<SaguProvider theme={theme}>
<CustomWrapper>...</CustomWrapper>
</SaguProvider>
)
}// components/CustomWrapper.ts
import styled, { css } from 'styled-components'
export const CustomWrapper = styled.div`
${({ theme }) => css`
background: ${theme.colors.tertiary.medium};
`}
`You have too many ways to customize the Sagu components
Using styled-components
import styled from 'styled-components'
import { Button } from 'sagu-ui'
const MyCustomButton = styled(Button)`
background: red;
`
...
<MyCustomButton>My Button</MyCustomButton>Using inline styles
import { Button } from 'sagu-ui'
...
<Button
style={{
background: 'yellow'
}}
>
My Button
</Button>Using CSS classes
.button-green {
background: green;
}import { Button } from 'sagu-ui'
import './styles.css'
...
<Button className="button-green">My Button</Button>Take a look at some examples using Sagu-UI
You can contribute to this project by opening an issue or creating a pull request.
-
build: build the files in thelibdirectory -
sb: run the storybook at the addresslocalhost:6006 -
prettier:check: check formatting on allsrcdirectory -
prettier:format: formats allsrcdirectory -
generate <Component name>: create a component boilerplate -
test: test all components
/.storybook
/lib
/src
├── index.ts
├── animations
| ├── placeholder.ts
├── hooks
| ├── ...
├── packages
| ├── index.ts
| ├── Button
| | ├── index.tsx
| | ├── stories.tsx
| | └── styles.ts
| | └── test.tsx
├── styles
| ├── global.ts
| ├── theme.ts
| ├── provider.ts
Thanks for all who is contributing with us.
Be part of this amazing team, contribute as well
This project is licensed under the MIT License.