Documentation

Dreams Connect – Connect, Share & Stay Together

Dreams Connect empowers users to connect with friends, join communities, share updates, exchange messages, and engage through a secure, responsive, and feature-rich social networking.

Version : v1.0.1

Author : Dreams Technologies

Support via email : support@dreamstechnologies.com

Buy Now

Introduction

Dreams Connect Next.js is a modern, responsive team chat and collaboration workspace built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS v4. It includes beautifully crafted pages for messaging, threads, calls, files, and a full AI suite, helping you build scalable chat, community, and collaboration platforms with ease.

Requirement

Technologies

Next.js 16 / React 19

Tailwind CSS v4

System Requirements

Node.js: Version 18.0 or higher.
Package Manager: NPM (Node Package Manager) or Yarn.
Next.js: Version 16.2.11 with React 19.2.7 and TypeScript ^5.
Browser: Modern web browsers (Chrome, Firefox, Edge, Safari).

Core Features

Dreams Connect Next.js delivers a complete team chat workspace with prebuilt, fully functional page modules and a clean, modular component structure.

Prebuilt Applications

Channels, Direct Messages & Threads
Voice & Video Calls with Call History
AI Suite – Assistant, Rewrite, Summary, Translate
Files, Bookmarks, Media Gallery & Activity Feed
Team Directory, Profile, Billing & Invites

Technical Features

Next.js 16 App Router with React Server Components
React 19.2.7 + TypeScript with React Compiler
Static HTML export ready (output: "export")
Built-in Light / Dark Mode & 6 Accent Colors
Full RTL Support & Responsive Design

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

nextjs/
├── public/
│   └── assets/img/          # logo.svg, logo.png, favicon.png, apple-icon.png, profiles/
├── src/
│   ├── app/                 # App Router
│   │   ├── (app-pages)/     # 20 pages -> AppShellLayout
│   │   ├── (auth-pages)/    #  5 pages -> AuthLayout
│   │   ├── (settings-pages)/#  1 page  -> SettingsLayout
│   │   ├── welcome/ shortcuts/ lock-screen/ maintenance/
│   │   ├── error-404/ privacy-policy/ terms-of-service/
│   │   ├── globals.css
│   │   ├── layout.tsx       # root layout (html/body shell + metadata)
│   │   ├── providers.tsx    # client provider tree
│   │   └── not-found.tsx
│   ├── components/          # ai, calls, chat, layout, settings, skeleton, ui
│   ├── config/              # shared page config
│   ├── contexts/            # Theme, Settings, Toast, Notifications, AiPreferences
│   ├── core/data/           # interface.ts, imagedata.ts - shared TS types & assets
│   ├── hooks/               # useModal, useDropdown, useDisclosure, useCallTimer, ...
│   ├── layout/              # AppShellLayout, AuthLayout, SettingsLayout
│   ├── routes/all_routes.tsx  # central path constants
│   ├── style/style.css      # theme tokens + Tailwind entry
│   ├── utils/               # shared helpers
│   ├── views/               # page modules (chat, ai, account, auth, misc)
│   └── environment.tsx
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.json

Note

Folders wrapped in parentheses are route groups. They organise files without adding a URL segment, so (app-pages)/home/page.tsx is served at /nextjs/home. There is no src/app/page.tsx – the / redirect in next.config.ts sends the root to /login.

Shared Components (`src/components/`)

ui: Accordion, Button, ContextMenu, Dropdown, EmojiPicker, GifPicker, Input, Lightbox, Modal, RadioCard, Select, Tabs, Toggle, Tooltip — layout: WorkspaceRail, ChannelSidebar, LegalDocLayout, AuthDivider, AuthMobileLogo, SocialAuthButtons, DemoBar — plus ai, calls, chat, settings, skeleton and image-with-base-path.

Page Modules (`src/views/`)

chat: Home, Threads, Dm, Calls, Files, Bookmarks, ActivityFeed, Notifications, TeamDirectory, Status — ai: AiAssistant, AiRewrite, AiSettings, AiSuggestions, AiSummary, AiTranslate — account: Profile, Settings, Billing, Invite, MediaGallery — auth: Login, Register, ForgotPassword, ResetPassword, VerifyEmail — misc: Welcome, Shortcuts, LockScreen, Maintenance, Error404, PrivacyPolicy, TermsOfService

Next.js Structure

Structure Overview

Dreams Connect Next.js uses the App Router with route groups, nested layouts and client context providers to keep the app scalable and maintainable.

Layouts nest from the outside in: the root src/app/layout.tsx renders the <html> and <body> shell, then each route group applies its own layout, then the page renders.

ROUTE GROUP	PAGES	LAYOUT
`(app-pages)`	20	AppShellLayout – workspace rail + channel sidebar
`(auth-pages)`	5	AuthLayout – centered, bare
`(settings-pages)`	1	SettingsLayout – settings navigation
root-level	7	None – each page brings its own shell

Each group layout is a one-liner that delegates to the matching file in src/layout/. The root-level pages (welcome, shortcuts, lock screen, maintenance, error, privacy policy, terms) sit outside every group and render full-page markup of their own.

Below is the root layout, src/app/layout.tsx:

import type { Metadata } from "next";
import "../style/style.css";
import "./globals.css";
import Providers from "./providers";

export const metadata: Metadata = {
  title: {
    default: "Dreams Connect - Tailwind CSS Team Chat & Collaboration Template",
    template: "%s",
  },
  description: "Dreams Connect is a premium Tailwind CSS team chat template ...",
  applicationName: "Dreams Connect",
  authors: [{ name: "Dreams Technologies" }],
  icons: {
    icon: "/nextjs/assets/img/favicon.png",
    apple: "/nextjs/assets/img/apple-icon.png",
  },
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
      </head>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

The client provider tree

The root layout stays a Server Component. All client-side state lives in src/app/providers.tsx, marked "use client", which composes the same context providers used by the React version:

"use client";

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrimeReactProvider>
      <ThemeProvider>
        <SettingsProvider>
          <ToastProvider>
            <AiPreferencesProvider>
              <NotificationsProvider>{children}</NotificationsProvider>
            </AiPreferencesProvider>
          </ToastProvider>
        </SettingsProvider>
      </ThemeProvider>
    </PrimeReactProvider>
  );
}

Things worth noting

The metadata export – Next's Metadata API sets the title, description and icons. No head-management library is needed; the template: "%s" lets each page replace the title outright.
Server/client split – the layout is a Server Component and only providers.tsx opts into the client, keeping the shell out of the client bundle.
Inter via Google Fonts – loaded with a preconnect and stylesheet link in the head.
Static export – output: "export" and basePath: "/nextjs" in next.config.ts produce a fully static site under the /nextjs path.

Page metadata and paths

Individual pages export their own metadata object, and each route pairs a Server Component page.tsx with a *Client.tsx component holding the interactive markup. The src/routes/all_routes.tsx map is the central set of path constants used by the sidebar menu and links.

Installation Guide

Prerequisites

Node.js and NPM :

Ensure that Node.js is installed and running on your system.

Download Node.js:
https://nodejs.org/en/download/

Package Manager

Use npm (recommended with this project lockfile) or Yarn if preferred.

npm -v

Next.js

Next.js is the framework and build tool. It is installed automatically as a project dependency – no global installation required.

Next.js:
https://nextjs.org/

Installation Steps

Extract & Navigate

After downloading, extract the Dreams Connect package and navigate to the nextjs directory.

Install Dependencies

npm install

Before proceeding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Start Development Server

npm run dev

For running a project, run the command

Open in Browser

Open your browser at http://localhost:3000/nextjs. The /nextjs path comes from basePath: "/nextjs" in next.config.ts, and the root / redirects to /login.

Build for Production

npm run build

Because output: "export" is set, this produces a static HTML export in the out/ directory, which can be served by any static host. The next start script exists but is not the intended serving path for a static export.

Tailwind Config

CSS-first configuration

This project uses Tailwind CSS v4.3.2, which is configured in CSS rather than JavaScript. There is no content array and no tailwind.config.js in this project at all – the @source directive replaces them. Tailwind is wired in through PostCSS.

The PostCSS setup in postcss.config.mjs is the whole integration:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

All configuration lives at the top of src/style/style.css:

/* 1. ALL @imports must be at the very top */
@import "tailwindcss";

/* 2. Then @layer and @custom-variant */
@layer base, components, utilities;
@custom-variant dark (&:where(.dark, .dark *));

/* 3. Then the theme tokens */
@theme {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

What each directive does

@import "tailwindcss" – pulls in Tailwind's base, components and utilities in a single v4 entry point.
@layer – declares the cascade order for base, component and utility styles.
@custom-variant dark – makes every dark: utility key off the .dark class on <html>.
@theme – declares design tokens (fonts, colors) as CSS variables that Tailwind turns into utilities.

Note

src/app/globals.css holds component-level overrides (rich text editor, scrollbars and similar) layered on top of the theme tokens.

How to change Logo?

You can easily update the logo in two ways:

Option 1: Overwrite Logo Image Files (Recommended)

Directly replace the default logo files in the public/assets/img/ directory with your own logos using the same file names:

logo.svg: Main logo used across the workspace rail and auth pages.
logo.png: Raster fallback of the main logo.
favicon.png / apple-icon.png: Browser tab and mobile home-screen icons.

Option 2: Update the React Components

If you want to use different names or paths, open src/components/layout/WorkspaceRail.tsx and src/components/layout/AuthMobileLogo.tsx, then search for the logo tags and modify their src attribute.

About image paths

Images are rendered through the shared src/components/image-with-base-path/ component, which prefixes the configured base path onto every image URL. This is why asset paths resolve correctly under /nextjs/.

Note

This project renders plain <img> tags rather than next/image – the @next/next/no-img-element ESLint rule is intentionally disabled. Because output: "export" is set, next/image would require the unoptimized flag to work.

Fonts

The default typography font for the template is Inter. It is referenced in two places, and both must be updated when you change it:

1. The Google Fonts link in `src/app/layout.tsx`

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>

2. The font token in `src/style/style.css`

/* Update the token inside the @theme block */
@theme {
    --font-sans: "Roboto", system-ui, -apple-system, sans-serif;
}

Color System

The color system is defined as CSS variables in src/style/style.css. The template is dark-first: the default Tailwind slate palette drives all surfaces, and light mode is produced by flipping the scale's luminance under html:not(.dark):

/* Light mode overrides (symmetric luminance flip) */
html:not(.dark) {
    --color-slate-50:  oklch(12.9% .042 264.695); /* ← 950 */
    --color-slate-100: oklch(20.8% .042 265.755); /* ← 900 */
    --color-slate-900: oklch(96.8% .007 247.896); /* ← 100 */
    --color-slate-950: oklch(98.4% .003 247.858); /* ← 50  */

    color-scheme: light;
}

Because both modes read the same slate tokens, a utility such as bg-slate-900 stays correct in light and dark without any dark: variant.

Accent Colors

Six accent colors ship with the template – violet (default), blue, emerald, rose, amber and sky. Each is an override block keyed off a data-accent attribute on <html>, applied by ThemeContext and persisted to localStorage:

html[data-accent="blue"] {
    /* remaps the violet token scale onto blue */
}

Dark Mode

How it Works

Dark mode state is managed by ThemeContext and persisted to localStorage under the key dreamsconnect-color-theme. The provider toggles a dark class on the <html> element, which a Tailwind custom variant reads to apply dark: utility classes. Dark is the default when the user has made no explicit choice.

src/contexts/ThemeContext.tsx holds the theme, initialised from localStorage and flipped via toggleDark():

const COLOR_THEME_KEY = "dreamsconnect-color-theme";
export type ThemeMode = "dark" | "light" | "system";

function readInitialDark(): boolean {
  const saved = localStorage.getItem(COLOR_THEME_KEY);
  return saved ? saved === "dark" : true;   // dark by default
}

An effect inside the provider is the single bridge that writes the class to the DOM whenever the state changes:

document.documentElement.classList.toggle("dark", isDark);

In src/style/style.css, a custom Tailwind variant reacts to that class so any dark: utility applies automatically:

@custom-variant dark (&:where(.dark, .dark *));

Server rendering and the theme

The root layout in src/app/layout.tsx is a Server Component and renders <html lang="en"> without a theme class. ThemeProvider lives in the client-only providers.tsx, so it reads localStorage and applies the dark class in an effect after mount – the server never needs to guess the user’s theme.

Consume the theme anywhere with the useTheme() hook, which exposes isDark, mode, setTheme() and toggleDark(). Selecting "system" clears the stored key and follows the OS prefers-color-scheme setting live.

RTL Support

Right-to-Left layout is driven through ThemeContext rather than by hand-editing markup. Calling setDir("rtl") or toggleDir() writes the dir attribute onto the <html> tag and persists the choice to localStorage under dreamsconnect-layout-direction:

const { direction, setDir, toggleDir } = useTheme();

// the provider applies it to the DOM
document.documentElement.setAttribute("dir", direction);

The result is the standard RTL document root:

<html lang="en" dir="rtl">

Tailwind CSS automatically transforms positioning utilities (like margins, padding, and flex alignments) using standard logical properties when the dir="rtl" attribute is active.

Icons

Dreams Connect Next.js uses Lucide icons through the lucide-react package. Icons are imported as React components, so only the icons you actually use are bundled – no icon webfont or CDN request is made.

Using an Icon

Import the icon by name and render it as a component. Size, stroke width and color are set with props or Tailwind classes:

import { House, Users, Settings } from "lucide-react";

<House className="w-5 h-5 text-slate-400" />
<Users className="w-4 h-4" strokeWidth={1.5} />
<Settings className="w-5 h-5" />

Browse the icon set

Search the full catalogue at lucide.dev/icons. Icon names are kebab-case on the site and PascalCase when imported – message-circle becomes MessageCircle.

Layout Options

Dreams Connect Next.js ships three shared layouts in src/layout/. Each App Router route group applies the layout it belongs to through its own layout.tsx, so pages only render their own content:

AppShellLayout.tsx – the main workspace shell (workspace rail + channel sidebar + content area). Applied by (app-pages): chat, AI, and account pages.
SettingsLayout.tsx – the settings shell with its own section navigation. Applied by (settings-pages).
AuthLayout.tsx – the centered, sidebar-free shell for sign-in and onboarding. Applied by (auth-pages).

How route groups bind to layouts

Each group layout is a one-liner that delegates to the matching file in src/layout/:

// src/app/(app-pages)/layout.tsx
import AppShellLayout from "@/layout/AppShellLayout";

export default function Layout({ children }: { children: React.ReactNode }) {
  return <AppShellLayout>{children}</AppShellLayout>;
}

Pages such as the welcome screen, lock screen, maintenance and error pages sit at the root of src/app/, outside every route group, because each supplies its own full-page markup. All layouts support light and dark modes plus RTL.

Default Layout

The default workspace layout (AppShellLayout.tsx) with an icon workspace rail, a channel sidebar, and a center conversation area. It is applied by the (app-pages) route group.

Workspace Rail: Icon-only left rail for switching workspaces and top-level sections (WorkspaceRail.tsx).
Channel Sidebar: Channels, direct messages, threads and collapsible groups (ChannelSidebar.tsx).
Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.

Settings & Auth Layouts

Two secondary shells complement the main workspace layout, each applied by its own App Router route group.

Settings Layout: SettingsLayout.tsx renders a dedicated section navigation beside the settings content – used for profile, workspace, and AI preference pages.
Auth Layout: AuthLayout.tsx is a centered, sidebar-free shell for login, register, password reset, and email verification.
Standalone Pages: Welcome, shortcuts, lock screen, maintenance, and error pages render at the root of src/app/ with their own full-page markup.

License

Dreams Connect is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Credits & Resources

Dreams Connect Next.js is built upon several open-source libraries, frameworks, and typography assets. We appreciate the contribution of the following resources:

Asset Name	Official Website URL
Next.js	https://nextjs.org/
React	https://react.dev/
TypeScript	https://www.typescriptlang.org/
Tailwind CSS	https://tailwindcss.com/
PrimeReact	https://primereact.org/
Lucide React	https://lucide.dev/
Inter Font	https://fonts.google.com/specimen/Inter

Support

If you have any questions or run into issues with the template, feel free to contact us via email at support@dreamstechnologies.com.

Response Time: Typically 12–24 hours on weekdays (GMT+5:30). Support covers template bugs, errors, and standard features. It does not cover custom installations or custom coding changes.

Contact Support

Custom Work

Do you need custom development for your application?

If you need customization, new page integration, feature setups, or database connections, our engineering team can help tailor this template to your precise specifications.

Tailoring features to your exact branding and workflow.
Deploying the template to your production servers.
Integrating backend endpoints and databases.

Book an Appointment Get a Free Quote

Thank You

Thank you for choosing Dreams Connect! We hope this template facilitates building your application. We kindly ask you to share your feedback by leaving a rating on ThemeForest.

Leave a Review

Dreams Connect – Connect, Share & Stay Together

Introduction

Requirement

Technologies

Next.js 16 / React 19

Tailwind CSS v4

System Requirements

Core Features

Prebuilt Applications

Technical Features

File Structure

Project Overview

Shared Components (src/components/)

Page Modules (src/views/)

Next.js Structure

Structure Overview

The client provider tree

Things worth noting

Page metadata and paths

Installation Guide

Prerequisites

Node.js and NPM :

Package Manager

Next.js

Installation Steps

Extract & Navigate

Install Dependencies

Start Development Server

Open in Browser

Build for Production

Tailwind Config

CSS-first configuration

What each directive does

How to change Logo?

Option 1: Overwrite Logo Image Files (Recommended)

Option 2: Update the React Components

About image paths

Fonts

1. The Google Fonts link in src/app/layout.tsx

2. The font token in src/style/style.css

Color System

Accent Colors

Dark Mode

How it Works

Server rendering and the theme

RTL Support

Icons

Using an Icon

Browse the icon set

Layout Options

How route groups bind to layouts

Default Layout

Settings & Auth Layouts

License

Regular License

Extended License

Credits & Resources

Support

Custom Work

Do you need custom development for your application?

Thank You

Shared Components (`src/components/`)

Page Modules (`src/views/`)

1. The Google Fonts link in `src/app/layout.tsx`

2. The font token in `src/style/style.css`