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
- yarn
- pnpm
npm install
yarn install
pnpm install
Start Development Server
- npm
- yarn
- pnpm
npm run dev
yarn run dev
pnpm run dev
Build Project
- npm
- yarn
- pnpm
npm run build
yarn run build
pnpm run build
Preview Project
- npm
- yarn
- pnpm
npm run preview
yarn run preview
pnpm 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