newskit
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

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

    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
    Chrome
    Firefox
    Firefox
    Safari
    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:

    📦 Install

    Use your favourite package manager to install NewsKit.

    npm install newskit
    yarn add newskit

    🔨 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 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 component. More comprehensive usage documentation can be found on our website.

    import {ThemeProvider, Tag, TagSize, newskitLightTheme} from 'newskit';
    import React from 'react';
    
    export default class App extends React.Component {
    
      render() {
        return (
          <ThemeProvider theme={newskitLightTheme}>
            <Tag
              href="http://example.com"
              size={TagSize.Medium}>
                Tag Content
            </Tag>
          </ThemeProvider>
        )
      }
    }

    👉 What’s next

    🐛 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

    Keywords

    Install

    npm i newskit

    DownloadsWeekly Downloads

    976

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    8.39 MB

    Total Files

    13899

    Last publish

    Collaborators

    • newskit