{"id":26779125,"url":"https://github.com/vczb/sagu-ui","last_synced_at":"2025-04-18T03:10:53.501Z","repository":{"id":50707838,"uuid":"519602398","full_name":"vczb/sagu-ui","owner":"vczb","description":"It's a simple React UI","archived":false,"fork":false,"pushed_at":"2024-03-10T13:15:18.000Z","size":7488,"stargazers_count":29,"open_issues_count":1,"forks_count":40,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T04:12:42.058Z","etag":null,"topics":["hacktoberfest","react","storybook","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://vczb.github.io/sagu-ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vczb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-30T19:21:44.000Z","updated_at":"2024-06-12T09:21:33.000Z","dependencies_parsed_at":"2025-03-27T15:39:46.806Z","dependency_job_id":"90284bd2-44d9-4101-8fd0-e2680cffd603","html_url":"https://github.com/vczb/sagu-ui","commit_stats":{"total_commits":107,"total_committers":13,"mean_commits":8.23076923076923,"dds":"0.22429906542056077","last_synced_commit":"b2e4b7aca7a18e6148d95bb89f09400566a6962f"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vczb%2Fsagu-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vczb%2Fsagu-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vczb%2Fsagu-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vczb%2Fsagu-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vczb","download_url":"https://codeload.github.com/vczb/sagu-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249418529,"owners_count":21268450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","react","storybook","styled-components","typescript"],"created_at":"2025-03-29T06:14:51.963Z","updated_at":"2025-04-18T03:10:53.466Z","avatar_url":"https://github.com/vczb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![SAGU-UI](./logo.png)\n\nIt's a simple and faster React UI\n\n## Installation 🛠️\n\nsagu-ui is available as an [npm package](https://www.npmjs.com/package/sagu-ui).\n\nTo install it, run:\n\n```bash\n  //with npm\n  npm install sagu-ui\n\n  //with yarn\n  yarn add sagu-ui\n```\n\n_[styled-components](https://github.com/styled-components/styled-components) package is required_\n\n## Usage 👇\n\nHere is a quick example to get you started, **it's all you need**:\n\n```js\nimport React from 'react'\nimport { theme, SaguGlobalStyles, SaguProvider, Button } from 'sagu-ui'\n\nfunction App() {\n  return (\n    \u003cSaguProvider theme={theme}\u003e\n      \u003cSaguGlobalStyles /\u003e\n      \u003cButton\u003eClick me\u003c/Button\u003e\n    \u003c/SaguProvider\u003e\n  )\n}\n\nexport default App\n```\n\n## Theme customization ✒️\n\nYou can easily override the values of the theme object\n\n```js\nimport { theme, SaguProvider } from 'sagu-ui'\n\nfunction App() {\n  Object.assign(theme.colors.primary, { medium: \"#510763\" });\n\n  return \u003cSaguProvider theme={theme}\u003e...\u003c/SaguProvider\u003e\n}\n```\n\nAlso you can add an entire custom object and it will be available on the Provider\n\n```js\nimport { theme, SaguProvider } from 'sagu-ui'\nimport { CustomWrapper } from './components/CustomWrapper'\n\nfunction App() {\n  const customColors = {\n    tertiary: {\n      lighter: \"#fb973a\",\n      light: \"#e37c1d\",\n      medium: \"#da710f\",\n      dark: \"#9e4c01\"\n    }\n  };\n\n  Object.assign(theme.colors, customColors);\n\n  return (\n    \u003cSaguProvider theme={theme}\u003e\n      \u003cCustomWrapper\u003e...\u003c/CustomWrapper\u003e\n    \u003c/SaguProvider\u003e\n  )\n}\n```\n\n```js\n// components/CustomWrapper.ts\nimport styled, { css } from 'styled-components'\n\nexport const CustomWrapper = styled.div`\n  ${({ theme }) =\u003e css`\n    background: ${theme.colors.tertiary.medium};\n  `}\n`\n```\n\n## Component customization 🔧\n\nYou have too many ways to customize the Sagu components\n\n**Using styled-components**\n\n```js\nimport styled from 'styled-components'\nimport { Button } from 'sagu-ui'\n\nconst MyCustomButton = styled(Button)`\n  background: red;\n`\n...\n\n\u003cMyCustomButton\u003eMy Button\u003c/MyCustomButton\u003e\n```\n\n**Using inline styles**\n\n```js\nimport { Button } from 'sagu-ui'\n\n...\n\n\u003cButton\n  style={{\n    background: 'yellow'\n  }}\n\u003e\n  My Button\n\u003c/Button\u003e\n```\n\n**Using CSS classes**\n\n```css\n.button-green {\n  background: green;\n}\n```\n\n```js\nimport { Button } from 'sagu-ui'\nimport './styles.css'\n\n...\n\n\u003cButton className=\"button-green\"\u003eMy Button\u003c/Button\u003e\n```\n\n## Examples ✍️\n\nTake a look at some [examples](./EXAMPLES.md) using [Sagu-UI](https://www.npmjs.com/package/sagu-ui)\n\n## Contributing 🤝\n\nYou can contribute to this project by opening an issue or creating a pull request.\n\n## What is inside❓\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [Styled Components](https://styled-components.com/)\n- [Storybook](https://storybook.js.org/)\n- [Eslint](https://eslint.org/)\n- [Prettier](https://prettier.io/)\n- [Jest](https://jestjs.io/)\n\n## Available commands ⬇️\n\n- `build`: build the files in the `lib` directory\n- `sb`: run the storybook at the address `localhost:6006`\n- `prettier:check`: check formatting on all `src` directory\n- `prettier:format`: formats all `src` directory\n- `generate \u003cComponent name\u003e`: create a component boilerplate\n- `test`: test all components\n\n## Project structure 🧬\n\n```\n/.storybook\n/lib\n/src\n├── index.ts\n├── animations\n|   ├── placeholder.ts\n├── hooks\n|   ├── ...\n├── packages\n|   ├── index.ts\n|   ├── Button\n|   |   ├── index.tsx\n|   |   ├── stories.tsx\n|   |   └── styles.ts\n|   |   └── test.tsx\n├── styles\n|   ├── global.ts\n|   ├── theme.ts\n|   ├── provider.ts\n```\n## Our Amazing Contributors 🌟\nThanks for all who is contributing with us.\n\n\u003ca href=\"https://github.com/vczb/sagu-ui/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=vczb/sagu-ui\" /\u003e\n\u003c/a\u003e\n\nBe part of this amazing team, [contribute](./CONTRIBUTING.md) as well\n\n## License 📜\n\nThis project is licensed under the [MIT](./LICENSE) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvczb%2Fsagu-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvczb%2Fsagu-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvczb%2Fsagu-ui/lists"}