لیست تمپلیت های رایگان ریکت برای داشبورد ادمین در سال ۲۰۲۱

توسعه دهندگان قبل از شروع طراحی و پیاده سازی وب اپلیکیشن، انتخاب های زیادی دارند. مسلما کتابخانه ری اکت یکی از بهترین انتخاب ها می تواند باشد. ReactJS در سال های اخیر محبوبیت زیادی در بین برنامه نویسان سراسر جهان پیدا کرده است. یکی از دلایل این فراگیری، ساده بودن یادگیری آن نسبت به فریم ورک Angular و قدرتمند بودن این لایبرری می باشد. پس از انتخاب فریم ورک یا کتابخانه موردنظر جهت تولید داشبورد ادمین، نوبت به انتخاب یک کتابخانه رابط کاربری (UI Library) خوب می رسد. کتابخانه های زیادی در این زمینه وجود دارند که تحقیق و بررسی آنها شاید ساعت ها زمان ببرد. ما در این مقاله سعی کردیم لیستی از بهترین تمپلیت های داشبورد ری اکت را در سال 2021 میلادی معرفی کنیم و مشخصات هریک را توضیح دهیم.

معیارهای انتخاب بهترین تمپلیت داشبورد مدیریت برای ری اکت:

• ویژگی ها و طراحی: شما می خواهید داشبوردی که توسط ری اکت توسعه می دهید زیبا و کارا باشد. یعنی در عین حال که امکانات فراوانی دارد از نظر بصری نیز زیبا و کاربرپسند باشد.
• میزان محبوبیت: هر اندازه یک لایبرری از نظر کاربران رای یا ستاره بیشتری گرفته باشد و دانلود بیشتری داشته باشد احتمال اینکه بتواند نیازهای پروژه شما را نیز برآورده کند بیشتر خواهد بود. چک کردن شبکه های اجتماعی هر کتابخانه UI می تواند به شما در این زمینه کمک کند.
• پشتیبانی و بروز رسانی: اغلب کتابخانه هایی که به صورت رایگان عرضه می شوند پشتیبانی خاصی به کاربران ارائه نمی دهند. پروژه های متن باز یا Open-Source بطور مستمر نیاز به آپدیت دارند و باید در انتخاب یک UI Library مناسب، به آپدیت بودن آن نیز توجه شود. مشلما شما نمی خواهید از امکانات و ویژگی های جدید عقب بمانید در حالیکه رقیبان شما در حال پیشرفت و توسعه اپلیکیشن خود هستند.

Devias Kit

ویژگی ها:

• ساده و مینیمال بودن آن
• طراحی شده بر اساس Material UI 4
• دریافت بیش از 3000 ستاره از کاربران در Github
• دارای امکاناتی نظیر: لیست کاربران، لاگین کاربران، تنظیمات آنها، جدول و…

مراحل نصب و استفاده:

• دانلود Devias از گیتهاب، یا سایت devias.io یا clone گرفتن ریپو بصورت git clone https://github.com/devias-io/material-kit-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

 (Dashboard) Creative Tim

ویژگی ها:

• ایده گرفته شده از متریال دیزاین گوگل
• طراحی شده بر اساس Material UI 4
• دریافت بیش از 9.7k ستاره در Github
• دارای امکاناتی نظیر: پروفایل کاربران، جدول، انواع فرم، نقشه و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از گیتهاب، یا سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/material-dashboard.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Tabler

ویژگی ها:

• طراحی ساده و در عین حال جذاب
• طراحی شده بر اساس فریم ورک Bootstrap 4
• دریافت بیش از 1.7k ستاره در Github
• دارای امکاناتی نظیر: جدول، چارت، نقشه، پست وبلاگ، پروفایل کاربر، انواع فرم و گالری و…

مراحل نصب و استفاده:

• اجرای دستور yarn add tabler-react یا npm install tabler-react
• استفاده در ریکت به شکل زیر:

import React, { Component } from "react";

import "tabler-react/dist/Tabler.css";

import { Card, Button } from "tabler-react";

class MyCard extends Component {
  render() {
    return (
      <Card>
        <Card.Header>
          <Card.Title>Card Title</Card.Title>
        </Card.Header>
        <Card.Body>
          <Button color="primary">A Button</Button>
        </Card.Body>
      </Card>
    );
  }
}

Shards

ویژگی ها:

• طراحی سبک و کم حجم
• طراحی شده بر اساس فریم ورک سفارشی
• دریافت بیش از 1.3k ستاره در Github
• دارای امکاناتی نظیر: پست وبلاگ، فرم، ویرایشگر محتوا، صفحه خظاها و…
• اخطار: مدتی است که این لایبرری بروز رسانی نشده است!

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/DesignRevision/shards-dashboard-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Reduction

ویژگی ها:

• طراحی رنگارنگ و جذاب
• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 1.2k ستاره در Github
• دارای امکاناتی نظیر: داشبورد، چارت و نمودار، فرم لاگین کاربران و…
• اخطار: اخیرا آپدیت نشده است!

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/reduction-admin/react-reduction.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

 (Light Bootstrap) Creative Tim

ویژگی ها:

• طراحی ساده و زیبا
• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 570 ستاره در Github
• دارای امکاناتی نظیر: پروفایل کاربر، جدول، نوتیفیکیشن، فرم، نقشه و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از گیتهاب، یا سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/light-bootstrap-dashboard-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

react-admin

ویژگی ها:

• طراحی پیش فرض با متریال دیزاین
• طراحی شده بر اساس فریم ورک Material-UI v4
• دریافت بیش از 16k ستاره در Github

مراحل نصب و استفاده:

• اجرای دستور npm install react-admin یا yarn add react-admin
• استفاده در کدهای ریکت به شکل زیر:

// in app.js
import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

render(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>,
    document.getElementById('root')
);

AntD Admin

ویژگی ها:

• طراحی متریال
• طراحی شده بر اساس فریم ورک AntD v4 
• دریافت بیش از 8.3k ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول و…
• اخطار: ممکن است لود آن کمی طول بکشد، به ویژه برای قالب های غیرانگلیسی زبان

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/zuiidea/antd-admin.git my-project
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Airframe

ویژگی ها:

• طراحی شبیه Ant Design
• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 3.5k ستاره در Github
• قابل استفاده برای وب اپلیکیشن های سفارشی مانند CRM ها و CMS ها و پنل های ادمین و…
• اخطار: به مدت 2 سال است که آپدیت نشده است!

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/0wczar/airframe-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Creative Tim – Argon

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 270 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از گیتهاب، یا سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/argon-dashboard-react.git یا اجرای دستور npm i argon-dashboard-react یا yarn add argon-dashboard-react
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Themesberg – Volt

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 270 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• ثبت نام در سایت Themesberg و دانلود لایبرری یا کلون گرفتن از ریپو به شکل git clone https://github.com/themesberg/volt-react-dashboard.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Creative Tim – Notus

ویژگی ها:

• طراحی شده بر اساس فریم ورک TailWindCSS
• دریافت بیش از 250 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/notus-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

BootstrapDash – Star

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 120 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

BootstrapDash – Corona

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 20 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/BootstrapDash/corona-react-free-admin-template.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

CodedThemes – Datta Able

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 45 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/codedthemes/datta-able-bootstrap-dashboard.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Creative Tim – Black

ویژگی ها:

• یک تم مشکی جذاب
• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 300 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه، نوتیفیکیشن و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از Github یا سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/black-dashboard-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Creative Tim – Now UI

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 94 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه، نوتیفیکیشن و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/now-ui-kit-react.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Creative Tim – Paper

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 140 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه، نوتیفیکیشن و…

مراحل نصب و استفاده:

• دانلود Creative-Tim از گیتهاب، یا سایت creative-tim.com یا clone گرفتن ریپو بصورت git clone https://github.com/creativetimofficial/paper-dashboard-react.git یا اجرای دستور npm i paper-dashboard-react یا yarn add paper-dashboard-react
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Core UI – Admin

ویژگی ها:

• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 3.3k ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه، نوتیفیکیشن و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/coreui/coreui-free-react-admin-template.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

Blur Admin

ویژگی ها:

• تم مشکی رنگ جذاب
• طراحی شده بر اساس فریم ورک Bootstrap v4
• دریافت بیش از 460 ستاره در Github
• دارای امکاناتی نظیر: فرم لاگین، چارت، جدول، نقشه، نوتیفیکیشن و…

مراحل نصب و استفاده:

• clone گرفتن ریپو بصورت git clone https://github.com/knledg/react-blur-admin.git
• نصب dependency های لایبرری با اجرای دستور npm install یا yarn install
• استارت سرور با اجرای دستور npm run start یا yarn start
• مشاهده خروجی لایبرری در آدرس localhost:3000

در این مقاله سعی کردیم چند مورد از تمپلیت های داشبورد مدیریت ادمین را خدمتتان معرفی کنیم و میزان محبوبیت آن را بر اساس امتیاز آنها در گیتهاب بررسی کنیم. همچنین نحوه دانلود و نصب آنها آموزش دهیم. شما می توانید با توجه به نیاز خود کتابخانه UI موردنظرتان را انتخاب و استفاده کنید. لطفا اگر کتابخانه دیگری برای بخش داشبورد مدیریت ریکت می شناسید که در این لیست 20 تایی وجود نداشت در دیدگاه های مقاله ارسال فرمایید.