Includes 70+ standalone front-end elements such as buttons, inputs, navbars, nav tabs, cards and alerts
ReactAdmin dashboard
React-Argon-Dashboard-Template — React Admin dashboard Template
By Pinto-PINTO
A backend admin dashboard template based on Chakra UI and React, offering 70+ front-end components, example pages and documentation.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual browser screenshot from the verified demo.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-16View source
What stands out
A quick read of the recorded project description.
Component color variations can be modified through JSS files and classes
Provides preset design blocks and example pages covering dashboard, tables, billing, profile, sign-in and sign-up views
Built-in RTL support, including an RTLProvider component, RTL layouts and an RTLPage example page
Uses resources such as Chakra UI, ApexCharts.js, Quill Editor and React Table
Provides a standalone documentation site explaining the usage of each element
Template Details
This template is produced by Simmmple and Creative Tim and targets backend admin interface development with Chakra UI and React. The README states it includes more than 70 standalone front-end elements, such as buttons, inputs, navbars, nav tabs, cards and alerts; component color variations can be modified through JSS files and classes. It also provides preset design blocks and example pages to ease the transition from prototype to functional code.
On the technology stack, the README lists Chakra UI, ApexCharts.js, Quill Editor (react-quill), React Table and ReactJS as the resources used. The file structure shows that src contains components (Card, Charts, Configurator, FixedPlugin, Footer, Icons, Layout, Menu, Navbars, RTLProvider, Separator, Sidebar, Tables), layouts (Admin, Auth, RTL), theme, variables, views (Billing, Dashboard, Profile, Tables under Dashboard; SignIn, SignUp under Pages; RTLPage under RTL), as well as index.js and routes.js.
Limitations and undocumented items: the README does not provide specific dependency version numbers, build artifact configuration, a state management approach, backend API integration methods or production deployment steps. The quick start section only states that the product can be purchased from Creative Tim and requires installing Node.js LTS and then running yarn install or npm install in the root directory; complete installation and run commands, environment variable configuration and similar details are not given in the README. For browser support, the official target is the last two versions of Chrome, Firefox, Edge, Safari and Opera.
ReactBackend
Is it right for your project?
Use Cases
- Building backend admin dashboard interfaces
- Creating admin pages with charts and data tables
- Producing authentication pages such as sign-in and sign-up
- Developing interfaces that require RTL layouts
- Serving as a reference implementation for combining React and Chakra UI components
Suitable For
- Front-end developers using React and Chakra UI
- Projects that need a backend admin template to get started
- Teams looking to reference a component-based dashboard structure
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The README requires downloading and installing the LTS version from the Node.js website
- 2
Run yarn install or npm install in the root directory to install local dependencies
- 3
The README quick start only states that the product can be purchased from Creative Tim and does not provide complete start and build commands
- 4
Full documentation is hosted at demos.creative-tim.com/docs-argon-dashboard-chakra
- 5
Browser support targets the last two versions of Chrome, Firefox, Edge, Safari and Opera
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments or AI may incur separate charges.
- The README quick start only provides a link to purchase the product from Creative Tim and does not give an entry point for obtaining it for free or directly downloading the source code.
- The resources section lists a purchase page pointing to the paid Pro version; Pro features are not part of the free version.
- The README points to the Creative Tim license agreement page; its terms must be checked before use.
- The license section again links to the Creative Tim license agreement, and copyright belongs to Creative Tim.
- The copyright notice is 2022 Creative Tim, and the corresponding copyright attribution must retain.
- The project uses multiple third-party open-source resources, and their respective licenses must be followed separately.
- It depends on the Chakra UI open-source framework, and its license must be followed for use.
- It depends on the ApexCharts.js open-source chart library, and its license must be followed for use.
- It depends on the Quill Editor (react-quill) text editor, and its license must be followed for use.
- It depends on the React Table table hooks library, and its license must be followed for use.
- It depends on the ReactJS library, and its license must be followed for use.
- Before running, download and install the LTS version from the Node.js website.
- Run yarn install or npm install in the root directory to install local dependencies.
- Officially, only the last two versions of Chrome, Firefox, Edge, Safari and Opera are supported.
- Integration questions must be directed through the Creative Tim contact page rather than by submitting a GitHub issue.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
- Buy from [Creative Tim](https://www.creative-tim.com/product/argon-dashboard-chakra?ref=readme-argonchakra).
Original README
- [Buy Page](https://www.creative-tim.com/product/argon-dashboard-chakra-pro?ref=readme-argonchakra)
Original README
- License Agreement: <https://www.creative-tim.com/license?ref=readme-argonchakra>
Original README
- Creative Tim [License](https://www.creative-tim.com/license?ref=readme-argonchakra)
Original README
- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-argonchakra)
Original README
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
Original README
- [Chakra UI](https://chakra-ui.com/?ref=creative-tim) - Modern Open source framework
Original README
- [ApexCharts.js](https://apexcharts.com?ref=creative-tim) - Modern & Interactive Open-source charts
Original README
- [Quill Editor](https://www.npmjs.com/package/react-quill?ref=creative-tim) - ReactJS Text Editor provided by Quill
Original README
- [React Table](https://react-table.tanstack.com/docs/overview?ref=creative-tim) - Collection of hooks for building powerful ReactJD tables
Original README
- [ReactJS](https://reactjs.org?ref=creative-tim) - A popular JavaScript library for building user interfaces
Original README
1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
Original README
2. Navigate to the root / directory and run yarn install/npm install to install our local dependencies.
Original README
At present, we officially aim to support the last two versions of the following browsers:
Original README
https://github.com/Pinto-PINTO/React-Argon-Dashboard-Template/blob/master/LICENSEhttps://github.com/Pinto-PINTO/React-Argon-Dashboard-Template/blob/master/README.mdIf you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-argonchakra) instead of opening an issue.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 65 / 100
- Technologies
- React
- Website type
- Admin dashboard
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2022-05-09
- Screenshot last checked
- 2026-10-16
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 986b5e3263a84caa4ad7ca5dd3b04836740711a0b1abb3ee855abbcf86bb9d58
2026-10-13T10:24:43.434Z
Source file / repository# [Argon Dashboard Chakra](https://demos.creative-tim.com/argon-dashboard-chakra) [](10)
 [](https://github.com/creativetimofficial/argon-dashboard-chakra/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/argon-dashboard-chakra/issues?q=is%3Aissue+is%3Aclosed)
Most trendiest, complex and innovative Free Chakra UI Dashboard Made by [Simmmple](https://simmmple.com?ref=readme-argonchakra) & [Creative Tim](https://creative-tim.com/?ref=readme-argonchakra). Check our latest Free Chakra UI Dashboard.
Start your Development with an Innovative Admin Template for Chakra UI and React. If you like the look & feel of the hottest design trend right now, Argon Dashboard Chakra, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.
**Fully Coded Elements**
Argon Dashboard Chakra is built with over 70+ frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using JSS files and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Premium Chakra UI Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.
Check all components <a href="https://demos.creative-tim.com/docs-argon-dashboard-chakra?ref=readme-argonchakra" target="_blank">here</a>.
**Documentation built by Developers**
Each element is well presented in a very complex documentation.
You can read more about the <a href="https://demos.creative-tim.com/docs-argon-dashboard-chakra?ref=readme-argonchakra" target="_blank">documentation here</a>.
**Example Pages**
If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. Every page is spaced well, with attractive layouts and pleasing shapes. From specially designed dashboards for smart homes, virtual reality, and automotives to CRM admins, Argon Dashboard Chakra UI has everything you need to quickly set up an amazing project.
View <a href="https://demos.creative-tim.com/argon-dashboard-chakra?ref=readme-argonchakra" target="_blank">example pages here</a>.
**HELPFUL LINKS**
- View <a href="https://github.com/creativetimofficial/argon-dashboard-chakra" target="_blank">Github Repository</a>
- Check <a href="https://www.creative-tim.com/knowledge-center?ref=readme-argonchakra" target="_blank">FAQ Page</a>
#### Special thanks
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- [Chakra UI](https://chakra-ui.com/?ref=creative-tim) - Modern Open source framework
- [ApexCharts.js](https://apexcharts.com?ref=creative-tim) - Modern & Interactive Open-source charts
- [Quill Editor](https://www.npmjs.com/package/react-quill?ref=creative-tim) - ReactJS Text Editor provided by Quill
- [React Table](https://react-table.tanstack.com/docs/overview?ref=creative-tim) - Collection of hooks for building powerful ReactJD tables
- [ReactJS](https://reactjs.org?ref=creative-tim) - A popular JavaScript library for building user interfaces
Let us know your thoughts below. And good luck with development!
## Table of Contents
- [Argon Dashboard Chakra] (https://demos.creative-tim.com/argon-dashboard-chakra/?ref=readme-argonchakra)
- [Table of Contents](#table-of-contents)
- [Versions](#versions)
- [Demo](#demo)
- [Quick start](#quick-start)
- [Documentation](#documentation)
- [File Structure](#file-structure)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [Reporting Issues](#reporting-issues)
- [Licensing](#licensing)
- [Useful Links](#useful-links)
- [Social Media](#social-media)
## Versions
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-chakra-react?ref=readme-argonchakra)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-chakra?ref=readme-argonchakra)
| Bootstrap | Chakra |
| --- | --- |
| [](https://www.creative-tim.com/product/argon-dashboard?ref=readme-argonchakra) | [](https://www.creative-tim.com/product/argon-dashboard-chakra?ref=readme-argonchakra)
## Demo
[View all Pages](https://demos.creative-tim.com/argon-dashboard-chakra?ref=readme-argonchakra).
# Quick start
Quick start options:
- Buy from [Creative Tim](https://www.creative-tim.com/product/argon-dashboard-chakra?ref=readme-argonchakra).
## Terminal Commands
1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
2. Navigate to the root / directory and run yarn install/npm install to install our local dependencies.
## Documentation
The documentation for the Argon Dashboard Chakra is hosted at our [website](https://demos.creative-tim.com/docs-argon-dashboard-chakra?ref=readme-argonchakra).
## File Structure
Within the download you'll find the following directories and files:
```
argon-dashboard-chakra/
├── .gitattributes
├── .gitigonore
├── CHANGELOG.md
├── commit.sh
├── gulpfile.js
├── ISSUE_TEMPLATE.md
├── jsconfig.json
├── package.json
├── README.md
├── public
│ ├── favicon.png
│ ├── index.html
│ ├── apple-icon.png
│ ├── robots.txt
│ └── manifest.json
└── src
├── assets
│ ├── img
│ └── svg
├── components
│ ├── Card
│ │ ├── Card.js
│ │ ├── CardBody.js
│ │ └── CardHeader.js
│ ├── Charts
│ │ ├── BarChart.js
│ │ └── LineChart.js
│ ├── Configurator
│ │ └── Configurator.js
│ ├── FixedPlugin
│ │ └── FixedPlugin.js
│ ├── Footer
│ │ └── Footer.js
│ ├── Icons
│ │ ├── IconBox.js
│ │ └── Icons.js
│ ├── Layout
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── Menu
│ │ └── ItemContent.js
│ ├── Navbars
│ │ ├── Searchbar
│ │ │ └── SearchBar.js
│ │ ├── AdminNavbar.js
│ │ ├── AdminNavbarLinks.js
│ │ └── AuthNavbar.js
│ ├── RTLProvider
│ │ └── RTLProvider.js
│ ├── Separator
│ │ └── Separator.js
│ ├── Sidebar
│ │ ├── Sidebar.js
│ │ └── SidebarHelp.js
│ └── Tables
│ ├── BillingRow.js
│ ├── DashboardTableRow.js
│ ├── InvoicesRow.js
│ ├── TablesProjectRow.js
│ ├── TablesTableRow.js
│ ├── TimelineRow.js
│ └── TransactionRow.js
├── layouts
│ ├── Admin.js
│ ├── Auth.js
│ └── RTL.js
├── theme
│ ├── additions
│ │ ├── card
│ │ │ └── Card.js
│ │ ├── layout
│ │ │ ├── MainPanel.js
│ │ │ ├── PanelContainer.js
│ │ │ └── PanelContent.js
│ ├── components
│ │ ├── badge.js
│ │ ├── button.js
│ │ ├── input.js
│ │ └── link.js
│ ├── foundations
│ │ └── breakpoints.js
│ ├── styles.js
│ └── theme.js
├── variables
│ ├── charts.js
│ └── general.js
├── views
│ ├── Dashboard
│ │ ├── Billing.js
│ │ ├── Dashboard.js
│ │ ├── Profile.js
│ │ └── Tables.js
│ ├── Pages
│ │ ├── SignIn.js
│ │ └── SignUp.js
│ └── RTL
│ └── RTLPage.js
├── index.js
└── routes.js
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">
## Resources
- [Live Preview](https://demos.creative-tim.com/argon-dashboard-chakra?ref=readme-argonchakra)
- [Buy Page](https://www.creative-tim.com/product/argon-dashboard-chakra-pro?ref=readme-argonchakra)
- License Agreement: <https://www.creative-tim.com/license?ref=readme-argonchakra>
- Documentation is [here](https://demos.creative-tim.com/docs-argon-dashboard-chakra?ref=readme-argonchakra)
- [Support](https://www.creative-tim.com/contact-us?ref=readme-argonchakra)
- Issues: [Github Issues Page](https://github.com/creativetimofficial/argon-dashboard-chakra/issues)
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Argon Dashboard Chakra. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the Argon Dashboard Chakra. Check the CHANGELOG from your dashboard on our [CHANGE LOG File](https://github.com/creativetimofficial/argon-dashboard-chakra/blob/main/CHANGELOG.md?ref=readme-argonchakra).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-argonchakra) instead of opening an issue.
## Licensing
- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-argonchakra)
- Creative Tim [License](https://www.creative-tim.com/license?ref=readme-argonchakra)
## Useful Links
- [More products](https://www.creative-tim.com/templates?ref=readme-argonchakra) from Creative Tim
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-argonchakra) from Creative Tim
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-argonchakra) (earn money)
- [More products](https://simmmple.com/?ref=readme-argonchakra) from Simmmple
### Social Media - Creative Tim
Twitter: <https://twitter.com/CreativeTim>
Facebook: <https://www.facebook.com/CreativeTim>
Dribbble: <https://dribbble.com/creativetim>
Instagram: <https://www.instagram.com/CreativeTimOfficial>
### Social Media - Simmmple
Twitter: <https://twitter.com/simmmple_web>
Facebook: <https://www.facebook.com/simmmple.web>
Dribbble: <https://dribbble.com/simmmple>
Instagram: <https://www.instagram.com/simmmple.web>
Explore similar templates
Compare previews and descriptions within the same stack and category.
ant-design-pro
Ant Design Pro is an enterprise-grade React admin scaffold built on React 19, Umi Max 4, and antd 6 with TypeScript.
React · Admin dashboard
coreui-free-react-admin-template
CoreUI's free React admin template, built on React and the CoreUI component library, provides dashboard layouts, sidebar navigation, routing, and example views. It includes .cursorrules, ARCHITECTURE.md, and DEVELOPMENT.md context files, plus JSDoc comments and PropTypes, to support AI-assisted development.
React · Admin dashboard
fastapi-react
A Cookiecutter template for FastAPI + React (TypeScript) full-stack projects, integrating PostgreSQL, SQLAlchemy, Alembic, Celery, Redis, JWT authentication, a react-admin admin panel, and a Docker Compose development environment with Nginx reverse proxy.
React · Admin dashboard
react-antd-admin-template
A React + Ant Design admin template for mid- and back-office products, with built-in login/logout, dynamic routing, permission checks, and user management.
React · Admin dashboard
react-saas-template
A React and Material-UI template for SaaS or admin websites, offering dashboard, chart, blog, payment, and file upload components. It uses Create-React-App, React-Router, Recharts, React-Stripe-js, React-Dropzone, and React-Cropper, with theme colors centralized in src/theme.js.
React · Admin dashboard
react-material-admin
React Material Admin is an MIT-licensed React admin template by Flatlogic, built on Material-UI. It provides dashboards, charts, tables, authentication, profile, and notification pages, with three color themes and responsive layouts.
React · Admin dashboard