https://github.com/vczb/sagu-ui
It's a simple React UI
https://github.com/vczb/sagu-ui
hacktoberfest react storybook styled-components typescript
Last synced: 17 days ago
JSON representation
It's a simple React UI
- Host: GitHub
- URL: https://github.com/vczb/sagu-ui
- Owner: vczb
- License: mit
- Created: 2022-07-30T19:21:44.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-10T13:15:18.000Z (about 1 year ago)
- Last Synced: 2025-04-15T04:12:42.058Z (20 days ago)
- Topics: hacktoberfest, react, storybook, styled-components, typescript
- Language: TypeScript
- Homepage: https://vczb.github.io/sagu-ui
- Size: 7.14 MB
- Stars: 29
- Watchers: 2
- Forks: 40
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
It's a simple and faster React UI
## Installation 🛠️
sagu-ui is available as an [npm package](https://www.npmjs.com/package/sagu-ui).
To install it, run:
```bash
//with npm
npm install sagu-ui
//with yarn
yarn add sagu-ui
```
_[styled-components](https://github.com/styled-components/styled-components) package is required_
## Usage 👇
Here is a quick example to get you started, **it's all you need**:
```js
import React from 'react'
import { theme, SaguGlobalStyles, SaguProvider, Button } from 'sagu-ui'
function App() {
return (
Click me
)
}
export default App
```
## Theme customization ✒️
You can easily override the values of the theme object
```js
import { theme, SaguProvider } from 'sagu-ui'
function App() {
Object.assign(theme.colors.primary, { medium: "#510763" });
return ...
}
```
Also you can add an entire custom object and it will be available on the Provider
```js
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 (
...
)
}
```
```js
// components/CustomWrapper.ts
import styled, { css } from 'styled-components'
export const CustomWrapper = styled.div`
${({ theme }) => css`
background: ${theme.colors.tertiary.medium};
`}
`
```
## Component customization 🔧
You have too many ways to customize the Sagu components
**Using styled-components**
```js
import styled from 'styled-components'
import { Button } from 'sagu-ui'
const MyCustomButton = styled(Button)`
background: red;
`
...
My Button
```
**Using inline styles**
```js
import { Button } from 'sagu-ui'
...
My Button
```
**Using CSS classes**
```css
.button-green {
background: green;
}
```
```js
import { Button } from 'sagu-ui'
import './styles.css'
...
My Button
```
## Examples ✍️
Take a look at some [examples](./EXAMPLES.md) using [Sagu-UI](https://www.npmjs.com/package/sagu-ui)
## Contributing 🤝
You can contribute to this project by opening an issue or creating a pull request.
## What is inside❓
- [TypeScript](https://www.typescriptlang.org/)
- [Styled Components](https://styled-components.com/)
- [Storybook](https://storybook.js.org/)
- [Eslint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Jest](https://jestjs.io/)
## Available commands ⬇️
- `build`: build the files in the `lib` directory
- `sb`: run the storybook at the address `localhost:6006`
- `prettier:check`: check formatting on all `src` directory
- `prettier:format`: formats all `src` directory
- `generate `: create a component boilerplate
- `test`: test all components
## Project structure 🧬
```
/.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
```
## Our Amazing Contributors 🌟
Thanks for all who is contributing with us.
Be part of this amazing team, [contribute](./CONTRIBUTING.md) as well
## License 📜
This project is licensed under the [MIT](./LICENSE) License.