newskit v7.7.0
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
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
6 months ago
11 months ago
11 months ago
10 months ago
10 months ago
9 months ago
9 months ago
11 months ago
8 months ago
11 months ago
11 months ago
11 months ago
9 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago