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