{"id":18866324,"url":"https://github.com/nordcloud/gnui","last_synced_at":"2026-05-22T12:04:32.438Z","repository":{"id":37710879,"uuid":"238299785","full_name":"nordcloud/GNUI","owner":"nordcloud","description":"💅 Nordcloud's design system for SaaS products.","archived":false,"fork":false,"pushed_at":"2025-03-28T22:29:16.000Z","size":21595,"stargazers_count":30,"open_issues_count":19,"forks_count":16,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T23:09:32.197Z","etag":null,"topics":["component-library","hacktoberfest","react","storybook","typescript","ui-library"],"latest_commit_sha":null,"homepage":"https://master.du3gff836giqw.amplifyapp.com/","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/nordcloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-04T20:29:52.000Z","updated_at":"2025-03-14T13:15:32.000Z","dependencies_parsed_at":"2024-01-01T04:48:32.877Z","dependency_job_id":"93f959b9-9d26-4695-8726-a1dad0b44596","html_url":"https://github.com/nordcloud/GNUI","commit_stats":{"total_commits":546,"total_committers":35,"mean_commits":15.6,"dds":0.8113553113553114,"last_synced_commit":"84eda5f9f780a1584c024aec62df8ab963439c7a"},"previous_names":[],"tags_count":297,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordcloud%2FGNUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordcloud%2FGNUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordcloud%2FGNUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordcloud%2FGNUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nordcloud","download_url":"https://codeload.github.com/nordcloud/GNUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"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":["component-library","hacktoberfest","react","storybook","typescript","ui-library"],"created_at":"2024-11-08T05:06:15.045Z","updated_at":"2025-10-25T17:43:54.802Z","avatar_url":"https://github.com/nordcloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![PRs Welcome](https://img.shields.io/badge/prs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n# General Nordcloud UI\n\nThis repo contains the Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products.\n\n## Components\n\n1. Design System (`/src/components`)\n2. Storybook (`/src/stories`)\n\n## Install\n\n```bash\nnpm install @nordcloud/gnui\n```\n\nor\n\n```bash\nyarn add @nordcloud/gnui\n```\n\nMake sure you have a proper versions of required packages installed, they are specified in `peerDependencies` field inside `package.json`.\n\nVersion 7 or greater of `npm` should install them automatically, if not, run:\n\n```bash\nnpm install react react-dom styled-components\n```\n\nDon't forget to install types if you are using TypeScript:\n\n```bash\nnpm install -D @types/react @types/react-dom @types/styled-components\n```\n\n## Usage\n\nApply global GNUI styles at the top level of your app:\n\n```tsx\nimport { SetGlobalStyle } from \"@nordcloud/gnui\";\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cSetGlobalStyle customScrollbars /\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\nSwitch themes:\n\n```tsx\nimport {\n  Button,\n  SVGIcon,\n  useThemeSwitcher,\n  THEME_OPTIONS,\n} from \"@nordcloud/gnui\";\n\nfunction UserSettings() {\n  const { currentTheme, setTheme } = useThemeSwitcher();\n\n  return (\n    \u003cButton onClick={() =\u003e setTheme(nextTheme)}\u003e\n      \u003cIconWrap\u003e\n        \u003cSVGIcon name=\"dashboard\" /\u003e\n      \u003c/IconWrap\u003e\n      Switch to {THEME_OPTIONS[nextTheme].toLowerCase()} theme\n    \u003c/Button\u003e\n  );\n}\n```\n\n## Storybook deployment\n\nStorybook allows you to preview components. It deploys the code automatically with Amplify Console triggered by changes on branch `master`. Pipeline steps are found in `amplify.yml`.\n\nWhen you create a PR against the `master` branch, Amplify creates a new deployment automatically - the environment will be attached to the PR at Github. Reviewers can preview changes using this deployment - after the PR gets merged or rejected, the environment is destroyed automatically by Amplify Console.\n\n## Contributing to this repo\n\n- Please create your components in `src/components` and update stories in `stores`.\n- Code should be formatted using [Prettier](https://prettier.io/).\n- We are using styled-components for styling.\n- All code should be written using TS.\n- Every component props should be described using \"type\" instead of \"interface\".\n- Name types with Pascal Case naming convention and Props or Data prefix.\n\n## Local setup\n\n### 1. Clone the repo\n\n### 2. Setup Node\n\nBelow versions of Node \u0026 npm are required:\n\n```bash\n  \"node\": \"\u003e=22.14.0\",\n  \"npm\": \"\u003e=10.9.2\"\n```\n\nRun `nvm use` to use supported version.\n\n### 3. Install packages\n\n```bash\nnpm install\n```\n\n### 4. Run Storybook to verify everything works\n\n```bash\nnpm run storybook\n```\n\n## Development\n\n- Make sure to check out [Storybook Design System](https://github.com/storybookjs/design-system)\n\n## Local testing\n\nThere is a possibility to build \u0026 test the package locally in the project it's currently used in.\n\n```bash\nnpm run build\nnpm pack\n```\n\nYou will get a tarball with the freshly built package, you can copy it inside your project's folder and install with\n\n```bash\nnpm install nordcloud-gnui-${VERSION}.tgz\n```\n\nAfter the successful installation it's ready to be tested (remember to restart the dev server)\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/raczyk\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/4233480?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eraczyk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nowyDEV\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/12304307?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDominik N\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/janosio-nordcloud\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/58164749?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJan Osio\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Horay\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/8356411?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHoray\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://allcontributors.org) specification.\nContributions of any kind are welcome!\n\n## License\n\nLicensed under the MIT License, Copyright © 2020 Nordcloud Engineering\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordcloud%2Fgnui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnordcloud%2Fgnui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordcloud%2Fgnui/lists"}