Skip to main content

Installation

To use Safee, 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-safee.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 Safee 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
│ │ │ ├── Authentication.module.scss
│ │ │ ├── Card.module.scss
│ │ │ ├── CardContent.module.scss
│ │ │ ├── DarkModeSwitch.module.scss
│ │ │ ├── Grids.module.scsss
│ │ │ ├── Layouts.module.scsss
│ │ │ ├── Message.module.scsss
│ │ │ ├── NavBarBgWrapper.module.scsss
│ │ │ ├── Notification.module.scsss
│ │ │ ├── NotificationStatsCart.module.scsss
│ │ │ ├── OverlayCard.module.scsss
│ │ │ ├── ProfileCard.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
│ │ ├── Card
│ │ │ └── Card.jsx
│ │ ├── DarkModeSwitch
│ │ │ └── DarkModeSwitch.jsx
│ │ ├── DropdownMenu
│ │ │ └── DropdownMenu.jsx
│ │ ├── Earning
│ │ │ └── Earning.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
│ │ ├── 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
│ ├── layouts
│ │ └── Layouts.jsx
│ ├── views
│ │ ├── Alerts.jsx
│ │ ├── Badges.jsx
│ │ ├── Forms.jsx
│ │ ├── Buttons.jsx
│ │ ├── Cards.jsx
│ │ ├── Charts.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Error404.jsx
│ │ ├── Error500.jsx
│ │ ├── Maps.jsx
│ │ ├── Grids.jsx
│ │ ├── Login.jsx
│ │ ├── Modals.jsx
│ │ ├── progressBars.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