Skip to content

vczb/sagu-ui

Repository files navigation

SAGU-UI

It's a simple and faster React UI

Installation πŸ› οΈ

sagu-ui is available as an npm package.

To install it, run:

  //with npm
  npm install sagu-ui

  //with yarn
  yarn add sagu-ui

styled-components package is required

Usage πŸ‘‡

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 App

Theme customization βœ’οΈ

You 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};
  `}
`

Component customization πŸ”§

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>

Examples ✍️

Take a look at some examples using Sagu-UI

Contributing 🀝

You can contribute to this project by opening an issue or creating a pull request.

What is inside❓

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 <Component name>: 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 as well

License πŸ“œ

This project is licensed under the MIT License.