Carolina React UI Kit with Material-UI Free

Carolina React UI Kit with Material-UI Free

Looking for a simple, easy to use Google Material Design Ui Kit? Search no more, you’ve found the perfect one! Fully customizable, fully responsive, free React UI Kit with Material Design.

Add a nice touch to your projects by using this free React UI Kit built with Google’s Material Design principles.

Initial release: February 22, 2020 Last updated: February 17, 2020 Changelog

Clean & Simple styles

Highly customizable, clean styles and modern look and feel. Check out the live previews we’ve set up for this free UI Kit to see for yourself. This open source template features all the necessary elements and features o get you started working on your next websites as soon as possible. Stop loosing time figuring out a design that works and use this beautiful UI Kit.

Being powered by Google’s Material Design styleguide, Carolina React UI Kit with Material-UI Free will help you create modern and intuitive user interfaces that will make your users very happy.

If you’re looking for a PRO version, this React UI Kit has a bigger version which includes even more React widgets and features.


Customized Material-UI

We’ve included Material-UI React framework in this free UI Kit. This adds a lot of easy to use components and most importantly, it adds Google’s Material Design specifications over web elements.

We’ve included some helper classes that you can use over existing components to customize them even more.

React widgets

At it’s base, this React free UI Kit is powered by React, React Router and

There are over 40 different React third party widgets integrated in this UI Kit. We keep all of them updated to their latest version using our in-house, error free system.



All examples from the live preview have source code available in the documentation we’ve set up for this React UI Kit. If you found a bug or just want to ask something, you can open a Github issue and we’ll answer it there in an organised manner.

UI Kit Details
Initial release
February 22, 2020
Last updated on
February 17, 2020
React pages
React widgets
Documentation files
View Documentation
Open Source MIT License
Community Support through Github issues

UI Kit Key Features

Curious about what features this UI Kit has to offer? Scroll no more, we've put together a list of features below.

23 React pages included

Carolina React UI Kit with Material-UI Free includes exactly 23 React example pages covering all use cases for developing user interfaces for apps & presentation websites.

75 customized React widgets

With some help from our friends below, this UI Kit has exactly 75 widgets integrated with the same consistent design and UI style from Carolina UI Design System.

React DOM

This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.

React Router

This package provides the core routing functionality for React Router

React Router DOM

DOM bindings for React Router.

React Redux

Official React bindings for Redux.


A tiny (229B) utility for constructing className strings conditionally.

React scripts

This package includes scripts and configuration used by Create React App.

Material UI Lab

This package hosts the incubator components that are not yet ready to move to core.

Material UI Icons

This package provides the Google Material icons packaged as a set of React components.

Material UI Pagination

A pagination component for Material-UI using Button component.

Material UI

React components for faster and easier web development. Build your own design system, or start with Material Design.

Framer Motion

An open source and production-ready motion library for React on the web.

React Navigation Menu

A ready / simple to use, highly customizable, updateable, ajax supported, animated menu component for React.

Bootstrap Core

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

React ApexCharts

React ApexCharts is a wrapper component for ApexCharts ready to be integrated into your react.js application to create stunning React Charts.

Apex Charts

A modern JavaScript charting library to build interactive charts and visualizations with simple API.

RC Switch

switch ui component for react.

RC Tree

Tree UI component for React.

React Dropzone

Simple React hook to create a HTML5-compliant drag'n'drop zone for files.

React Step Wizard

A stepper or wizard widget for React.

React Draft WYSIWYG Editor

A Wysiwyg editor built using ReactJS and DraftJS libraries.

Draft.js WYSIWYG Editor

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.


A library for converting DraftJS Editor content to plain HTML.


A library for converting plain HTML to DraftJS Editor content.

React Gauge Chart

React component for displaying a gauge chart, using D3.js

React Circle

Renders a svg circle + percentage. It just works


Showcase your app to new users or explain functionality of new features.

React Ladda Buttons

LaddaButton is a React component that renders a Ladda button. You can change the button's loading state and progress using the loading and progress props.


A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.

React Big Calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

React Datepicker

A simple and reusable Datepicker component for React.

React Slick Carousel

Carousel component built with React. It is a React port of Slick carousel.

Chart.js for React

Chart.js wrapper for React powered applications.


Simple yet flexible JavaScript charting for designers & developers

React Context Menu

ContextMenu in React with accessibility support.

React CountUp

A configurable React component wrapper around CountUp.js.

Immutability helper

Mutate a copy of data without changing the original source.

React Drag & Drop

Drag and Drop functionality for React powered applications.

React DnD HTML5 Backend

The officially supported HTML5 backend for React DnD.

React Color

13 Different Pickers - Sketch, Photoshop, Chrome and many more

React Select

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

React Dropdown Select

Customisable dropdown select for React.

React Clipboard

Copy to clipboard React component.

React Text Mask

Input masking component for React. Made with attention to UX. Compatible with IE8+.

React Number Format

React component to format number in an input or as a text.

React noUiSlider

Lightweight range slider component for React.

React Cropper

An image cropping tool for React based on Cropper.js

React Loading Skeleton

Make beautiful, animated loading skeletons that automatically adapt to your app.

React Block UI

Easy way to block the user from interacting with your UI.

React Spinners

A collection of loading spinners with React.js

React Leaflet

React components for πŸƒ Leaflet maps.

Leaflet Maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

React Google Maps

component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map.

React Feather Icons

Collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

React FontAwesome Icons

Official React component for Font Awesome 5

React FontAwesome Icons Core

Official React component for Font Awesome 5

React Ionicons

Ionicons is a completely open-source icon set with 700+ icons integrated perfectly with React.

React FlagKit

Bringing world flags to React, in style.

Pe7 Icons

A series of iOS 7 inspired vector icons.

Socicons Icons

All social icons available with this widget.

React SweetAlerts

An awesome replacement for JavaScript's alert.

React Toastify

πŸŽ‰ React-Toastify allows you to add notification to your app with ease. No more nonsense!

React Sweet Progress

A way to quickly add a react progress bar to your app.

React Circular Progressbar

A circular progressbar component, built with SVG and extensively customizable.

React Perfect Scrollbar

This is a wrapper to allow use perfect-scrollbar in React.

Hamburgers navigation buttons

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

React Rating

React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.

Infinite Scroller

A component to make all your infinite scrolling woes go away with just 4.15 kB! Pull Down to Refresh feature added. An infinite-scroll that actually works and super-simple to integrate!

React Trend Sparklines

Rich data visualizations for applications, powered by React.

React Sparklines

Beautiful and expressive sparklines component for React.

Date FNS

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Date-io FNS

Date-io adapter for date-fns

Material-UI pickers

Accessible, customizable, delightful date & time pickers for @material-ui/core

We value our customers

We try to resolve any issues you might have as soon as possible. We've set up a set of tools to help in your development endeavours.

Github Repository

Each UI Kit has a Github repo where we track changelogs, issues and suggestions. PRO UI Kits customers can request private Github access to say in sync with all our code commits.

Online Documentation

Carolina React UI Kit with Material-UI Free has an extensive documentation available online which contains code examples for each section or component available in the live preview.

Support Tickets

You'll be up and running in no time, thanks to our detailed individual docs sections packed with explanations and code snippets.

Discord Channel

Say hello, ask for help or just chat. We have a Discord channel ready for that. Also, holders of a PRO license can ask for help with priority.

UI Kits Highlights

Below you'll find some features that makes Carolina React UI Kit with Material-UI Free stand out from the crowd

SCSS Stylesheets

All Carolina React UI Kit with Material-UI Free stylesheets are built with SCSS which makes it easy to customize and propagate variables changes across all included components.

Clean code

Each element, each component, each page has been carefully coded using the same consistent style and structure.

Modular architecture

We've split the assets architecture into a logical structure making it easy to remove or add components or pages.

Example pages

We've included in Carolina React UI Kit with Material-UI Free examples pages & starter kits, that will boost you project start.

Icon fonts

Carolina React UI Kit with Material-UI Free has at least 2 different font icons integrated. You'll have at least 2500+ icons at your disposal.

Easy to customise

To customize your project, use either the included CSS helper classes integrated in Carolina React UI Kit with Material-UI Free or SCSS variables that can be compiled using the build tools.

Google fonts

You can easily change the included Google font to a different one, just by adding a line of code in your app head tag.

Consistent design

We use mainly two frameworks: Bootstrap 4 or Material Design. All elements and components are styled using the same design approach, the same color/spacing/size and the same common SCSS variables.


Carolina React UI Kit with Material-UI Free is 100% compatible with whatever framework solution we chose for this template.

Fully responsive

We're mainly using Bootstrap 4 powerful responsive utilities, making our products perfectly adaptable to any screen size, desktops to mobiles.

Optimized assets

Performance is an important factor when serving website or apps to customers. We took great care and managed to obtain almost a perfect speed score for Carolina React UI Kit with Material-UI Free.

Powerful documentation

Carolina React UI Kit with Material-UI Free has a separate documentation which is available online and is packed with code examples, explanations and tutorials.

Download Carolina React UI Kit with Material-UI Free

Looking for a simple, easy to use Google Material Design Ui Kit? Search no more, you've found the perfect one! Fully customizable, fully responsive, free React UI Kit with Material Design. Add a nice touch to your projects by using this free React UI Kit built with Google's Material Design principles.

FREE Version
  • Extended Support
  • Use in Commercial projects
  • Presentation Website Blocks
  • 150+ Components Included
  • Multiple Layouts/Colors Variations
  • Multiple pages & examples
  • User Pages & Applications
  • No Backlinks
  • Extended SASS Files
Download now
PRO Version
  • Extended Support
  • Use in Commercial projects
  • Presentation Website Blocks
  • 150+ Components Included
  • Multiple Layouts/Colors Variations
  • Multiple pages & examples
  • User Pages & Applications
  • No Backlinks
  • Extended SASS Files
Upgrade to PRO

Monthly Free Resources

Follow us on our social media accounts to stay up to date with design and frontend trends & freebies.

πŸ“¬ Monthly Newsletter

Get interesting design and development resources and stay in touch with us - subscribe today! πŸ‘¨πŸΌβ€πŸ«

We promise not to spam your inbox. We also hate spam!