Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Guides

Engineering quickstart

Start building digital products with NewsKit.

Requirements

To use NewsKit components in your project, you’ll need:

  • Node.js v16 or newer (eg 16.10.0 gives good performance).

  • A project to install NewsKit into. If you need to create a new one try Next.js or Create React App.

We recommend typescript, but NewsKit works with vanilla javascript too.

Install the package

Install the NewsKit package using a package manager like npm or yarn.

1npm install newskit @emotion/react @emotion/styled

or


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

Set up an app

NewsKit components can be used like any React components. They 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.

Here's the "Hello World!" example of using a NewsKit Tag component with the NewsKitProvider.

1import {NewsKitProvider, Tag, newskitLightTheme} from 'newskit';
2import React from 'react';
3export default class App extends React.Component {
4  render() {
5    return (
6      <NewsKitProvider 
7        theme={newskitLightTheme}
8        instrumentation={'instrumentation provider props'}
9        layer={'layer organizer props'}
10        >
11        <Tag
12          href="http://example.com"
13          size="medium">
14            Tag Content
15        </Tag>
16      </NewsKitProvider>
17    )
18  }
19}

What’s next?

Creating a theme

Theme NewsKit components to match your brand.

Render NewsKit components using an available theme.

Need Help?

Can’t find what you’re looking for?

Get in touch

Need Help?

Can’t find what you’re looking for?