Newskit Logo

Getting started

Design overview

Popular searches

View GitHub


Engineering overview

The NewsKit design system provides an npm package that exports a library of reusable React components and utilities that can be used as building blocks to compose web applications.

Why build products with NewsKit?

Systems thinking is at the core of digital product design. NewsKit improves design consistency and developer efficiency across teams with considered, reusable solutions, and shared best practices. The result is more robust products and more time for innovation.


NewsKit components follow WCAG guidelines, WAI Aria andAria-practices. Components are AA compliant with A11Y features built-in including props to extend their flexibility if required.


NewsKit has an extensivetheming system that enables customization of style and layout. Additionally components support a range of properties to customise behaviour.


Carefully crafted components ensure that teams using NewsKit can rapidly iterate on product requirements through re-use of common functionality. This promotes both consistency and common language across product development teams.

What’s included?

React web components

A collection high quality React web components built using TypeScript and Emotion.

Advanced theming system

An advanced full-featured theming system with the flexibility to meet the requirement of a single or multi-brand requirement, including both business and consumer products.

Utility functions

A host of utility functions for use in third-party or custom components.

NewsKit Handoff guidance

Guidance on how to find the information needed in designs for engineers to build.View NewsKit Handoff guidance

Browser support

NewsKit supports the following modern browsers:


Example architecture

Below is an example of a recommended architecture when using the NewsKit design system:

Source Code

Below are the links to the NewsKit source code:

View Github repo View npm package

What’s next?

Want to use NewsKit for your next product? Follow the next steps belows to learn more:

Engineering Quickstart Guide

To start engineering with NewsKit, follow the steps in the quickstart guide.

NewsKit components are built to emit events "out of the box".

Need Help?

Can’t find what you’re looking for?

Get in touch

Need Help?

Can’t find what you’re looking for?