Documentation
- Home
- Documentation
Pacakge Versions
v15.1.3
NextJs
v19.0.0
React
v3.4.1
Tailwindcss
v4.24.11
NextAuth
v5.6.3
Typescript
Dashnext Tailwind NextJs Template is built with Tailwindcss and Nextjs.
These theme is ready to use and you can totally customize as per your requirement.
For Customize, You should have knowledge of NextJs, ReactJs, Tailwind and JSX to be able to modify these template.
Docs Menu
Pacakge Structure
Dashnext Tailwind Nextjs Templates
|—
package|—
public|—
src|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
app|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
(DashboardLayout) (Contains all the pages)|
|
|
|
|
|
|
|
|—
docs|—
forms|—
layout|—
table|—
ui-components|—
layout.tsx|—
page.tsx
|—
auth|
|
|
|
|
|
|—
auth1|
|—
auth2|
|—
authforms|
|—
error|
|—
maintenance
|—
components|
|
|
|
|
|
|—
dashboard
|
|—
Documentation
|
|—
form-components
|
|—
shared
|
|—
tables
|
|—
ui-components
|—
Context|—
css|—
layout.tsx|—
not-found.tsx
|—
utils|
|
|
|—
languages
|—
theme
|—
i18n.ts
|—
next.config.mjs|—
postcss.config.mjs|—
package.json|—
tailwind.config.ts|—
tsconfig.json
Quick Start
1. Requirements
Before proceeding, you need to have the latest stable node.js
Recommended environment:
- node js 20+
- npm js 10+
2. Install
Open package folder and install its dependencies. We recommanded yarn or npm.
1) Install with npm:
cd project-folder
npm install
1) Install with yarn:
cd project-folder
yarn install
3. Start
Once npm install is done now you an run the app.
npm run dev or yarn run dev
This command will start a local webserver http://localhost:3000:
> dashnext-nextjs-pro@1.0.0 dev
> next dev
-Next.js 15.1.3
-Local: http://localhost:3000
4. Build / Deployment
After adding url run below command for build a app.
npm run build or yarn build
Finally, Your webiste is ready to be deployed.🥳
Project Configuration
Layout
Default Setting
For any change in default layout : /src/app/context/config.ts
activeDir: "ltr", // This can be ltr or rtlactiveMode: "light", // This can be light or darkactiveTheme: "BLUE_THEME", // BLUE_THEME, GREEN_THEME, AQUA_THEME, PURPLE_THEME, ORANGE_THEMEactiveLayout: "vertical", // This can be vertical or horizontalisLayout: "boxed", // This can be full or boxedisSidebarHover: false,isCollapse:"full-sidebar",isLanguage: "en",isCardShadow: true,isMobileSidebar: false,isHorizontal: false,isBorderRadius: 7,sidebarWidth: 320,miniSidebarWidth: 87,topbarHeight: 70,
Typography
1. Change Font family over here : src/app/layout.tsx
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
Logo
1. Change Logo over here :src/app/layout/shared/logo/FullLogo.tsx
import Logo from "/public/images/logos/dark-logo.svg";
import Logowhite from "/public/images/logos/light-logo.svg";
<Link href="/">
<Image
src={Logo}
alt="logo"
className='block dark:hidden rtl:scale-x-[-1]'
/>
<Image
src={Logowhite}
alt="logo"
className='hidden dark:block rtl:scale-x-[-1]'
/>
</Link>
Layout
Colors Configuration
For any change in default Color : /src/app/css/theme/default-colors.css
:root {--color-info: #539bff;--color-success: #22C55E;--color-warning: #F59E0B;--color-error: #EF4444;--color-lightsuccess: #13DEB920;--color-lighterror: #FA896B20;--color-darkinfo: #223662;--color-lightwarning: #FFAE1F20;--color-white: #fff;--color-dark: #17192C;--color-black: #0E1025;--color-border: #0e10251a;--color-darkborder: #333f55;--color-link: #2a3547;--color-muted: #5a6a85;--color-darklink: #7c8fac;--color-lightgray: #f6f9fc;--color-darkgray: #333f55;--color-bodytext: #5a6a85bf;--color-error-emphasis: #c93232;--color-warning-emphasis: #d9941a;--color-success-emphasis: #189245;--color-cyan: #3DD9EB;--color-darkcyan: #174FEB;--color-pink: #EC4899;--color-info-emphasis: #3184f7;--color-herobg: #e4e6f16b;}
Colors Configuration
For any change in default theme Color : /src/app/css/theme/default-colors.css
[data-color-theme="BLUE_THEME"] {--color-primary: #0e98d8;--color-primary-emphasis: #0a73a3;--color-secondary: #5E88FE;--color-secondary-emphasis: #395ec2;--color-lightprimary: #3ea2d933;--color-lightsecondary: #49BEFF20;}
[data-color-theme="AQUA_THEME"] {--color-primary: #0074BA;--color-bghover: #00639e;--color-primary-emphasis: #00639e;--color-secondary-emphasis: #3cb7a0;--color-secondary: #47D7BC;--color-lightprimary: #0074BA20;--color-lightsecondary: #00639e20;}
[data-color-theme="PURPLE_THEME"] {--color-primary: #763EBD;--color-primary-emphasis: #6435a1;--color-secondary-emphasis: #7fb0b5;--color-secondary: #49BEFF;--color-lightprimary: #763EBD20;--color-lightsecondary: #49BEFF20;}
[data-color-theme="GREEN_THEME"] {--color-primary: #0A7EA4;--color-primary-emphasis: #096b8b;--color-secondary-emphasis: #d4e069;--color-secondary: #CCDA4E;--color-lightprimary: #0A7EA420;--color-lightsecondary: #CCDA4E20;}
[data-color-theme="CYAN_THEME"] {--color-primary: #01C0C8;--color-primary-emphasis: #01a3aa;--color-secondary-emphasis: #d58066;--color-secondary: #FB9678;--color-lightprimary: #01C0C820;--color-lightsecondary: #FB967820;}
[data-color-theme="ORANGE_THEME"] {--color-primary: #FA896B;--color-primary-emphasis: #d5745b;--color-secondary-emphasis: #00639e;--color-secondary: #0074BA;--color-lightprimary: #FA896B20;--color-lightsecondary: #0074BA20;}
