NewsKit

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.

Introduction

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

Accessible

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.

Adaptive

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

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

Guidance

Comprehensive online documentation and guidelines.

🙌 Browser support

| Chrome | Firefox | Safari | | --- | --- | --- | | last 2 versions | last 2 versions | last 2 versions |

✅ Pre-requisites

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.

📦 Install

Use your favourite package manager to install NewsKit.

npm install newskit @emotion/react @emotion/styled

yarn add newskit @emotion/react @emotion/styled

Please note that newskit is using emotion as styling engine, that is why you also need to install@emotion/react and @emotion/styled.

🔨 Usage

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>
    )
  }
}

👉 What’s next

• To start engineering with NewsKit, follow the steps in the quickstart guide.
• Have a question? Contact the NewsKit team via the contact form.

🐛 Bugs, Issues & Feature requests

Feel free to reach out by raising issues on our github.

🤝 Contributing

See the contributing guidelines in the wiki.

🔗 Key Links

• NewsKit Documentation
• View NewsKit Design System npm package
• Github repository
• Medium
• Storybook