Material-UI Core Headers

For the first part of the website that one of your potential clients will see, we’ve made the bellow header examples.

Description

We’ve made the following header components using various material-ui components, and props and also some custom jss/css classes.

Examples FREE

Auth Header

Welcome!

Use these awesome forms to login or create new account in your project for free.

Copy
import React from "react";

// Core Components
import AuthHeader from "components/Headers/AuthHeader.js";

function Example() {
  return (
    <>
      <AuthHeader />
    </>
  );
}

export default Example;
Traffic
350,897

3.48% Since last month

New users
2,356

3.48% Since last week

Sales
924

1.10% Since yesterday

Performance
49,65%

12% Since last month

Copy
import React from "react";

// Core Components
import Header from "components/Headers/Header.js";

function Example() {
  return (
    <>
      <Header />
    </>
  );
}

export default Example;

User Header

Hello Jesse

This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks

Edit profile
Copy
import React from "react";

// Core Components
import UserHeader from "components/Headers/UserHeader.js";

function Example() {
  return (
    <>
      <UserHeader />
    </>
  );
}

export default Example;

Examples PRO

AlternativeHeader

Alternative
NewFilters
Copy
import React from "react";

// Core Components
import AlternativeHeader from "components/Headers/AlternativeHeader.js";

function Example() {
  return (
    <>
      <AlternativeHeader section="Alternative" subsection="Dashboards" />
    </>
  );
}

export default Example;

AuthHeader

Welcome!

Use these awesome forms to login or create new account in your project for free.

Copy
import React from "react";

// Core Components
import AuthHeader from "components/Headers/AuthHeader.js";

function Example() {
  return (
    <>
      <AuthHeader
        title="Welcome!"
        description="Use these awesome forms to login or create new account in your project for free."
      />
    </>
  );
}

export default Example;

IndexHeader

Argon Dashboard PRO Material-UI

A beautiful premium dashboard for Material-UI, React and React Hooks.

Argon perfectly combines reusable HTML and modular CSS with a modern styling and beautiful markup throughout each HTML template in the pack.

Explore DashboardPurchase now
Components

Argon comes with over 70 handcrafted components.

Plugins

Fully integrated and extendable third-party plugins that you will love.

Pages

From simple to complex, you get a beautiful set of 15+ page examples.

Documentation

You will love how easy is to to work with Argon.

Copy
import React from "react";

// Core Components
import IndexHeader from "components/Headers/IndexHeader.js";

function Example() {
  return (
    <>
      <IndexHeader />
    </>
  );
}

export default Example;

SimpleHeader

Timeline
Copy
import React from "react";

// Core Components
import SimpleHeader from "components/Headers/SimpleHeader.js";

function Example() {
  return (
    <>
      <SimpleHeader section="Timeline" subsection="Timeline" />
    </>
  );
}

export default Example;

StatsHeader

Default
NewFilters
Total traffic
350,897

3.48% Since last month

New users
2,356

3.48% Since last month

Sales
924

3.48% Since last month

Performance
49,65%

3.48% Since last month

Copy
import React from "react";

// Core Components
import StatsHeader from "components/Headers/StatsHeader.js";

function Example() {
  return (
    <>
      <StatsHeader section="Dashboard" subsection="Dashboard" />
    </>
  );
}

export default Example;

UserHeader

Hello Jesse

This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks

Edit profile
Copy
import React from "react";

// Core Components
import UserHeader from "components/Headers/UserHeader.js";

function Example() {
  return (
    <>
      <UserHeader />
    </>
  );
}

export default Example;

UserRTLHeader

مرحبا جيسي

هذه هي صفحة ملفك الشخصي. يمكنك رؤية التقدم الذي أحرزته في عملك وإدارة مشاريعك أو المهام المعينة

تعديل الملف الشخصي
Copy
import React from "react";

// Core Components
import UserRTLHeader from "components/Headers/UserRTLHeader.js";

function Example() {
  return (
    <>
      <UserRTLHeader />
    </>
  );
}

export default Example;