VRISTO - Multipurpose Tailwind CSS Admin Template

Documentation

Preview Buy Now

Installation process

The following process will be used to install admin dashboard using package manager.

Install Node.js : Please install latest version of Node.js from https://nodejs.org
Extract main template : Extract the admin template site to your suitable directory or folder.
Access Command Prompt : Open node.js command prompt.
- Note:- The process mentioned below can also be excuted with system command prompt.
In CMD, Navigate to the location where main folder is extracted.
Navigate to the root folder of project where package.json file exist.
Install node dependencies : Run npm install.
To run npm run dev.
- Note:- when you run above command it will run project in browser automatically.
- Note:- It will enable auto refresh function everytime you save a file.
Run command npm run build to build for production.

In case if you have any problems or query then please contact us

File Sturcture

The arrangement below describes our file structure.

Vristo
- components
  - layouts
    - all the react js app layout components
  - all the react js other components
- app
  - all the app pages
- public
  - assets
    - images
      - all the image files
  - locales
    - all the locales json files
- store
  - reactjs store file
- styles
  - all the css files and folders
- App.tsx - custom app setting configuration file
- next.config.js
- i18n.ts
- ni18n.config.ts.js
- package.json
- postcss.config.js
- tailwind.config.js
- theme.config.tsx
- tsconfig.json
- .editorconfig
- .gitignore
- .prettierrc

Code Structure

This section will give you a brief description of our code.

1. Header Section : This is the default navbar section. It contains :

Sidebar Toggle button.
Quick access button for calendar.
Quick access button for todolist.
Quick access button for chat.
Search Bar
Theme toggle button.
Language Dropdown
Message Dropdown
Notification Dropdown
User Profile with Dropdown
Horizontal Menu

Note:- These categories are defined by us and you can modify as per your needs :)

  <!--  Navbar Component  -->
  <Header></Header>
  ==========================================================

  <!--  BEGIN NAVBAR  -->
  <header className={`z-40 ${themeConfig.semidark && themeConfig.menu === 'horizontal' ? 'dark' : ''}`}>
      <div className="shadow-sm">
          <div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">
              ..............................
          </div>

          <!-- horizontal menu -->
          <ul
              className="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
          >
              ..............................
          </ul>
      </div>
  </header>
  <!--  END NAVBAR  -->

2. Main Container Section : The main container section includes header, footer and main content section.

Sidebar Section
Header Section
Main Content Section
Footer Section

  <!--  Main Container Component  -->
  <MainContainer></MainContainer>
  ==========================================================

  <!--  BEGIN MAIN CONTAINER  -->
  <div
      className={`${(store.getState().themeConfig.sidebar && 'toggle-sidebar') || ''} ${themeConfig.menu} ${themeConfig.layout} ${
          themeConfig.rtlClass
      } main-section antialiased relative font-nunito text-sm font-normal`}
  >
      ..............................
  </div>
  <!-- END MAIN CONTAINER -->

3. Sidebar : This is the sidebar code.

  <!--  Sidebar Component  -->
  <Sidebar></Sidebar>
  ==========================================================

  <!--  BEGIN SIDEBAR  -->
  <div className={semidark ? 'dark' : ''}>
      <nav
          className={`sidebar fixed min-h-screen h-full top-0 bottom-0 w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] z-50 transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
      >
          ..............................
      </nav>
  </div>
  <!--  END SIDEBAR  -->

4. Main Content : This is the Main Content code section.

This is the root structure where you can create widgets, charts, tables etc.

  <!--  BEGIN CONTENT PART  -->
  <div className="main-content flex min-h-screen flex-col">
      ..............................
  </div>

  <!--  END CONTENT PART  -->

5. Footer : This is the Footer code.

  <!--  Footer Component  -->
  <Footer></Footer>
  ==========================================================

  <!--  BEGIN FOOTER  -->
  <p className="p-6 pt-0 mt-auto text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">
      ..............................
  </p>
  <!--  END FOOTER  -->

The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.

  <>
    {/* BEGIN MAIN CONTAINER */}
    <div className="relative">
        {/* BEGIN SIDEBAR MENU OVERLAY */}
        <Overlay />
        {/* END SIDEBAR MENU OVERLAY */}

        <ScrollToTop />

        {/* BEGIN APP SETTING LAUNCHER */}
        <Setting />
        {/* END APP SETTING LAUNCHER */}

        <MainContainer>
            {/* BEGIN SIDEBAR */}
            <Sidebar />
            {/* END SIDEBAR */}
            <div className="main-content flex min-h-screen flex-col">
                {/* BEGIN TOP NAVBAR */}
                <Header />
                {/* END TOP NAVBAR */}

                {/* BEGIN CONTENT AREA */}
                <ContentAnimation>{children}</ContentAnimation>
                {/* END CONTENT AREA */}

                {/* BEGIN FOOTER */}
                <Footer />
                {/* END FOOTER */}
                <Portals />
            </div>
        </MainContainer>
    </div>
  </>

Admin JS Code Structure

This section will give you a brief description of our admin template JS code.

1. App.tsx : This is primary tsx file. It is necessary for the layout to work. It contains the code as follows :-

Set default layout
Set Navigation Position
Set Navbar Type
Set Router Animation
Theme change funtionality
Direction change funtionality

    'use client';
    import { PropsWithChildren, useEffect, useState } from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    import { IRootState } from '@/store';
    import { toggleRTL, toggleTheme, toggleMenu, toggleLayout, toggleAnimation, toggleNavbar, toggleSemidark } from '@/store/themeConfigSlice';
    import Loading from '@/components/layouts/loading';
    import { getTranslation } from '@/i18n';

    function App({ children }: PropsWithChildren) {
        const themeConfig = useSelector((state: IRootState) => state.themeConfig);
        const dispatch = useDispatch();
        const { initLocale } = getTranslation();
        const [isLoading, setIsLoading] = useState(true);

        useEffect(() => {
            dispatch(toggleTheme(localStorage.getItem('theme') || themeConfig.theme));
            dispatch(toggleMenu(localStorage.getItem('menu') || themeConfig.menu));
            dispatch(toggleLayout(localStorage.getItem('layout') || themeConfig.layout));
            dispatch(toggleRTL(localStorage.getItem('rtlClass') || themeConfig.rtlClass));
            dispatch(toggleAnimation(localStorage.getItem('animation') || themeConfig.animation));
            dispatch(toggleNavbar(localStorage.getItem('navbar') || themeConfig.navbar));
            dispatch(toggleSemidark(localStorage.getItem('semidark') || themeConfig.semidark));
            // locale
            initLocale(themeConfig.locale);

            setIsLoading(false);
        }, [dispatch, initLocale, themeConfig.theme, themeConfig.menu, themeConfig.layout, themeConfig.rtlClass, themeConfig.animation, themeConfig.navbar, themeConfig.locale, themeConfig.semidark]);

        return (
            <div
                className={`${(themeConfig.sidebar && 'toggle-sidebar') || ''} ${themeConfig.menu} ${themeConfig.layout} ${
                    themeConfig.rtlClass
                } main-section relative font-nunito text-sm font-normal antialiased`}
            >
                {isLoading ? <Loading /> : children}
            </div>
        );
    }

    export default App;

2. theme.config.tsx : This is theme configuration tsx file. This file contains optional setting for set defaut layout, theme and language functionality. It contains the code as follows :-

Language
Theme
Navigation
Layout
Direction
Animation
Navbar
Semidark

  const themeConfig = {
    locale: 'en', // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
    theme: 'light', // light, dark, system
    menu: 'vertical', // vertical, collapsible-vertical, horizontal
    layout: 'full', // full, boxed-layout
    rtlClass: 'ltr', // rtl, ltr
    animation: '', // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
    navbar: 'navbar-sticky', // navbar-sticky, navbar-floating, navbar-static
    semidark: false,
  };

  export default themeConfig;