{"id":19728522,"url":"https://github.com/royal-navy/design-system","last_synced_at":"2026-05-16T12:02:27.174Z","repository":{"id":37094218,"uuid":"180394085","full_name":"Royal-Navy/design-system","owner":"Royal-Navy","description":"Build web applications that meet the Royal Navy service standards","archived":false,"fork":false,"pushed_at":"2025-05-09T09:24:33.000Z","size":226569,"stargazers_count":122,"open_issues_count":20,"forks_count":31,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-09T09:24:57.730Z","etag":null,"topics":["component-library","design-system","design-tokens","fonts","icons","lint-config","monorepo","react","storybook"],"latest_commit_sha":null,"homepage":"https://storybook.design-system.navy.digital.mod.uk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Royal-Navy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-09T15:11:57.000Z","updated_at":"2025-05-09T09:24:37.000Z","dependencies_parsed_at":"2023-02-16T16:00:42.493Z","dependency_job_id":"eb69270f-3fb6-43e2-b71d-0d4a367b3f3d","html_url":"https://github.com/Royal-Navy/design-system","commit_stats":{"total_commits":4756,"total_committers":25,"mean_commits":190.24,"dds":0.7291841883936081,"last_synced_commit":"458c18929e7f18338b0c81f83a93ec62e1f7231c"},"previous_names":["royal-navy/standards-toolkit","defencedigital/mod-uk-design-system"],"tags_count":372,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Royal-Navy%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Royal-Navy%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Royal-Navy%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Royal-Navy%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Royal-Navy","download_url":"https://codeload.github.com/Royal-Navy/design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442855,"owners_count":22071878,"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","design-system","design-tokens","fonts","icons","lint-config","monorepo","react","storybook"],"created_at":"2024-11-12T00:01:45.287Z","updated_at":"2026-05-16T12:02:22.150Z","avatar_url":"https://github.com/Royal-Navy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Royal Navy Design System\n\n![Build \u0026 Test Master](https://github.com/Royal-Navy/design-system/actions/workflows/build_and_test.yml/badge.svg)\n[![GitHub release](https://img.shields.io/github/release/royal-navy/design-system.svg)](https://github.com/Royal-Navy/design-system/releases) [![GitHub license](https://img.shields.io/badge/license-Apache%202-blue.svg)](https://github.com/design-system/blob/master/LICENSE) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) \n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=royal-navy_design-system\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=royal-navy_design-system)\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](http://storybook.design-system.navy.digital.mod.uk)\n\nBuild web applications that meet the Royal Navy service standards.\n\nVisit the [Roadmap board](https://github.com/Royal-Navy/design-system/projects/7) to view the high-level objectives for the Royal Navy Design System. To check on issues currently being completed, view our [Tactical board](https://github.com/Royal-Navy/design-system/projects/6) instead.\n\n## Releases \u0026 versioning\n\nAll packages are published to the [NPM registry](https://www.npmjs.com/search?q=%40royalnavy) and we adhere to [semantic versioning](https://semver.org/).\n\n## Supported technologies\n\nThe following view layer libraries are currently supported:\n\n- React\n\n## Component usage guidelines\n\nPlease refer to [Storybook](http://storybook.design-system.navy.digital.mod.uk/) to see interactive examples, code snippets and details on how best to consume each of the components.\n\n## Installation \u0026 quick start\n\n### Installation\n\nTo install and save to your project's package.json dependencies, run:\n\n```\n# with npm\nnpm install @royalnavy/fonts @royalnavy/react-component-library styled-components\n\n# ...or with pnpm\npnpm add @royalnavy/fonts @royalnavy/react-component-library styled-components\n```\n\n\u003e[!NOTE]\n\u003e[`styled-components`](https://styled-components.com/) is a required [peer dependency](https://nodejs.org/en/blog/npm/peer-dependencies/) and is installed with the above command.\n\n### Quick start\n\nHere's a quick example application to get you started:\n\n```javascript\nimport React from 'react'\nimport { createRoot } from 'react-dom/client';\nimport '@royalnavy/fonts'\nimport { GlobalStyleProvider, Button } from '@royalnavy/react-component-library'\n\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\n\nfunction App() {\n  return (\n    \u003cGlobalStyleProvider\u003e\n      \u003cButton variant=\"primary\"\u003e\n        Hello, World!\n      \u003c/Button\u003e\n    \u003c/GlobalStyleProvider\u003e\n  )\n}\n\nroot.render(\u003cApp /\u003e)\n```\n\n## Monorepo \u0026 package management\n\n\u003e Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories gets complicated really fast.\n\u003e\n\u003e To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos).\n\nEach package folder has it's own npm package.json and can act like a stand alone project. Pnpm workspaces detects dependencies that are held within the monorepo and creates a link between them, so you can work on a react component and see instant updates in Storybook.\n\nManage dependencies for packages like normal, but remember to use `pnpm add` instead of `npm install`.\n\n## Run locally\n\nYou'll need [Git](https://help.github.com/articles/set-up-git/) and [Node.js](https://nodejs.org/en/) installed to get this project running.\n\n\u003e[!NOTE]\n\u003eYou will need the [active LTS (Long-term support)](https://github.com/nodejs/Release#release-schedule) Node.js version for this project (as specified in [.nvmrc](./.nvmrc)).\n\n### Fork repository (optional)\n\nIf you're an external contributor make sure to [fork this project first](https://help.github.com/articles/fork-a-repo/).\n\n### Clone repository\n\n```\ngit clone git@github.com:Royal-Navy/design-system.git # or clone your own fork\n\ncd design-system\n```\n\n### Using nvm (optional)\n\nIf you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.\n\nTo enable this we use [nvm (Node Version Manager)](https://github.com/creationix/nvm) to switch between versions easily.\n\n1. [Install nvm](https://github.com/creationix/nvm#installation)\n2. Run `nvm install` in the project directory (this will use [.nvmrc](./.nvmrc))\n\n## Scripts\n\nThe top level project contains scripts that are then executed for all packages:\n\n- `lint` checks syntax and simple errors in javascript files\n- `test` runs Jest tests in all the packages\n- `build` runs the build script in all packages\n\n## Git hooks\n\nGit commit hooks trigger linting of all staged files when a change is committed.\n\n## Prettier\n\nWe have configured a set of Prettier options to enforce consistent code formatting.\n\n## Browser support\n\nThe Royal Navy Design System currently supports all major evergreen browsers.\n\n## Licensing\n\nThe Royal-Navy/design-system is licensed under the [Apache License 2.0](https://github.com/Royal-Navy/design-system/blob/master/LICENSE).\n\n## Contributing\n\nRead the [Contributing Guidelines](docs/CONTRIBUTING.md).\n\n## Thanks\n\n\u003ca href=\"https://www.chromaticqa.com/\"\u003e\u003cimg src=\"https://cdn-images-1.medium.com/v2/size:147:36:false:true/extend:true:nowe:74:18/bg:ffffff/1*oHHjTjInDOBxIuYHDY2gFA.png\" width=\"120\"/\u003e\u003c/a\u003e\n\nWe use [Chromatic](https://www.chromaticqa.com/) for visual regression testing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyal-navy%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyal-navy%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyal-navy%2Fdesign-system/lists"}