Rich-React

React js UI example. Contact list label

React js UI example and template, Contact list label! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: user,profile,social network,contacts,contact,label

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<div class="container bootstrap snippets bootdeys bootdey">
    <div class="row decor-default">
        <div class="col-lg-3 col-md-4 col-sm-12">
          <div class="contacts-labels">
            <div class="title">All contacts<span>76</span></div>
            <div class="list">
              <div class="input-group">
                <input type="text" class="contacts-search" placeholder="Search"/>
              </div>
              <div class="head">Labels</div>
              <div class="unit">
                <div class="lab lab-success">Work</div><span>7</span>
              </div>
              <div class="unit">
                <div class="lab lab-primary">Family</div><span>8</span>
              </div>
              <div class="unit">
                <div class="lab lab-danger">Private</div><span>13</span>
              </div>
              <div class="unit">
                <div class="lab lab-warning">Friends</div><span>47</span>
              </div>
              <button type="button" class="btn btn-primary font-weight-700">Add new label</button>
            </div>
          </div>
        </div>
        <div class="col-lg-9 col-md-8 col-sm-12">
          <div class="contacts-list">
            <h5 class="title">Contact List</h5>
    
            <form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
              <div class="input-group">
                <input type="text" class="contacts-list-search" placeholder="Search"/>
              </div>
              <div class="unit head">
                <div class="field name">
                  <div class="check">
                    <input id="cb1" name="cb1" type="checkbox"/>
                    <label for="cb1"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  Name
                </div>
                <div class="field phone">
                  Phone
                </div>
                <div class="field email icons">
                  Email
                  <div class="btn-group pull-right" role="group">
                    <button type="button" class="btn btn-default"><span class="icon icon-folder"></span></button>
    
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon icon-label"></span></button>
    
                      <ul class="dropdown-menu pull-right">
                        <li><a href="#/"><span class="label label-success text-dark">New</span></a></li>
                        <li><a href="#/"><span class="label label-primary text-dark">Social</span></a></li>
                        <li><a href="#/"><span class="label label-warning text-dark">Spam</span></a></li>
                      </ul>
                    </div>
                    <button type="button" class="btn btn-default"><span class="icon icon-trash"></span></button>
                  </div>
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb2" name="cb1" type="checkbox"/>
                    <label for="cb2"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>
                      
                  </div>
                  <div>
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="image" class="avatar"/> Alexander Verdnam
                  </div>
                  <div class="lab lab-warning">Friends</div>
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb8" name="cb1" type="checkbox"/>
                    <label for="cb8"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  <div>
                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="image" class="avatar"/> Gerard Butler
                  </div>
                  <div class="lab lab-success">Work</div>
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb3" name="cb1" type="checkbox"/>
                    <label for="cb3"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  <div>
                    <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="image" class="avatar"/> Anna Lee
                  </div>
                  <div class="lab lab-danger">Private</div>
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb4" name="cb1" type="checkbox"/>
                    <label for="cb4"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="image" class="avatar"/> Alexandera Verdnam
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb5" name="cb1" type="checkbox"/>
                    <label for="cb5"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  <div>
                    <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="image" class="avatar"/> Olga Verdnam
                  </div>
                  <div class="lab lab-primary">Family</div>
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
              <div class="unit">
                <div class="field name">
                  <div class="check">
                    <input id="cb6" name="cb1" type="checkbox"/>
                    <label for="cb6"></label>
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
                  <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="image" class="avatar"/> John Verdnam
                </div>
                <div class="field phone">
                  +1-800-600-9898
                </div>
                <div class="field email">
                  [email protected]
                </div>
              </div>
            </form>
          </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="http://91.234.35.26/iwiki-admin/v1.0.0/admin/css/vendors/checkboxes.css"/>
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/checkboxes.js"></script>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{
    margin-top:20px;
    background:#eee;
}

.decor-default {
    background-color: #ffffff;
}
.contacts-labels .title {
    font-size: 16px;
    line-height: 112px;
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-42.png") 0 50% no-repeat;
    padding: 0 0 0 32px;
    color: #333333;
    overflow: hidden;
}
.contacts-labels .title span {
    float: right;
}
.contacts-labels .settings {
    min-width: 70px;
    max-width: 70px;
    line-height: 38px;
    float: left;
    margin-right: 10px;
}
.btn-default {
    background-color: #ffffff;
    border: 1px solid #d8d8d8 !important;
    color: #333333;
    line-height: 46px;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.contacts-search {
    width: 100%;
    line-height: 38px;
    color: #333333;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-right: 0;
}
input {
    -webkit-appearance: none;
    border-radius: 0;
}
.contacts-search + .input-group-addon {
    background: #fff;
    border-radius: 0;
}
.input-group-addon:last-child {
    border-left: 0;
}
.contacts-search + .input-group-addon button {
    background: transparent;
}
button {
    border: none;
    outline: none;
}
.contacts-labels .list .head {
    font-size: 20px;
    line-height: 32px;
    font-weight: bold;
    text-align: center;
    background: #39bee8;
    color: #ffffff;
    margin: 60px 0 40px;
}
.contacts-labels .list .unit {
    overflow: hidden;
    padding: 0 0 20px;
}
.contacts-labels .list .unit .lab-success {
    background: #46be8a;
}
.contacts-labels .list .unit .lab-primary {
    background: #7266ba;
}
.contacts-labels .list .unit .lab-danger {
    background: #ff69b4;
}
.contacts-labels .list .unit .lab-warning {
    background: #f2a654;
}
.btn-primary {
    background-color: #7266ba;
}
.contacts-labels .list .unit .lab {
    font-size: 16px;
    line-height: 32px;
    float: left;
    width: 112px;
    padding: 0 0 0 18px;
    color: #ffffff;
}
.contacts-labels .list .unit span {
    display: block;
    float: right;
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
}
.btn {
    min-width: 180px;
    font-size: 26px;
    line-height: 48px;
    font-weight: normal;
    color: #ffffff;
    padding: 0 24px;
    -webkit-transition: background false false, 0.25s false false, cubic-bezier(0.4, 1, 0.3, 1) false false;
    -moz-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false;
    -o-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false;
    transition: background, 0.25s, cubic-bezier(0.4, 1, 0.3, 1);
}
.btn {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
}
.contacts-list {
    border-left: 1px solid #d8d8d8;
    margin: -20px 0 40px;
}
.contacts-list .title {
    padding: 0 0 0 20px;
    color: #7266ba;
    line-height: 124px;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.contacts-list-search {
    width: 100%;
    line-height: 60px;
    background: #585b9c;
    font-size: 24px;
    color: #fff;
    padding: 0 20px;
}
input {
    -webkit-appearance: none;
    border-radius: 0;
}
input {
    padding: 0;
    border: none;
    outline: none;
}
.contacts-list-search + .input-group-addon {
    background: #585b9c;
    border-radius: 0;
    border: 0;
}
.input-group-addon:last-child {
    border-left: 0;
}
.contacts-list-search + .input-group-addon button {
    background: transparent;
}

/************ Contact list*********************/
.contacts-list .unit.head {
    font-size: 20px;
    color: #7266ba;
    padding-bottom: 10px;
    overflow: visible;
}
.contacts-list .unit {
    padding: 20px 0;
    margin-top: -7px;
    border-bottom: 1px solid #d8d8d8;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    line-height: 40px;
    color: #333333;
    -webkit-transition: background false false, 0.3s false false;
    -moz-transition: background false false false, 0.3s false false false;
    -o-transition: background false false false, 0.3s false false false;
    transition: background, 0.3s;
}
.contacts-list .unit .field {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.contacts-list .unit .name {
    width: 40%;
    padding: 0 0 0 80px;
    position: relative;
}
.contacts-list .unit .name .check {
    position: absolute;
    left: 5px;
    top: -8px;
}
.contacts-list .unit .phone {
    width: 30%;
    padding: 0 0 0 20px;
}
.contacts-list .unit .email {
    width: 30%;
    padding: 0 0 0 20px;
    overflow: visible;
}
.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.contacts-list .unit .email .btn {
    min-width: 38px;
    max-width: 38px;
    font-size: inherit;
    padding: 0 8px;
    line-height: 36px;
}
.btn-group > .btn:first-child {
    margin-left: 0;
}
.btn-group > .btn, .btn-group-vertical > .btn {
    position: relative;
    float: left;
}
.btn-default {
    background-color: #ffffff;
    border: 1px solid #d8d8d8 !important;
    color: #333333;
    line-height: 46px;
}
.contacts-list .icons .icon-folder {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-9.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon-label {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-5.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon-trash {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-10.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}
.contacts-list .unit .name .avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 0 16px 0 0;
    vertical-align: top;
}
.contacts-list .lab {
    font-size: 14px;
    line-height: 21px;
    float: left;
    min-width: 75px;
    padding: 0 0 0 18px;
    color: #ffffff;
    margin-left: 60px;
}
.contacts-list .lab-warning {
    background: #f2a654;
}
.contacts-list .lab-success {
    background: #46be8a;
}
.contacts-list .lab-danger {
    background: #ff69b4;
}
.contacts-list .lab-primary {
    background: #7266ba;
}

Similar snippets

Find more similar snippets using the following tags:user,profile,social network,contacts,contact,label

React js template and ui example fbs4 user resume list

fbs4 user resume list

View
React js template and ui example Profile page

Profile page

View
React js template and ui example Customer testimonial

Customer testimonial

View
React js template and ui example User profile with post list

User profile with post list

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example profile edit data and skills

profile edit data and skills

View
React js template and ui example light user list

light user list

View
React js template and ui example product catalog

product catalog

View