Newskit Logo
Newskit Logo
View Github

Guides

Engineering quickstart

This page describes how to get started building a web application with NewsKit.

Prerequisites

To start using NewsKit components in 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.

It’s recommended to use typescript, but NewsKit will work with vanilla javascript too.

Install the package

You can install NewsKit package using a package manager like npm or yarn.

1npm install newskit

or


1yarn add newskit

Setting up an app

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 ThemeProvider, this can be thought of as the theme context, this theme will be applied to all of its descendants. The following example shows the "Hello World!" example of using a NewsKit Tag component with the Theme Provider.

1import {ThemeProvider, Tag, TagSize, newskitLightTheme} from 'newskit';
2import React from 'react';
3export default class App extends React.Component {
4render() {
5  return (
6    <ThemeProvider theme={newskitLightTheme}>
7      <Tag
8        href="http://example.com"
9        size={TagSize.Medium}>
10          Tag Content
11      </Tag>
12    </ThemeProvider>
13  )
14}
15}

What’s next?

Want to use NewsKit for your next product? Follow the next steps belows to learn more:

Creating a theme

Themes represent the brand’s identity, controlling the appearance of all NewsKit components.

To render NewsKit components you must have a theme available for them to utilise.

Need help?

Can’t find what you’re looking for?

Need help?

Can’t find what you’re looking for?