Getting startedPrinciplesComponentsPatternsBrand Guide

React

Instructions for how to incorporate the UKHO Design System into a React project.

Contents

Installation

For projects using React the first step is to install the package using a package manager so that it can be used in your project:

NPM

npm install @ukho/admiralty-react

or

Yarn

yarn add @ukho/admiralty-react

Using the components

Once you've installed the package, you can start using the components in your project.

To include the styling in the React app, add the necessary CSS to the root app component:

// layout.tsx
import "@ukho/admiralty-core/styles/admiralty.bundle.css";
import "@ukho/admiralty-core/themes/default.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <h1>My react app</h1>
        <MyComponent />
      </body>
    </html>
  );
}

In an React component template, simply use the components as you would with any other HTML elements:

// MyComponent.tsx
import React from "react";
import { AdmiraltyInput } from "@ukho/admiralty-react";

export default function MyComponent() {
  return <AdmiraltyInput label="What is your name?" type="text"></AdmiraltyInput>;
}
Privacy PolicyAccessibility