Now UI Kit React

Now UI Kit React is a free Bootstrap 4 UI kit built with React, React Hooks, and Reactstrap, created by Creative Tim in collaboration with Invision.

What is Now UI Kit React?

Now UI Kit React is a free UI kit that translates Invision's Now UI design system, originally released as PSD and Sketch files, into React components. It runs on create-react-app, uses Reactstrap for component wiring, and is styled with custom SCSS that overrides Bootstrap defaults. The kit includes more than 50 UI elements and 3 pre-designed page templates: Landing Page, Register, and Profile Page. The live demo also shows a Login Page. The current version is 1.5.2.

Key features

• Bootstrap 4 foundation — built on top of Bootstrap 4 with Reactstrap, so elements not explicitly redesigned fall back to standard Bootstrap styles.
• React Hooks support — the kit is built with React Hooks, letting functional components use state and effects directly.
• 50+ UI elements — includes buttons, inputs, navigation bars, pagination, tabs, carousel, notifications, typography, and more.
• 3 example pages — Landing Page, Register, and Profile Page come ready to use; the demo shows an additional Login Page.
• Nucleo icons included — ships with 100 icons from the Nucleo library, which contains 12,000 icons total.
• Customizable SCSS variables — brand colors live in src/assets/scss/now-ui-kit/_variables.scss and can be changed with HEX values or predefined variables.
• One-click deploy to Genezio — the README includes a deploy button that hosts your own version on Genezio.
• Documentation and tutorial — the download includes a tutorial page, and an online documentation site covers setup and usage.

Who is it for?

Now UI Kit React is for front-end developers who want ready-made Bootstrap 4 styling in a React project without paying for a theme. It is also useful for teams already using Bootstrap 4, React, or Reactstrap — they can import the Now UI Kit styles over their existing project. Designers who use Invision's Now design files can use this React port to implement their mockups in code. Anyone who needs a landing page, login page, or profile page quickly can start from the included templates.

What can you do with it?

• Product teams — build a landing page using the LandingPage example, complete with headers, content sections, and footers.
• Startups — set up a registration flow with the Register page or a sign-in screen based on the Login page shown in the demo.
• Personal portfolios — use the Profile Page template to present your work, bio, and contact information.
• Prototypers — convert Invision Now design mockups into interactive React pages by reusing the kit's components.

How does Now UI Kit React work?

The quick start is: download the project's zip, install Node.js, run npm install in the folder containing package.json, then run npm start. The archive includes a tutorial page, and the online documentation explains each component and its props.

Pricing

Now UI Kit React is free to download and use. The original Now UI in PSD and Sketch formats is available separately from Invision's website. The kit is covered by Creative Tim's license agreement, which is linked from the repository.

FAQ

Is Now UI Kit React free?

Yes, Now UI Kit React is free to download and use. You can get it from the Creative Tim product page or the GitHub repository.

Does Now UI Kit React support React Hooks?

Yes, the kit is built with React Hooks, so you can use state and effects in functional components without writing class components.

What browsers are supported?

The project officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera.

Can I customize the colors?

Yes, branding colors are defined in src/assets/scss/now-ui-kit/_variables.scss. You can change them with a HEX value or with other predefined variables.

What is included in the download?

The zip contains the full source code: React components for footers, headers, and navbars; example views for Landing, Login, Profile, and Index; SCSS files for the Now UI styles; and a documentation page.