Zynix – React Typescript React-Bootstrap Admin & Dashboard Template,
With these template formats, it's very easy to create a presence and grab someone's
attention around the web page
Because the template is built using React, CSS3, React-Bootstrap framework and with
Sass. So please before you start working with the template take a quick look on the
documentation so that you can easily built your website.
If You Love Our Template Design Please don't forgot to rate
it. Thank you so much! 😊
Thank you for showing interest towards our admin template. Feel free to
contact us any time. We have a dedicated team to provide you the best support. If
you want any queries open support ticket https://support.spruko.com.
Template Description
Zynix is a React Typescript React-Bootstrap Admin Template using modern
and minimal design. It is fully flexible user-friendly and responsive. Zynix Modern
template is powered with React Pages, SASS, & React-Bootstrap which looks great on
Desktops, Tablets, and Mobile Devices. This Template Includes 180+ React Pages . No
Need to do hard work for this template customization. We already designed it and you
can easily design your website just how you like it.
This template using React-Bootstrap framework. After Purchased this template you
will get All tsx files,CSS and Scss.
It has super clean flat user interface admin design, easy customizable components and
widgets.The Template comes with a awesome unique design also we ensure you can
easily design template.
It is a fully responsive layout for all type of devices. Works on all major web
browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Zynix React Typescript React-Bootstrap
Admin Template, you will be able to get free download of all future updates
This comprehensive guide provides step-by-step instructions on
how to set up your development environment React tool. It covers everything
from the necessary prerequisites to installing the tool, creating an initial
workspace, and setting up a starter app. You'll also learn how to run the
app locally to test and verify your setup. By following this guide, you can
ensure that your development environment is properly configured for React,
and you can get started with your project confidently and efficiently.
Whether you're a beginner or an experienced developer, this guide is an
essential resource for anyone looking to work with React.
To get started with a React application, there are three prerequisites that
you need to have in place.
Prerequisites
To use the React Typescript Framework, you should be familiar with the
following:
React
React Bootstrap
Typescript
Knowledge of Typescript is helpful.
Zynix - File Generate
Creating a Component
The easiest way to create a component is with the React CLI. You can also create
a
component manually.
Creating a component using the React CLI
To create a component using the React CLI:
From a terminal window, navigate to the directory containing your
application
Run the generate-react-cli component <component-name>
command, where
<component-name> is the name of your new component.
generate-react-cli component <component-name>
By default, this command creates the following:
A folder named after the component
A component file, <component-name>.component
A template file, <component-name>.component.tsx
A CSS file, <component-name>.component.css
A testing specification file,
<component-name>.component.spec.ts
Where <component-name> is the name of your component.
Installation Process
Zynix React Setup
How to Run the Zynix Template:
Step 1:
Download the project, extract it, and navigate to the final template folder named Zynix React Typescript Final. Open the template to proceed.
Step 2:
Open your terminal or command prompt and run the following command to install the packages:
npm install
Step 2:
After the installation, run the project using the following command:
npm run dev
Once you serve your application by default it will take their
default port using http://localhost:5173/
How to Convert SCSS to CSS:
If you need to change any styles, modify the SCSS files. To convert SCSS to CSS, run the following command:
npm run sass
Staterkit:
StarterKit is a foundational template or boilerplate that provides the basic
structure and essential components needed to build a web application from
scratch. It’s designed to save time by offering pre-configured setups,
allowing developers to focus on building features rather than setting up the
initial project structure.
Folder Structure: Organized directories for components, pages,
assets, styles,
and utilities.
Basic Pages: Such as a dashboard, login/authentication page, and
error pages.
Reusable Components:dashboards, pages, apps, uitilities, ui-elements, advanced-ui, tables, maps, charts, forms ready to be customized.
Styling Setup: CSS, SCSS for quick UI
development.
How to Run the Staterkit:
Step 1:
Navigate to the staterkit folder named Staterkit. Open the
template to proceed.
Step 2:
Open your terminal or command prompt and run the following command to install
the packages:
npm install
(or)
yarn install
Step 2:
After the installation, run the project using the following command:
npm run dev
(or)
yarn run dev
Once you serve your application by default it will take their default port using http://localhost:5173/
How to Convert SCSS to CSS:
If you need to change any styles, modify the SCSS files. To convert SCSS to CSS,
run the following command:
In general, the npm i command is used to install all dependencies or devDependencies from a package.
However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument
can be used to force npm to install those dependencies.
The --force argument overrides any previously installed dependencies and fetches remote resources even
if a local copy exists on disk. It follows a "last-dependency-downloaded-wins" approach, which means that it will
overwrite any previously downloaded dependencies.
Using the --force argument can be helpful when you need to install a specific dependency that is causing
issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other
dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using
the --force argument to ensure that everything is working as expected.
npm install --force
When installing packages using npm, if there are peer dependency issues, npm will always skip the
installation of peer dependencies, even if there are no issues. Peer dependencies are a specific type of dependency
that a package requires to function properly, but which are not managed by that package's dependency manager.
Skipping the installation of peer dependencies can sometimes lead to issues with the functionality
or compatibility of the package. To ensure that your package functions correctly, it's important to manually install
any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware
of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer
dependencies required by each package and ensure that they are compatible with other packages in your project. By taking
these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.
npm install--legacy-peer-deps
We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file
For Build your Template
Build your application for host on server using below command:
yarn run build
(or)
npm run build
Note:
To deploy your project successfully, ensure that your domain is correctly added to the basePath in vite.config.ts path:\zynix-ts\vite.config.ts
Zynix - React Typescript Admin Dashboard Template /
: Root template folder contain all tsx, scss, images
and other files.
src/ : Root folder containing all source files for the project, including assets, components, and other resources.
assets/ : Folder containing all the static assets for the template, including audio, images, fonts, and styles.
audio/ : Folder containing all the audio files used in the project.
css/ : Folder containing all the CSS files used in the template.
global/ : Global styles applied across the template.
icons.css : CSS file for icon font styles.
icons.css.map : Source map for icon font styles.
styles.css : Main CSS file for the template.
styles.min.css.map : Minified source map for styles.
variables.css : CSS variables file for the template.
icon-fonts/ : Folder containing different icon font libraries.
bootstrap-icons/ : Bootstrap icon set.
boxicons/ : Boxicons icon set.
feather/ : Feather icon set.
line-awesome/ : Line Awesome icon set.
Remixicons/ : Remixicon set.
tabler-icons/ : Tabler icons set.
images/ : Folder containing image assets used in the template.
scss/ : Folder containing SCSS files for different pages and components.
bootstrap/ : SCSS files for Bootstrap components.
custom/ : Custom SCSS files for template-specific styling.
global/ : Global SCSS files for the template.
menu-styles/ : SCSS for menu styling.
pages/ : SCSS files specific to individual pages.
util/ : Utility SCSS files for various helper styles.
_bootstrap.scss : Bootstrap variables and customizations.
_switcher.scss : SCSS for theme switcher functionality.
_variables.scss : SCSS variables used across the template.
icons.scss : SCSS for managing icon fonts.
styles.scss : Main SCSS file compiling all other SCSS files into the final styles.
video/ : Folder containing video files used in the template.
components/ :Common components like header, sidebar, theme switcher, and other reusable UI elements.
container/ : Folder for components of the template.
firebase/ : Folder containing Firebase-related components and services.
pages/ : Folder containing layouts for the template.
index.scss : Main SCSS file for the entry point of the styles.
main.tsx : Main TypeScript file for setting up routing in the React application.
plugin.d.ts : TypeScript declaration file for custom plugins.
vite-env.d.ts : TypeScript environment declarations for Vite-based projects.
StaterKit Guide
Purpose of a starter kit
Introduction to the React Typescript Starter Kit Template:
The React template starterkit is a resource that helps developers
kickstart their React web development projects by providing a
preconfigured and ready-to-use template. It aims to simplify the initial
setup and provide a foundation for building React-based websites or
applications.
Purpose of the React Starter Kit Template:
The purpose of the React Starter Kit Template is to save developers
time and effort by offering a set of prebuilt files and configurations
commonly used in React projects. Instead of starting from scratch,
developers can leverage the starter kit to quickly set up a project
structure that adheres to best practices and industry standards.
Benefits of Using the React Starter Kit Template:
The starter kit eliminates the need to set up the basic project
structure manually. It provides a well-organized file and folder
structure, including commonly used directories for separating code,
templates, assets, and configuration files. This allows developers to
focus more on implementing business logic rather than spending time on
initial setup.
Before using the React Starter Kit Template, developers should have a
basic understanding of React and web development concepts.
Starterkit Overview
You can use the Starterkit if you are creating a new project. It will be
time-consuming to use the full admin version for a new project as
Zynix-React Typescript have more than 150 components.
We have provided all the pre-build layouts like Sidemenu, Header, footer
and blank pages etc in the Starterkit.
For further information or support regarding the template, please
contact us using the provided link.
In React project, it can be easy to add menus to the sidebar by modifying the
MenuItems array in the nav.tsx(\src\components\sidebar\nav.tsx) file. The sidebar will
dynamically display the menus based on the contents of this array. below are the
steps as follows
Steps:
Open nav.tsx File:
Open the nav.tsx (\src\components\sidebar\nav.tsx) file in
React project. This file contains the MenuItems array that defines the menus
to be displayed in the sidebar.
To add the parent Menu Items:
Inside the MenuItems array, you can add your menu items using the following
format:
To add the children to Menu Items:
Inside the MenuItems array, you can add custome nested menu items using the
following format:
menutitle: The display name of the menu.
title: The display name of the component.
selected: Set to true if this menu is currently selected.
icon: The icon to display next to the menu.
type: Specify the type of the menu item (link, sub and empty).
path: Specify the route path for link type menu.
active: Set to true to mark this menu as active.
dirchange: change the direction from right to left .
badgeClass (optional): CSS class for the badge.
badgeValue (optional): Text to display in the badge.
children: Define an array of child menu items for sub-menu type.
Save the Changes:
After adding your menu items, save the changes made to the nav.tsx
(\src\components\sidebar\nav.tsx) file.
View Sidebar Changes:
The sidebar will now automatically display the added menu items based on the
modifications you made in the MenuItems array.
To Remove the Menu Items:
To remove menu items that you don't need, you can simply delete the
corresponding object from the MenuItems array.
By following these steps, you can easily customize and add menus to the sidebar
of your React .tsx project. The menus will be dynamically generated based on the
content of the MenuItems array in the nav.tsx file.
Routing
Routing
In a single-page application, you change what the user sees by showing or hiding
portions of the display that correspond to particular components, rather than going
out to the server to get a new page. As users perform application tasks, they need
to move
between the different views that you have defined.
To handle the navigation from one view to the next, you use the React
Router. The Router enables navigation by interpreting a browser URL
as an instruction to change
the view.
Your complete route structure is place at main.tsx
file under src » main.tsx
Suppose you want to create a new module ( For creating a new module refer create
new module )
then you have to add new routes for that modules.
Basic Route
Following are the fundamental building blocks to creating a route.
Import the main.tsx into App.tsx and add it
to the imports array.
import React, { Fragment, lazy } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
//component import
import App from './pages/App.tsx';
import Crm from './container/dashboards/crm/crm.tsx';
import Ecommerce from './container/dashboards/ecommerce/ecommerce.tsx';
import Crypto from './container/dashboards/crypto/crypto.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.Fragment>
<BrowserRouter>
<React.Suspense>
<Routes>
<Route path={`${import.meta.env.BASE_URL}/`} element={<App />}>
<Route index element={<Sales />} />
<Route path={`${import.meta.env.BASE_URL}dashboards/sales`} element={<Sales />}/>
<Route path={`${import.meta.env.BASE_URL}dashboards/analytics`} element={<Analytics />}/>
<Route path={`${import.meta.env.BASE_URL}dashboards/ecommerce`} element={<Ecommerce />}/>
</Route>
</Routes>
</React.Suspense>
</BrowserRouter>
</Fragment>
)
Configure Link in Menu
To Add new link in Sidemenu
Following are the fundamental building blocks to creating a
new link.
This documentation outlines the process of converting SCSS (Sassy CSS) files to
standard CSS (Cascading Style Sheets) in a project's assets directory using the
SASS package. SCSS is a preprocessor for CSS, and SASS is a popular choice for
transforming SCSS into CSS efficiently. This guide provides step-by-step
instructions on installing the SASS package, configuring it in your project, and
converting SCSS files to CSS.
Prerequisites
Before proceeding, ensure that you have the following prerequisites:
A project directory with SCSS files that you want to compile into
CSS.
Installation :
Install the SASS package using npm (Node Package Manager) by running the
following command:
npm install sass
This command will download and install the SASS package and its
dependencies into your project.
Configuration :
To configure SASS for your project, follow these steps:
1. Open your project's package.json file. If you
don't have one, you can create it by running npm init and following
the prompts.
2. Inside the package.json file, locate the
"scripts" section. If it doesn't exist, create one:
"scripts": {
// ...existing scripts...
}
3. Add a script that specifies the compilation process from
SCSS to CSS. You can name the script as you prefer, but for this
example, we'll name it "sass." The script should look like this:
In the script above, replace ./public/assets/scss with
the path to your SCSS files and ./public/assets/css
with the destination directory for your compiled CSS files.
4. Add a script that specifies the compilation compressed
process from SCSS to CSS. You can name the script as you prefer, but
for this example, we'll name it "sass-min." The script should look
like this:
In the script above, replace ./public/assets/scss with
the path to your SCSS files and ./public/assets/css
with the destination directory for your compiled CSS files.
5. Save the package.json file.
Compiling SCSS to CSS :
With the SASS package and script configured, you can now compile your SCSS
files to CSS with the following steps:
1. Open your terminal or command prompt.
2. Navigate to your project's root directory if you're not
already there.
3. Execute the following command to run the "sass" script:
npm run sass
This command will initiate the SCSS to CSS compilation process using
the SASS package.
4. Execute the following command to run the "sass-min"
script:
npm run sass-min
This command will initiate the SCSS to CSS compilation compressed
process using the SASS package.
5. Once the process is complete, the compiled CSS files will
be generated in the specified destination directory (e.g.,
./public/assets/css).
Conclusion :
You have successfully configured and used the SASS package to convert SCSS
files to CSS in your project. This allows you to take advantage of SCSS's
powerful features while ensuring that your web application uses standard CSS
for styling.
Firebase Authentication Guide
Firebase SetUp
Step-1: Now run below commands inside our react project to install firebase
latest.
step-2: Add firebase API configuration details(create database
on
firebase) to the firebase Auth Component refer the path
(/shared/firebase/firebaseapi.tsx)
Firebase Revocation process
step-1: Remove your whole firebase folder from the template the path as follow root:src/firebase
Go To style.scss
(public/assets/scss/styles.scss )
if you want to change another font-family Go to the site Google Fonts And
Select One
font Family and import in to styles.scss file
How to Select font Family
Example:
Step 2:
And paste Your Selected font-family in style.scss
Example:
Step 3:
And add the Your Selected font-family in
_variables.scss(src/assets/scss/_variables.scss)
Example:
--default-font-family: "Montserrat", sans-serif;
By default menu icons are in the from
remix icon if you want to change the icons please follow
below steps
Step 1 :
To change Menu icons, open nav.tsx page
Path: D:\src\components\sidebar\nav.tsx
and go through app-sidebar section, in that section
you will find
icontag, there you can replace previous icon
with your icon. Example as shown in below
Go To "public/assets/images/brand-logos"
folder and replace
your
logo with Previous Logos within in image size.
note: Please don't increase logo sizes. Replace your logo
within
given
image size. otherwise the logo will not fit in particular
place it
disturbs the template design.
To change Layout Theme
open reducer.tsxpath:(d:\src\components\services\switcherServices.ts).
Theme Array Documentation
The theme array provided below is designed to control the
layout and styling of a web application. By modifying
the values in this array, you can change the visual
appearance and behavior of various components in the
application. The array includes settings related to
color schemes, layout styles, header and menu styles,
and more.
Initial State
The initial state of the theme array defines the default
values for different aspects of the application's
appearance and behavior. These values are used as a
starting point and can be dynamically modified using the
provided functions.
let initialState = {
lang: "en", // Default language
dir: "ltr", // Default text direction (ltr or rtl)
dataThemeMode: "light", // Default color scheme (light or dark)
dataMenuStyles: "light", // Default menu style (dark, light, color, gradient, transparent)
dataNavLayout: "vertical", // Default navigation layout (vertical or horizontal)
dataHeaderStyles: "transparent", // Default header style (light, dark, color, gradient, transparent)
dataVerticalStyle: "overlay", // Default vertical menu style (overlay, icon-text, detached, doublemenu)
toggled: "", // Default menu toggle state (open or closed)
dataNavStyle: "", // Default navigation style (menu-click, menu-hover, icon-click, icon-hover)
dataPageStyle: "regular", // Default page style (regular or classic)
dataWidth: "default", // Default page width (fullwidth or boxed)
dataMenuPosition: "fixed", // Default menu position (fixed or scrollable)
dataHeaderPosition: "fixed",// Default header position (fixed or scrollable)
loader:"disable", / Default loader (enable or disable)
iconOverlay: "", // Default icon overlay state (empty)
colorPrimaryRgb: "", // Default primary color (RGB format)
colorPrimary: "", // Default primary color (space-separated RGB values)
bodyBg1: "", // Default body background color1 (empty)
bodyBg2: "", // Default body background color2 (empty)
Light: "", // Default body background color (empty)
Formcontrol: "", // Default body background color (empty)
inputBorder: "", // Default dark inputBorder color (empty)
Graycolor: "", // Default dark background color (empty)
bgImg: "", // Default background image (empty)
iconText: "", // Default icon text style (empty)
body: {
class: "" // Default body class (empty)
}
};
Theme Modification Functions
to Change the Modification Functions open
switcherdata.tsxpath:(shared\data\switcherdata\switcherdata.tsx).
The provided functions allow you to modify specific
aspects of the theme array, enabling real-time
customization of the application's appearance. Below are
some of the key functions that can be used to change
various theme properties:
handleThemeDark: Switches the
theme to a dark color scheme. Updates class, header
style, and menu style accordingly.
handleThemeLight: Switches the
theme to a light color scheme. Adjusts header and
menu styles based on the navigation layout.
directionLtr: Sets the text
direction to left-to-right.
directionRtl: Sets the text
direction to right-to-left.
handleNavigationHorizontal:
Changes the navigation layout to horizontal and
adapts menu and vertical style based on the color
scheme.
handleNavigationVertical: Sets the
navigation layout to vertical, adjusts menu and
vertical style, and closes the menu if open.
menuClick: Sets the
navigation style to "menu-click," hides vertical
style, and changes the toggle state.
menuHover: Sets the
navigation style to "menu-hover," hides vertical
style, and changes the toggle state.
iconClick: Sets the
navigation style to "icon-click," hides vertical
style, and changes the toggle state.
iconHover: Sets the
navigation style to "icon-hover," hides vertical
style, and changes the toggle state.
Regular: Sets the page
style to regular and removes the classic and Modern
page style.
Classic: Sets the page
style to classic and removes the regular and Modern
page style.
Modern: Sets the page
style to modern and removes the classic and regular
page style.
fullWidth: Sets the
page width to full width and removes the boxed and
Compact
width.
Boxed: Sets the page
width to boxed and removes the full width and
Compact.
Compact: Sets the page
width to compact and removes the full width and
Boxed.
FixedMenu: Sets the
menu position to fixed and removes the scrollable
menu position.
ScrollMenu: Sets the
menu position to scrollable and removes the fixed
menu position.
HeaderMenuFixed:
Sets the header position to fixed and removes the
scrollable header position.
HeaderMenuScroll:
Sets the header position to scrollable and removes
the fixed header position.
DefaultMenu: Sets the
vertical menu style to default, closes the menu, and
adjusts the navigation layout.
ClosedMenu: Sets the
vertical menu style to closed, adjusts the
navigation layout, and changes the toggle state.
IconText: Sets the
vertical menu style to icon-text, adjusts the
navigation layout, and changes the toggle state.
iconOverlayFn: Sets the
vertical menu style to overlay with icons, adjusts
the navigation layout, and changes the toggle state.
DetachedFn: Sets the
vertical menu style to detached, adjusts the
navigation layout, and changes the toggle state.
DoubletFn: Sets the
vertical menu style to double menu, adjusts the
navigation layout, and changes the toggle state.
ColorMenu: Changes the
menu style to color.
LightMenu: Changes the
menu style to light.
DarkMenu: Changes the
menu style to dark.
GradientMenu: Changes
the menu style to gradient.
TransparentMenu:
Changes the menu style to transparent.
LightHeader: Changes
the header style to light.
DarkHeader: Changes the
header style to dark.
ColorHeader: Changes
the header style to color.
GradientHeader: Changes
the header style to gradient.
TransparentHeader :
Changes the header style to transparent.
PrimaryColor1 to
PrimaryColor5: Changes
the primary color of the theme.
backgroundColor1 to
backgroundColor5:
Changes the background color of the theme.
ThemePrimaryColor:
Provides a color picker interface to dynamically
change the primary color of the theme.
ThemeBackgroundColor:
Provides a color picker interface to dynamically
change the background color of the theme.
bgImage1 to
bgImage5: Changes the
background image of the theme.
Reset: Resets the theme
to its initial state, clearing all customization.
Disabling Switcher
Step1:
Open header.tsx component
\src\components\header\header.tsx
To remove switcher section as shown below and also switcher component.
Remove the switcher component from the
main layout follow the path
Path: \zynix-ts\src\pages\App.tsx
import Switcher from "../components/switcher/switcher"
<Switcher />
Step3:
Now remove the switcher component and switcherData file
from the root folder, follow the path
Switcher component \src\components\switcher\switcher.tsx
and
switcherdata file from \src\components\common\data\switcherdata\switcherdata.tsx
Step1:
Open authenticationlayout.tsx component
\src\pages\authenticationlayout.tsx
To remove switcher section as shown below.
import Switcher from '../components/switcher/switcher';
<Switcher />
Step2:
Remove theLandingSwitcher component from the
main layout follow the path
\src\pages\landinglayout.tsx
import Landingswitcher from '../components/switcher/landing-switcher';
<Landingswitcher />
Step3:
Now remove the landingswitcher component from the root
folder, follow the path
\src\components\switcher\landing-switcher.tsx
and
React Swiper is a modern, feature-packed carousel
component
for React, offering smooth transitions, touch support, and advanced features
like
autoplay and lazy loading. It’s a flexible, performance-driven alternative
to
traditional carousels like Bootstrap.
React-ApexCharts is a React wrapper for the popular
ApexCharts library, enabling the easy creation of interactive, responsive
charts. It
offers a wide range of chart types and customization options with seamless
React
integration.
1. You need to add these files to make react-apexchart work.
React SunEditor is a lightweight, customizable
WYSIWYG (What
You See Is What You Get) editor for React, providing rich text editing
features. It
supports various formats, plugins, and is highly extensible for smooth
integration
into React applications.
1. You need to add these files to make basic react-suneditor
work.
React Flatpickr is a React wrapper for the Flatpickr
date
picker library, offering a lightweight and customizable solution for
selecting dates
and times. It provides smooth integration, supports various date formats,
and
includes features like range selection, time picking, and more.
1. You need to add these files to make basic react-flatpicker
work.
React Select is a flexible, customizable
dropdown/select
input component for React, offering features like multi-select, search, and
async
options. It provides an intuitive, user-friendly interface with advanced
styling and
accessibility support.
1. You need to add these files to make basic react-select work.
React Grid.js is a React wrapper for the Grid.js
table
library, enabling the creation of interactive, customizable, and responsive
data
tables. It supports features like sorting, filtering, pagination, and inline
editing, with a focus on performance and easy integration into React
projects.
1. You need to add below files to make basic gridjs table work.
React Toastify is a lightweight and easy-to-use
notification
library for React that allows you to display customizable, non-blocking
toast
messages. It supports various notification types, automatic dismissal, and
seamless
integration, enhancing the user experience with minimal setup.
1. You need to add these files to make react toastify work.
React Material-UI Ratings is a component that
integrates
Material-UI's design system to create customizable, interactive rating
systems in
React applications. It allows users to easily select a rating through stars
or other
symbols, with built-in support for customization, accessibility, and
styling.
1. You need to add these files to make react rating work.
React Bootstrap Alerts are pre-styled, customizable
alert
components that integrate Bootstrap's alert system with React. They provide
an easy
way to display important messages or notifications, with built-in support
for
different styles (success, error, info, etc.), dismissible functionality,
and
seamless React integration.
1. You need to add these files to make alerts work.
React Bootstrap Buttons are pre-styled, responsive
button
components that follow Bootstrap’s design system, offering various styles,
sizes,
and colors. They provide an easy-to-use and customizable solution for
creating
interactive buttons in React applications, with support for icons, loading
states,
and more.
1. You need to add these files to make buttons work.
React Bootstrap Badges are small, customizable
components
used to display labels, notifications, or counters within your React
application.
They integrate seamlessly with Bootstrap’s design system and support various
styles,
colors, and positions, making them ideal for highlighting important
information or
adding context to UI elements like buttons, links, or navigation items.
1. You need to add these files to make badges work.
React Bootstrap Button Group is a component that
allows you
to group multiple buttons together, providing a clean, unified look and
facilitating
interactions like toggling or switching between options. It integrates
seamlessly
with Bootstrap's button styles and offers customization options for size,
alignment,
and behavior within React applications.
1. You need to add these files to make button group work.
React Bootstrap Cards are versatile, customizable
components
for displaying content in a flexible, structured layout. They integrate
Bootstrap’s
card system with React, allowing you to create various types of content
containers
with options for images, headers, footers, and more, making them ideal for
building
rich, responsive UI elements.
1. You need to add these files to make cards work.
React Bootstrap Breadcrumb is a navigation component
that
displays a series of links to help users understand their location within a
hierarchical structure. It seamlessly integrates with Bootstrap’s breadcrumb
styling, offering customizable options for separators, active links, and
responsive
behavior in React applications.
1. You need to add these files to make breadcrumb work.
React Bootstrap Dropdown is a component that provides
a
simple way to create dropdown menus in React applications, following
Bootstrap's
design conventions. It supports various options like single or multi-level
menus,
alignment, and customization of triggers (e.g., buttons or links), making it
easy to
build responsive, interactive dropdowns with minimal effort.
1. You need to add these files to make dropdown work.
React Bootstrap Tooltips are small, customizable
pop-up
elements that provide additional information when users hover over or focus
on an
element. Built on Bootstrap’s tooltip system, they offer easy integration in
React
applications, supporting various customization options like positioning,
trigger
events, and animations for a better user experience.
1. You need to add these files to make tooltipss work.
React Bootstrap Popovers are interactive components
that
display additional content or information when users click or hover over an
element.
Built on Bootstrap’s popover system, they offer easy integration in React
applications, with support for customizable content, placement, and
triggers,
allowing you to enhance the user interface with rich, contextual overlays.
1. You need to add these files to make yaireo/dragsort work.
React Bootstrap Progress is a component that allows
you to
display progress bars in React applications, indicating the completion
status of
tasks or operations. It integrates seamlessly with Bootstrap’s progress bar
styles,
supporting features like custom labels, striped animations, and varying bar
colors
for easy customization and responsiveness.
1. You need to add these files to make Progress work.
React Bootstrap ListGroup is a component for creating
lists
of items with consistent styling and behavior, using Bootstrap's list group
system.
It supports features like custom item content, active states, badges, and
links,
making it easy to build interactive and organized lists in React
applications with
full customization options.
1. You need to add these files to make List Group work.
React Bootstrap Toast is a component for displaying
lightweight, non-blocking notifications or messages in React applications.
It
integrates with Bootstrap’s toast system, offering features like
auto-dismiss,
customizable timing, and different styling options for success, error, or
info
messages, making it easy to provide feedback to users in a clean and
responsive way.
1. You need to add these files to make toast work.
React Bootstrap Accordion is a component that allows
you to
display collapsible content panels in a stack, ideal for organizing large
amounts of
content in a compact, interactive layout. It integrates with Bootstrap’s
accordion
system, supporting features like multiple or single panel expansion, custom
styling,
and smooth animations, making it easy to create dynamic, space-efficient UIs
in
React applications.
1. You need to add these files to make accordions work.
React Bootstrap Carousel is a component for creating
responsive, interactive image sliders or carousels in React applications. It
integrates seamlessly with Bootstrap’s carousel system, offering features
like slide
transitions, controls, indicators, and automatic cycling, allowing you to
display a
series of content in an engaging and user-friendly way.
1. You need to add these files to make carousel work.
Note-1: After making the change, run the
npm run sass command.
.
Please follow the below steps to change Dark body
Color
Step 1 :
Make sure the theme is set completely to dark mode by adding the
following attributes to the html tag
data-theme-mode="dark" data-header-styles="dark"
data-menu-styles="dark"
Step 2 :
To change Dark body Color you have to open
_variables.scss file and replace what color you want as shown
in below
