Blk Design System React

Blk Design System React is a free, black-themed Bootstrap 4 UI kit for React developers, created by Creative Tim with Reactstrap and create-react-app, that supplies over 70 components and three example page templates for building modern websites.

What is Blk Design System React?

Blk Design System React is a responsive Bootstrap 4 kit developed with React, Reactstrap, and create-react-app, and is free to use under the MIT license. It takes standard React project scaffolding and gives you prebuilt components, styles, and example pages — a landing page, a profile page, and a register page — along with a live documentation demo. It is the React implementation of Creative Tim's Blk Design System, which is also available in HTML and Angular versions, so the same dark visual language can be reused across frameworks.

Key Features

• Over 70 components — buttons, inputs, navbars, pagination, tabs, notifications, typography, Nucleo icons, and more, all styled for a black design aesthetic.
• Built on Bootstrap 4 via Reactstrap — components are Reactstrap wrappers, so existing Bootstrap or Reactstrap projects can import Blk styles on top.
• Three example templates — a landing page, a profile page, and a register page, each in src/views/examples, ready to customize.
• Sass source files — full SCSS under src/assets/scss with custom cards, sections, mixins, and vendor styles, plus precompiled CSS and a minified CSS file.
• Nucleo icon font — includes nucleo-icons.css and font files in woff, woff2, eot, and ttf formats.
• Reusable components — Footer, Navbars, and PageHeader are isolated in src/components for drop-in use.
• Official browser support — last two versions of Chrome, Firefox, Edge, Safari, and Opera.

Who is it for?

• React developers who want a dark Bootstrap 4 base without writing CSS from scratch; they can run npm i blk-design-system-react or clone the GitHub repo and start editing.
• Designers who need to prototype black-themed landing, profile, or registration pages quickly using the included example views.
• Teams already on Bootstrap 4/Reactstrap who want to reuse the kit's components in an existing React app, since the kit uses the same underlying stack.

What can you do with Blk Design System React?

• Build a startup landing page: start from LandingPage.js and customize the navbar, hero, and sections to present a product.
• Create a user profile page: use ProfilePage.js as a scaffold and restyle cards and typography for a personal or team profile.
• Assemble a registration flow: use RegisterPage.js to get a styled signup layout with inputs and buttons ready to wire to a backend.

How does Blk Design System React work?

Install it with npm i blk-design-system-react, or download from GitHub or Creative Tim, then run the standard create-react-app workflow. The file structure separates views in src/views, reusable components in src/components, and global styles in src/assets/scss, with a demo at demos.creative-tim.com/blk-design-system-react that documents each element.

Pricing

The kit is free under the MIT license. Creative Tim also sells a Blk Design System PRO React version with additional components and templates, but the open-source kit is fully free for personal and commercial use.

Alternatives

• Black Dashboard React — Creative Tim's free dark admin dashboard template, which focuses on backend dashboards rather than marketing pages.

FAQ

Is Blk Design System React free?

Yes, it is free under the MIT license, so you can use it in personal and commercial projects without paying a licensing fee.

What React and Bootstrap versions does it use?

It is built on Bootstrap 4 through Reactstrap, and uses create-react-app as the bundler, so it fits standard modern React project setups.

Does it include example pages?

Yes, the download includes three example views: a landing page, a profile page, and a register page, located in src/views/examples.

How do I install it?

You can run npm i blk-design-system-react, use Bower with bower install blk-design-system-react, or clone the GitHub repository directly.

What browsers are supported?

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