Nice! React Components

Build Status

Nice! React provides UI elements from the Nice! UI library in the form of React components. It is maintained by the Nice! circle within Textkernel.

To get started, check out

Quick start

Several quick start options are available:

  • Clone the repo:

    $ git clone
  • Install with npm:

    $ npm install --save @textkernel/nice-react


  1. Import the desired UI component from the library, e.g.:

    const { Alert } = require('nice-react');

    ...or using ES6 import:

    import { Alert } from 'nice-react';
  2. Include the component in your page

    <Alert context="primary" heading="I'm a nice React component!">
        Some content

Some components have sub-components of their own. These are defined as class properties of the main component, so no need to import them separately. For example, the Pagination component comes with Item and Gap which can be used like this:

import Pagination from 'nice-react';

    <Pagination.Item disabled>
        &laquo; Previous
    <Pagination.Item current>
    <Pagination.Gap />

Examples & Testing


Nice! React supports Storybook.

  1. Make sure you have Storybook installed (globally):

    $ npm i -g @storybook/cli
  2. Run npm run storybook

  3. Go to http://localhost:9001 to check out examples of all components

...or check out


  • Run tests: npm test
  • Run tests in watch mode: npm run test:watch
  • Coverage report: npm run test:coverage

Publishing on NPM

npm publish --access=public

Bugs and feature requests

Found a bug or have a feature request? Please open a new issue.


Nice! React is maintained under the Semantic Versioning guidelines.

Copyright and license

Code and documentation ©️ 2018 Textkernel B.V.