Paper Kit 2

Paper Kit 2 is a free Bootstrap 4 UI kit from Creative Tim that provides a complete set of pastel-colored, paper-inspired components and example pages for building responsive websites.

What is Paper Kit 2?

Paper Kit 2 is a fully coded web UI kit based on Bootstrap 4, created by Creative Tim. It takes design assets — SCSS variables, CSS files, JavaScript plugins, and HTML templates — and outputs a responsive website with landing, profile, register, and template pages. The kit runs on any static web server; it includes precompiled CSS and JavaScript plus a Gulp workflow for SCSS customization.

Key Features

• Bootstrap 4 components — Every standard Bootstrap 4 element is fully coded and responsive, including navigation, forms, modals, buttons, and cards, styled with pastel paper-like colors.
• Example pages — Includes landing-page.html, profile-page.html, and register-page.html, plus a template.html and nucleo-icons-demo.html.
• Gulp customization workflow — An included gulpfile.js lets you recompile SCSS via gulp compile-scss or watch for changes with gulp watch; color variables live in assets/scss/paper-kit/_variables.scss.
• Included JavaScript plugins — Ships with jQuery 3.2.1, Bootstrap, Popper, a datetime picker, a switch, moment.js, nouislider, and jQuery UI custom build.
• Precompiled assets — The download contains ready-to-use paper-kit.css, bootstrap.min.css, and paper-kit.js inside the assets folder.
• Nucleo icon demo — A dedicated nucleo-icons-demo.html highlights the bundled font icon set.
• HTML and Angular versions — The same UI kit is available as both an HTML product and an Angular product via Creative Tim.

Who is it for?

• Front-end developers — who need a quick Bootstrap 4 starting point with prebuilt components for marketing sites or MVPs.
• Web designers — who want a light, paper-themed aesthetic without writing all the SCSS from scratch; they can edit colors in one variables file.
• Students or hobbyists — learning Bootstrap 4 who can read the documentation and inspect the prebuilt example pages.

What can you do with Paper Kit 2?

• Startup landing pages: Use the included landing-page.html as a base and edit the copy and colors to launch a product site.
• Profile pages: Adapt the profile-page.html to create a personal bio or team member page with photo, stats, and contact sections.
• Registration flows: Reuse the register-page.html to prototype a sign-up form with the pre-styled inputs and validation states.
• UI prototyping: Combine the components from template.html to quickly assemble wireframes or design mockups in HTML.

How does Paper Kit 2 work?

Download the project zip, install Node.js, then run npm install in the source folder. Use gulp compile-scss for a single compilation or gulp watch for continuous compilation of any changes you make in the SCSS files, then run gulp open-app to open the presentation page.

FAQ

Is Paper Kit 2 free?

Yes, Paper Kit 2 is a free product from Creative Tim. A paid version called Paper Kit 2 PRO exists with more components, sections, and examples.

Is Paper Kit 2 responsive?

All components and example pages are fully responsive and look great on every screen size, according to the official page.

How do I customize the colors?

Open assets/scss/paper-kit/_variables.scss, change the HEX values or predefined variables, then run gulp compile-scss or gulp watch to recompile.

Which browsers are supported?

The official support targets the last two versions of Chrome, Firefox, Edge, Safari, and Opera.