Now UI Kit Angular

Now UI Kit Angular is a free, responsive Angular UI kit built on Bootstrap 4 by Creative Tim and Invision, delivering over 50 styled components and three ready-made page templates for landing, login, and profile screens.

What is Now UI Kit Angular?

Now UI Kit Angular is a free component library that brings Invision's Now design language to Angular applications. It is built on Bootstrap 4, so it inherits the 12-column grid and fallback behavior for unstyled Bootstrap elements. The kit ships as a complete Angular CLI project with components organized under src/app/components, example pages under src/app/examples, and SCSS styling in src/assets/sass/now-ui-kit.scss. You can copy the components into an existing Angular project or run the scaffold directly.

The kit is a collaborative release from Invision and Creative Tim, and the same design is available in PSD and Sketch formats on Invision's site.

Key Features

• Bootstrap 4 foundation — Uses Bootstrap 4's grid and components, so any element not explicitly redesigned falls back to Bootstrap defaults.
• 50+ UI elements — Includes basic elements, typography, modals, notifications, navigation, and Nucleo icons, all styled with bold colors and flat design.
• Three example pages — The src/app/examples folder contains working landing, login, and profile page templates with Angular routing.
• Angular CLI project — Comes with angular.json, src/app, and src/assets directories; install dependencies with npm install, then serve with npm start at localhost:4200.
• SCSS customization — Styles are authored in SCSS files, including a main now-ui-kit.scss, allowing developers to adjust variables and colors.
• One-click deploy — The README includes a Deploy to Genezio button that provisions a live version of the template on Genezio.
• Free with a PRO upgrade — The kit is free; Creative Tim sells Now UI Kit PRO Angular from $79 for additional components and templates.

Who is it for?

• Angular developers building flat, modern UIs without starting from a blank stylesheet.
• Product teams that need polished marketing, login, and profile pages quickly for MVPs or internal tools.
• Designers and developers working together — the UI kit mirrors Invision's free PSD/Sketch Now files, so both sides can stay visually aligned.

What can you do with Now UI Kit Angular?

• Build a product landing page: Use the included landing template to present features with bold colors, large typography, and spacious sections.
• Add a login flow: Drop the login page template into your Angular app and wire it to your authentication service.
• Create a user profile screen: The profile template demonstrates media, typography, and layout patterns for member pages.
• Prototype faster with InVision: Export the same visual styles to InVision prototypes to gather feedback before final development.

How does Now UI Kit Angular work?

The template is a complete Angular project. To run it locally, install Node.js, then execute npm install -g @angular/cli, npm install, and npm start in the project root. The app compiles with the Angular CLI and serves at localhost:4200. From there, you can edit the SCSS in src/assets/sass or reuse the components under src/app.

Pricing

Now UI Kit Angular is free to download and use. Creative Tim also sells a PRO version — Now UI Kit PRO Angular — starting at $79, which adds more components and example pages.

Alternatives

• Angular Material — Google's official Material Design component library for Angular, offering a different visual language and a large set of components.
• NgBootstrap — Angular-native Bootstrap components that stay close to default Bootstrap styling, without the Now customization.

FAQ

Is Now UI Kit Angular free?

Yes, the kit is free. Creative Tim also sells a PRO Angular version with additional features, starting at $79.

How do I run Now UI Kit Angular?

Install Node.js, then run npm install -g @angular/cli, npm install, and npm start in the project folder. The app will be available at localhost:4200.

Which example pages are included?

The kit includes three example pages: a landing page, a login page, and a profile page, located in src/app/examples.

Can I use it with an existing Bootstrap 4 project?

Yes, because the kit is built on Bootstrap 4, you can import the Now UI Kit SCSS over your existing Bootstrap 4 project. Unstyled elements retain their Bootstrap defaults.