Guides
Engineering overview
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?
Systems thinking is at the core of digital product design. NewsKit improves design consistency and developer efficiency across teams with considered, reusable solutions, and shared best practices. The result is more robust products and more time for innovation.
Accessible
NewsKit components follow WCAG guidelines, WAI Aria andAria-practices. Components are AA compliant with A11Y features built-in including props to extend their flexibility if required.
Adaptive
NewsKit has an extensivetheming 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.
NewsKit Handoff guidance
Guidance on how to find the information needed in designs for engineers to build.View NewsKit Handoff guidance
Browser support
NewsKit supports the following modern browsers:
| Chrome | Safari | Firefox | Edge |
|---|
Example architecture
Below is an example of a recommended architecture when using the NewsKit design system:
What’s next?
Want to use NewsKit for your next product? Follow the next steps belows to learn more:
To start engineering with NewsKit, follow the steps in the quickstart guide.
NewsKit components are built to emit events "out of the box".