Skip to main content

Installation

To use Unix, 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-unix.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 Unix 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
│   │   │   ├── navbars
│   │   │   │   ├── Combo.module.scss
│   │   │   │   ├── DualTopNav.module.scss
│   │   │   │   ├── HorizontalNav.module.scss
│   │   │   │   └── VerticalNav.module.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
│   │   │   ├── NavbarType
│   │   │   │   ├── Combo.jsx
│   │   │   │   ├── DualTopNav.jsx
│   │   │   │   ├── HorizontalNav.jsx
│   │   │   │   └── VerticalNav.jsx
│   │   │   ├── Notification
│   │   │   │   └── Notification.jsx
│   │   │   ├── UserProfile
│   │   │   │   └── UserProfile.jsx
│   │   │   ├── NavBarBgWrapper.jsx
│   │   │   └── Navbars.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
│   │   ├── Tab
│   │   │   └── Tab.jsx
│   │   ├── Timeline
│   │   │   └── Timeline.jsx
│   │   ├── Traffic
│   │   │   └── Traffic.jsx
│   │   ├── UserStats
│   │   │   └── UserStats.jsx
│   │   ├── WeatherStats
│   │   │   └── WeatherStats.jsx
│   ├── context
│   ├── 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
│   │   ├── Tabs.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