Skip to main content

Installation

To use AdminX, you need to have React 18+, Node.js >=18.0, npm, yarn and pnpm installed on your machine. Follow these steps to set up the template:

Clone or download the repository from GitHub​
https://github.com/reactadmins/bootstrap-adminx.git

Install Dependencies​
npm install

Start Development Server​

npm run dev


Build Project​

npm run build


Preview Project​

npm run preview

Open your browser and go to http://localhost:5173/ You should see the AdminX Template on your screen. You can explore the different pages and components, and customize them according to your needs. To build the production version of the template, run npm run build, yarn run build or pnpm run build. This will create a build folder with the optimized files. To serve the production version, run npm run preview, yarn run preview or pnpm run preview and go to http://localhost:4173/ again.


File Structure​

Within the download you'll find the following directories and files:

.
├── public
├── src
│   ├── assets
│   │   ├── fonts
│   │   │   └── Nunito-Bold.otf
│   │   ├── image
│   │   ├── scss
│   │   │   ├── AnalyticsStats.module.scss
│   │   │   ├── Authentication.module.scss
│   │   │   ├── Card.module.scss
│   │   │   ├── CardContent.module.scss
│   │   │   ├── DarkModeSwitch.module.scss
│   │   │   ├── Grids.module.scsss
│   │   │   ├── IconStyle.module.scsss
│   │   │   ├── Layouts.module.scsss
│   │   │   ├── Message.module.scsss
│   │   │   ├── MonthlyStats.module.scsss
│   │   │   ├── NavBarBgWrapper.module.scsss
│   │   │   ├── Notification.module.scsss
│   │   │   ├── NotificationStatsCart.module.scsss
│   │   │   ├── OverlayCard.module.scsss
│   │   │   ├── ProfileCard.module.scsss
│   │   │   ├── SearchBar.module.scsss
│   │   │   ├── Sidebar.module.scsss
│   │   │   ├── SidebarBgWrapper.module.scsss
│   │   │   ├── SocialButton.module.scsss
│   │   │   ├── SocialCounter.module.scss.scsss
│   │   │   ├── SocialStats.module.scsss
│   │   │   ├── Stats.module.scsss
│   │   │   ├── StatsCard.module.scsss
│   │   │   ├── Tables.module.scsss
│   │   │   ├── Timeline.module.scsss
│   │   │   ├── Traffic.module.scsss
│   │   │   ├── Typography.module.scsss
│   │   │   ├── UesrProfile.module.scsss
│   │   │   ├── variable.scsss
│   │   │   ├── WeatherStats.module.scsss
│   │   │   └── WidgetsCard.module.scsss
│   ├── components
│   │   ├── AnalyticsStats
│   │   │   └── AnalyticsStats.jsx
│   │   ├── Card
│   │   │   └── Card.jsx
│   │   ├── Chartjs
│   │   │   ├── BarChart.jsx
│   │   │   ├── DoughnutChart.jsx
│   │   │   ├── LineChart.jsx
│   │   │   ├── PieChart.jsx
│   │   │   ├── PolarAreaChart.jsx
│   │   │   └── RadarChart.jsx
│   │   ├── DarkModeSwitch
│   │   │   └── DarkModeSwitch.jsx
│   │   ├── DeviceVisitorStats
│   │   │   └── DeviceVisitorStats.jsx
│   │   ├── Download
│   │   │   └── Download.jsx
│   │   ├── DropdownMenu
│   │   │   └── DropdownMenu.jsx
│   │   ├── Earning
│   │   │   └── Earning.jsx
│   │   ├── Icon
│   │   │   ├── Brandico.jsx
│   │   │   ├── CopyButton.jsx
│   │   │   ├── Entypo.jsx
│   │   │   ├── FontAwesome.jsx
│   │   │   ├── Fontelico.jsx
│   │   │   └── Iconviewer.jsx
│   │   ├── LeafletMaps
│   │   │   ├── DarkMatter.jsx
│   │   │   ├── StreetMap.jsx
│   │   │   ├── Voyager.jsx
│   │   │   └── WorldImagery.jsx
│   │   ├── MonthlyStats
│   │   │   └── MonthlyStats.jsx
│   │   ├── Navbars
│   │   │   ├── Message
│   │   │   │   └── Message.jsx
│   │   │   ├── Notification
│   │   │   │   └── Notification.jsx
│   │   │   ├── UserProfile
│   │   │   │   └── UserProfile.jsx
│   │   │   ├── NavBarBgWrapper.jsx
│   │   │   └── Navbar.jsx
│   │   ├── NotificationStatsCart
│   │   │   └── NotificationStatsCart.jsx
│   │   ├── OverlayCard
│   │   │   └── OverlayCard.jsx
│   │   ├── ProfileCard
│   │   │   └── ProfileCard.jsx
│   │   ├── RealTime
│   │   │   └── RealTime.jsx
│   │   ├── Recharts
│   │   │   ├── AreaRechart.jsx
│   │   │   ├── BarRechart.jsx
│   │   │   ├── LineRechart.jsx
│   │   │   ├── PieRechart.jsx
│   │   │   ├── RechartRadialBar.jsx
│   │   │   └── RechartScatter.jsx
│   │   ├── Revenue
│   │   │   └── Revenue.jsx
│   │   ├── SearchBar
│   │   │   └── SearchBar.jsx
│   │   ├── Sidebar
│   │   │   ├── Sidebar.jsx
│   │   │   ├── SidebarBgWrapper.jsx
│   │   │   └── SidebarMenu.jsx
│   │   ├── SocialButton
│   │   │   └── SocialButton.jsx
│   │   ├── SocialCounter
│   │   │   └── SocialCounter.jsx
│   │   ├── SocialStats
│   │   │   └── SocialStats.jsx
│   │   ├── Stats
│   │   │   ├── Day.jsx
│   │   │   ├── Month.jsx
│   │   │   ├── Stats.jsx
│   │   │   └── Year.jsx
│   │   ├── StatsCard
│   │   │   └── StatsCard.jsx
│   │   ├── Timeline
│   │   │   └── Timeline.jsx
│   │   ├── Traffic
│   │   │   └── Traffic.jsx
│   │   ├── UserStats
│   │   │   └── UserStats.jsx
│   │   ├── WeatherStats
│   │   │   └── WeatherStats.jsx
│   ├── context
│   │   └── dashboardDataContext.jsx
│   ├── layouts
│   │   └── Layouts.jsx
│   ├── views
│   │   ├── AdvancedForm.jsx
│   │   ├── Alerts.jsx
│   │   ├── ApexCharts.jsx
│   │   ├── Badges.jsx
│   │   ├── BasicForm.jsx
│   │   ├── Buttons.jsx
│   │   ├── Cards.jsx
│   │   ├── Chartjs.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Error404.jsx
│   │   ├── Error500.jsx
│   │   ├── GoogleMaps.jsx
│   │   ├── Grids.jsx
│   │   ├── Icons.jsx
│   │   ├── LeafletMaps.jsx
│   │   ├── Login.jsx
│   │   ├── Modals.jsx
│   │   ├── progressBars.jsx
│   │   ├── Recharts.jsx
│   │   ├── Register.jsx
│   │   ├── SocialButtons.jsx
│   │   ├── Tables.jsx
│   │   ├── Typography.jsx
│   │   ├── Widgets.jsx
│   │   └── WizardForm.jsx
│   ├── App.jsx
│   ├── index.scss
│   ├── main.jsx
│   ├── nav.jsx
│   └── routes.jsx
├── vite.config.js
├── README.md
├── package.json
├── index.html
└── .gitignore