API documentation for @ukic components

design-system, react, stenciljs, typescript, ui-components, web-components
npm install @ukic/docs@2.12.0


Logo of the Intelligence Community Design System

The UK Intelligence Community UI Kit

OGL V3 License MIT License

The Intelligence Community Design System helps the United Kingdom's Intelligence Community (MI6, GCHQ, MI5, and partners) to quickly build powerful capabilities that are accessible and easy to use.

This is a joint project led by MI6, working with GCHQ and MI5.

SIS (MI6), GCHQ and MI5 Logos

This repo holds the UI Kit components. Find the guidance and content of design.sis.gov.uk in the IC Design System guidance site repo.

Why we're doing this

We build a lot of stuff that needs to be quick-to-build, usable and always accessible. We build using a lot of different tech, so creating something that can be consistently accessible and usable across different stacks is critical for us.

The Design System is being used to build our powerful, flexible and complex capabilities that help keep the UK safe and prosperous.

📖 Read our story to learn more on why we've created our own design system.

Learning from the best

We track many sources of accessibility expertise, as well as using our internal experts and communities. For example, many of our patterns and components are based on awesome work from the Government Digital Service (GDS) Design System. Where we can, we'll contribute back!

If you think we could improve something, please do raise an issue.


To install the components, no additional configuration is needed for internal systems. Choose a package depending on which framework you're building with:


This is a monorepo using lerna. To get started is simple:

npm install
npm run bootstrap
npm run build

Storybook is used during development; this command will launch separate web components and React Storybooks.

npm run storybook

Local build and install

Developers are able to build and install components locally, enabling effective testing of apps and IC UI kit components in a local environment.

To get started make sure you are in the top-level directory of ic-ui-kit:

npm run build
cd packages/docs
npm pack
cd ../fonts
npm pack
cd ../react
npm pack
cd ../web-components
npm pack

In the package.json of your project replace the value of @ukic/docs, @ukic/fonts, @ukic/react and @ukic/web-components with the full filepath to the .tgz file in each respective directory, for example:

  "@ukic/docs": "../ic-ui-kit/packages/docs/ukic-docs-2.1.0-beta.17.tgz"
  "@ukic/fonts": "../ic-ui-kit/packages/fonts/ukic-fonts-2.1.0-beta.17.tgz",
  "@ukic/react": "../ic-ui-kit/packages/react/ukic-react-2.1.0-beta.17.tgz",
  "@ukic/web-components": "../ic-ui-kit/packages/web-components/ukic-web-components-2.1.0-beta.17.tgz",

Finally, install the dependencies:

npm install


We have a couple of resources to help you with contributing.


If you've found a vulnerability, we want to know so that we can fix it. Our security policy tells you how to do this.

Questions about the departments

The team is only able to talk about the projects we've put on GitHub 🕵️. We unfortunately can't talk about the work of our departments 😢.

Visit our websites to learn more about:


Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the Open Government License v3.0.

© Crown copyright 2022