Design System

screenshot of Design System

Design System

Build web applications that meet the Royal Navy service standards


The Royal Navy Design System is a tool that allows developers to build web applications that meet the standards of the Royal Navy service. It provides a set of components and guidelines for creating visually consistent and user-friendly interfaces. The system follows semantic versioning and is published on the NPM registry.


  • Component Usage Guidelines: Storybook provides interactive examples, code snippets, and details on how to consume each component effectively.
  • Monorepo & Package Management: Splitting large codebases into separate independently versioned packages allows for better code sharing. Yarn workspaces manage dependencies and provide instant updates in Storybook.
  • Browser Support: The Royal Navy Design System supports all major evergreen browsers.


To install the Royal Navy Design System and add it to your project's dependencies, run the following command in the terminal:

npm install @royalnavy/design-system

Note: styled-components is a required peer dependency and will be installed automatically.

To quickly get started with the Royal Navy Design System, you can use the following example application:

// Example application code goes here


The Royal Navy Design System is a comprehensive tool for building web applications that meet the standards of the Royal Navy service. It provides guidelines, components, and package management features to streamline development and ensure consistency. With its support for major browsers and easy installation process, the Royal Navy Design System is a valuable resource for developers working on projects related to the Royal Navy.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.


Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.