Newskit Logo
About

Guides

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.

Accessible

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

Adaptive

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

Productive

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 usingTypeScript 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.

Guidance

Comprehensive online documentation and guidelines.

Browser support

NewsKit supports the following modern browsers:

Chrome
Safari
Firefox
Edge

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?

Need help?

Can’t find what you’re looking for?