Mamix – NextJs App-Router Typescript Tailwind Css 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 Nextjs, Typescript, CSS, Tailwind
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
Mamix is a NextJs App-Router Typescript Tailwind Css Admin & Dashboard Template
using modern
and minimal design. It is fully flexible user-friendly and responsive. Mamix Modern
template is powered with Nextjs,Typescript, SASS, & Tailwind Css which looks
great on Desktops, Tablets, and Mobile Devices. This Template Includes 240+ NextJs
Components. . 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 Nextjs CSS, Scss and TS Files.
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 Mamix NextJs App-Router Typescript Tailwind Css Admin
& Dashboard 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 Nextjs 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 Nextjs,
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 Nextjs.
To get started with a Nextjs application, there are three prerequisites that
you need to have in place.
Prerequisites
To use the NextJs Typescript Framework, you should be familiar with the
following:
NextJs
Tailwindcss
Typescript
Knowledge of Typescript is helpful.
Mamix - 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
How to Run the Mamix Template:
Step 1:
Download the project, extract it, and navigate to the final template folder
named Mamix-Nextjs-Tailwind App Router TS 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
(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:3000/
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 postcss
(or)
yarn 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:3000/
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:
Each folder within the /app directory corresponds to a route. For
example:
/app/(components)/(contentlayout)/advanced-ui/accordions&collapse/page.tsx
corresponds to the /accordions&collapse route.
Nested Routes
To create nested routes, simply nest folders. For example:
/app/(components)/(contentlayout)/advanced-ui/accordions&collapse/page.tsx
corresponds to the /accordions&collapse route under the
contentlayout grouping.
Layouts:
layout.tsx in the /app directory defines a global layout.
You can create nested layouts by adding a layout.tsx file in
subdirectories.
Grouping:
Parentheses around a folder name indicate a grouping and do
not affect the route structure but help in organizing
related routes.
StaterKit Guide
Purpose of a starter kit
Introduction to the NextJS Typescript Starter Kit Template:
The NextJS template starterkit is a resource that helps developers
kickstart their NextJS 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 NextJS-based websites or
applications.
Purpose of the NextJS Starter Kit Template:
The purpose of the NextJS Starter Kit Template is to save developers
time and effort by offering a set of prebuilt files and configurations
commonly used in NextJS 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 NextJS 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 NextJS Starter Kit Template, developers should have a
basic understanding of NextJS 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
Mamix - NextJs App-Router Typescript Tailwind Css Admin have more than
240 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 Next.js project, it can be easy to add menus to the sidebar by modifying the
MenuItems array in the nav.tsx(shared\layout-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 (shared\layout-components\sidebar\nav.tsx) file in
Next.js
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
(shared\layout-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 Next.js project. The menus will be dynamically generated based on the
content of the MenuItems array in the nav.tsx file.
Routing
Routing
Next.js, a popular React framework, employs a simple and intuitive routing
system that is based on the file structure of your project.
This approach, known as file-based routing, offers developers a straightforward
way to define routes and organize their application logic.
Note:
In a Next.js project, the app directory serves as the cornerstone of routing.
Each file within this directory represents a unique route in the application.
For example:
app/page.tsx corresponds to the root route (/), while app/dashboards/crm corresponds to /crm.
Next.js routing, based on the file system, offers a streamlined and
developer-friendly approach to defining routes in web applications. By
leveraging the inherent structure of the project directory, Next.js
simplifies route management while empowering developers to create dynamic,
nested routes.
Basic Route
Following are the fundamental building blocks to creating a route.
import React, { Fragment } from "react";
import Link from 'next/link';
import { useRouter } from "next/navigation";
<ul>
<li>
<Link href="/dashboards/sales">Sles
</Link>
</li>
<li>
<Link href="/dashboards/analytics">Analytics
</Link>
</li>
<li>
<Link href="/blog/hello-world">Blog Post
</Link>
</li>
</ul>
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 postcss
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 postcss
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 nextjs 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
To remove firebase from the project make sure that you have to remove the
firebase tab from the (app\page.tsx).
change the key variable to 'next.js' Example : const [key, setKey] =
useState('next.js') in the the (app\page.tsx).
Firebase installation process
Switcher Theme styles
You can change the Theme Styles
by adding the attribute to the html tag in (layout.tsx)(Root:D:app\(components)\layout.tsx)
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(public/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.js page
Path: shared\layout-components\sidebar\nav.js
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.jspath:(shared\redux\reducer.js).
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.jspath:(shared\data\switcherdata\switcherdata.js).
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:
Dark(actionfunction): Switches the
theme to a dark color scheme. Updates class, header
style, and menu style accordingly.
Light(actionfunction): Switches the
theme to a light color scheme. Adjusts header and
menu styles based on the navigation layout.
Ltr(actionfunction): Sets the text
direction to left-to-right.
Rtl(actionfunction): Sets the text
direction to right-to-left.
HorizontalClick(actionfunction):
Changes the navigation layout to horizontal and
adapts menu and vertical style based on the color
scheme.
Vertical(actionfunction): Sets the
navigation layout to vertical, adjusts menu and
vertical style, and closes the menu if open.
Menuclick(actionfunction): Sets the
navigation style to "menu-click," hides vertical
style, and changes the toggle state.
MenuHover(actionfunction): Sets the
navigation style to "menu-hover," hides vertical
style, and changes the toggle state.
IconClick(actionfunction): Sets the
navigation style to "icon-click," hides vertical
style, and changes the toggle state.
IconHover(actionfunction): Sets the
navigation style to "icon-hover," hides vertical
style, and changes the toggle state.
Regular(actionfunction): Sets the page
style to regular and removes the classic page style.
Classic(actionfunction): Sets the page
style to classic and removes the regular page style.
Fullwidth(actionfunction): Sets the
page width to full width and removes the boxed
width.
Boxed(actionfunction): Sets the page
width to boxed and removes the full width.
FixedMenu(actionfunction): Sets the
menu position to fixed and removes the scrollable
menu position.
scrollMenu(actionfunction): Sets the
menu position to scrollable and removes the fixed
menu position.
Headerpostionfixed(actionfunction):
Sets the header position to fixed and removes the
scrollable header position.
Headerpostionscroll(actionfunction):
Sets the header position to scrollable and removes
the fixed header position.
Defaultmenu(actionfunction): Sets the
vertical menu style to default, closes the menu, and
adjusts the navigation layout.
Closedmenu(actionfunction): Sets the
vertical menu style to closed, adjusts the
navigation layout, and changes the toggle state.
iconText(actionfunction): Sets the
vertical menu style to icon-text, adjusts the
navigation layout, and changes the toggle state.
iconOverayFn(actionfunction): Sets the
vertical menu style to overlay with icons, adjusts
the navigation layout, and changes the toggle state.
DetachedFn(actionfunction): Sets the
vertical menu style to detached, adjusts the
navigation layout, and changes the toggle state.
DoubletFn(actionfunction): Sets the
vertical menu style to double menu, adjusts the
navigation layout, and changes the toggle state.
colorMenu(actionfunction): Changes the
menu style to color.
lightMenu(actionfunction): Changes the
menu style to light.
darkMenu(actionfunction): Changes the
menu style to dark.
gradientMenu(actionfunction): Changes
the menu style to gradient.
transparentMenu(actionfunction):
Changes the menu style to transparent.
lightHeader(actionfunction): Changes
the header style to light.
darkHeader(actionfunction): Changes the
header style to dark.
colorHeader(actionfunction): Changes
the header style to color.
gradientHeader(actionfunction): Changes
the header style to gradient.
transparentHeader(actionfunction):
Changes the header style to transparent.
primaryColor1(actionfunction) to
primaryColor5(actionfunction): Changes
the primary color of the theme.
backgroundColor1(actionfunction) to
backgroundColor5(actionfunction):
Changes the background color of the theme.
Themeprimarycolor(actionfunction):
Provides a color picker interface to dynamically
change the primary color of the theme.
Themebackgroundcolor(actionfunction):
Provides a color picker interface to dynamically
change the background color of the theme.
bgImage1(actionfunction) to
bgImage5(actionfunction): Changes the
background image of the theme.
Reset(actionfunction): Resets the theme
to its initial state, clearing all customization.
Disabling Switcher
Step1:
Open header.js component
shared\layout-components\header\header.js
Remove the switcher component from the
main layout follow the path
Path: app\(components)\(contentlayout)\layout.js
import Switcher from "@/shared/layout-components/switcher/switcher"
<Switcher />
Step3:
Now remove the switcher component and switcherData file
from the root folder, follow the path
Switcher component shared\layout-components\switcher\switcher.js
and
switcherdata file from /shared\data\switcherdata
Step1:
Open ecommerceheader.js component
\shared\layout-components\ecommerceheader\ecommerceheader.js
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 Datepicker is a React wrapper for the
Datepicker 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 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.
Preline Alerts are pre-styled, customizable alert
components built with Tailwind CSS utility classes and provided by the
Preline UI library. They make it easy to display important messages or
notifications, offering built-in support for various styles (success, error,
info, etc.), dismissible functionality, and seamless integration with React.
1. You need to add these files to make alerts work.
Preline Buttons are pre-styled, responsive button
components built with Tailwind CSS utility classes. They offer a
customizable solution for creating interactive buttons in React
applications, supporting various styles, sizes, colors, and loading states.
Preline Buttons also integrate easily with React,providing options for
icons, hover effects, and more.
1. You need to add these files to make buttons work.
Preline Badges are small, customizable components
built with Tailwind CSS utility classes, designed to display labels,
notifications, or counters in your React application. They support various
styles, colors, and positions, making them perfect 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.
Preline Cards are versatile, customizable components
built with Tailwind CSS, designed for displaying content in a flexible,
structured layout. They offer options for images, headers, footers, and
more, making them perfect for creating rich, responsive UI elements in your
React application. Preline Cards integrate seamlessly with React and provide
an easy way to organize and present content in a visually appealing way.
1. You need to add these files to make cards work.
Preline Breadcrumb is a navigation component built
with Tailwind CSS, designed to display a series of links that help users
understand their location within a hierarchical structure. It offers
customizable options for separators, active links, and responsive behavior,
making it an ideal choice for creating intuitive and accessible navigation
in React applications.
1. You need to add these files to make breadcrumb work.
Preline Dropdown is a component built with Tailwind
CSS that provides an easy way to create dropdown menus in React
applications. It supports single or multi-level menus, alignment options,
and customizable triggers (e.g., buttons or links), making it simple to
build responsive, interactive dropdowns with minimal effort while
maintaining a clean and modern design.
1. You need to add these files to make dropdown work.
Preline Tooltips and Popovers are small, customizable pop-up elements built
with Tailwind CSS, providing additional information when users hover over or
focus on an element. Both can be integrated easily into React applications
with support for various customization options, including positioning,
trigger events, and animations. For Popovers, the --trigger: click property
is used, making it possible to reuse the same component for both Tooltips
and Popovers for a smoother, more efficient implementation.
1. You need to add these files to make tooltipss work.
Preline Toast is a component built with Tailwind CSS
for displaying lightweight, non-blocking notifications or messages in React
applications. It offers features like auto-dismiss, customizable timing, and
various styling options for success, error, or info messages, making it
simple to provide responsive and visually appealing feedback to users in a
clean and unobtrusive way.
1. You need to add these files to make toast work.
The Preline Accordion component allows you to display
collapsible content panels in a stack, making it ideal for organizing large
amounts of content in a compact and interactive layout. Built with
TailwindCSS, it provides features like multiple or single panel expansion,
customizable styling, and smooth animations, enabling you to create dynamic
and space-efficient UIs in React applications.
1. You need to add these files to make accordions work.
Note-1: After making the change, run the
npm run postcss 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
