NewsKit is News UK’s design system. It provides interactive building blocks and guidelines for crafting cohesive digital product interfaces and accelerating development. Build better products faster.
This document is focused on the React components, more expansive documentation can be found on our website.
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.
NewsKit components follow WCAG guidelines, WAI Aria and Aria-practices. Components are AA compliant with A11Y features built-in including props to extend their flexibility if required.
NewsKit has an extensive theming system that enables customization of style and layout. Additionally components support a range of properties to customise behavior.
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.
A collection high quality React web components built using TypeScript and Emotion.
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.
A host of utility functions for use in third-party or custom components.
Comprehensive online documentation and guidelines.
 Chrome |
 Firefox |
 Safari |
|---|---|---|
| last 2 versions | last 2 versions | last 2 versions |
To start using NewsKit components in your projects your projects you will need the following:
- Node.js with a minimum of node v14 installed
- A project to install NewsKit into. If you need to create a new one try Next.js or Create React App.
Use your favourite package manager to install NewsKit.
npm install newskit @emotion/react @emotion/styledyarn add newskit @emotion/react @emotion/styledPlease note that newskit is using emotion as styling engine, that is why you also need to
install@emotion/reactand@emotion/styled.
NewsKit components can be used like any typical react components. One thing to bear in mind is that they will need to be descendants of a NewsKitProvider which provides a single wrapper to configure your application. It adds a ThemeProvider, MediaQueryProvider, InstrumentationProvider and a LayerOrganizer to handle theming, media queries, instrumentation and stacking context in the application.
The following example shows the "Hello World!" example of using a NewsKit Tag component with the NewsKitProvider.
import {NewsKitProvider, Tag, newskitLightTheme} from 'newskit';
import React from 'react';
export default class App extends React.Component {
render() {
return (
<NewsKitProvider
theme={newskitLightTheme}
instrumentation={'instrumentation provider props'}
layer={'layer organizer props'}
>
<Tag
href="http://example.com"
size="medium">
Tag Content
</Tag>
</NewsKitProvider>
)
}
}- To start engineering with NewsKit, follow the steps in the quickstart guide.
- Have a question? Contact the NewsKit team via the contact form.
Feel free to reach out by raising issues on our github.
See the contributing guidelines in the wiki.