Installation

Basic Installation

Steps to be followed for getting started with the template:

There are followings basics packages you should install before going further.

  1. Open terminal or CMD and go the root directory of the template
  2. Run in terminal or CMD: npm install
  3. To Run project on Local environment run: npm start
  4. Then visit: http://localhost:3000

Development to production

Here is the steps of production:

  1. To Deploy project on server create production build by running: npm run build
  2. This will generate /build folder in project root directory you'll have to upload these file using a FTP on your server
  3. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Folder Structure

Here is the general structure of the template:


React
| - public
   | - img
     - favicon.ico
     - index.html

| - src
  | - assets
    | - css
    | - fonts
    | - images
    | - scss

    | - components
        | - partials
            | - footerstyle
            | - headerstyle
            | - sidebarstyle

    | - layouts
        | - backend
            | - layout1.js

    | - router
        | - extra-pages-route.js
        | - layout1-route.js
        | - layouts-route.js
    | - store
    | - views
    - App.js
    - App.test.js
    - index.js
    - reportWebVitals.js
    - setupTests.js
  - env.development.local
  - env.production.local
  - .gitignore
  - .htaccess
  - package-lock.json
  - package.json
  - README.md
                                

For Favicon icon

Set favicon for replace favicon.ico and restart server


<link rel="icon" href="<%= BASE_URL %>favicon.ico">
                                

For Logo

Use the header style which is in components -> streamit -> Partials -> Header. Replace "logo.png" with your own logo image URL.


<Link to="/" className="header-logo">
    <img src={logo} className="img-fluid rounded-normal" alt="logo" />
</Link>
                                

For Changing Fonts

In react version change with scss file.

  1. Go to src/assets/scss/helper/_fonts.scss and change google fonts
    
    @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap")
    @import ("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap")
                                                
  2. Go to src/assets/scss/_variable.scss and change font family variable
    
    $font-family-title: &#x27;Heebo&#x27;, sans-serif;
    $font-family-base: &#x27;Poppins&#x27;, sans-serif
                                                                                                

Layout Configure

Here is the layout configure


 const Layout1 = () => {
      
    return(
        <>
         <div className="wrapper">
            <SidebarStyle />
            <HeaderStyle1 />
            
            <div className="content-page" id="content-page">
                <Layout1Route />
            </div>
         </div>
         <FooterStyle />
        </>
    )
}
                               

Sidebar & Header

Here is the sidebar and header

Sidebar


<Accordion as="ul" id="iq-sidebar-toggle" className="iq-menu" onSelect={(e) => setActiveMenu(e)}>
    <li className={`${location.pathname === '/' ? 'active' : ''} `}>
        <Link to="/" className="text-primary">
            <i className="ri-arrow-right-line"></i>
            <span>Visit site</span>
        </Link>
    </li>
    <li className={`${location.pathname === '/' ? 'active' : ''} `}>
        <Link to="/" className="iq-waves-effect">
            <i className="las la-home iq-arrow-left"></i>
            <span>Dashboard</span>
        </Link>
    </li>
    <li className={`${location.pathname === '/rating' ? 'active' : ''} `}>
        <Link to="/rating" className="iq-waves-effect">
            <i className="las la-star-half-alt"></i>
            <span>Rating </span>
        </Link>
    </li>
</Accordion>                                

Header


<Nav as="ul" className="ml-auto navbar-list iq-header">
    <Dropdown as="li" className="nav-item nav-icon search-content iq-search">
        <Dropdown.Toggle as={CustomToggle} href="#" variant="search-toggle iq-waves-effect text-gray rounded">
            <i className="ri-search-line"></i>
        </Dropdown.Toggle>
        <Dropdown.Menu>
            <Form action="#" className="search-box p-0">
                <input type="text" className="text search-input" placeholder="Type here to search..."/>
                <Link className="search-link" to="#"><i className="ri-search-line"></i></Link>
            </Form>
        </Dropdown.Menu>  
    </Dropdown>   
</Nav>

Custom Components

Custom Card

We have build different types of custom card components. And these are the some prop and slots


const Card = (props) => <div className={`card ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header = (props) => <div className={`card-header d-flex justify-content-between ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Body = (props) => <div className={`card-body ${props.className ? props.className :''}`}> {props.children} </div>
Card.Footer = (props) => <div className="card-footer"> {props.children} </div>
Card.Header.Title = (props) => <div className={`header-title ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header.Action = (props) => <div className={`header-action ${props.className ? props.className : ''}`}> {props.children} </div>
                                                                            

Prop

Prop is set the attriblute for the component.

Name Detail
Classname Class added in card header, card body, card footer, card header title, card header action div

Dropdown


const CustomToggle = React.forwardRef(({ children,variant, onClick }, ref) => (
    <Link
      to="/"
      ref={ref}
      onClick={(e) => {
        e.preventDefault();
        onClick(e);
      }}
      className={variant}
    >
      {children}
      
    </Link>
));
                                        
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
type String Difftrent type of chart set by type
option Object Chart data and setting by option object

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below:

 
    <section class="... overview-block-ptb">
    [YOUR CONTENT]<p>
    </section>
</p>
                                                                                            

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can use color in the Text. simply add .main-color ( or any color you want) class where you want to use. See example below:

 
<div class="text-primary">
[YOUR TEXT CONTENT]
</div>
                                                                                                                                        

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below:

 
<div class="bg-primary">
[YOUR CONTENT]
</div>
                                                                                                                                        

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below:

 
<div style="background:url(${require(path)}); ">
[YOUR CONTENT]
</div>                                                                                  

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

 
<div style="background:url(${require(path)}); background-repeat:no-repeat;">
[YOUR CONTENT]
</div>                                                                                            

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

 
<div style="background:url(${require(path)}); background-size:cover;">
[YOUR CONTENT]
</div>
                                                                                                                                        

For Background overlay

You can use these .mm-over-black-30, .mm-over-white-20, .mm-over-green-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

 
<div class="mm-over-black-80">
[YOUR CONTENT]
</div>                                                                                                                      

Structure: .mm-over-{color}-{opacity}. For Example, .mm-over-black-80

Bootstrap Components

Bootstrap has wonderfull documentation on the following components::

Browser Support

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Tool

Images



Plugins



CSS & Fonts