Introduction & Setup

Welcome to Jiansu — Modern Crypto & Trading React Admin Dashboard Template Documentation.

Thank you for choosing Jiansu! This documentation provides in-depth guidance on how to install, configure, customize, and extend the template for your cryptocurrency exchange, Web3 analytics platform, trading terminal, or financial administration portal.

1. Product Overview: Jiansu Crypto & Trading Admin

Jiansu is a state-of-the-art, high-performance, and feature-complete Crypto & Trading Admin Dashboard template built with React 19, Tailwind CSS v4, and Vite 8. Engineered with modular architecture, isolated reusable UI components, and cutting-edge visual aesthetics, Jiansu delivers everything needed to build production-ready fintech applications.

Key Highlights:

• Modern Tech Stack: Powered by React 19, Tailwind CSS v4, and Vite 8 for blazing fast Hot Module Replacement (HMR) and optimized build outputs.
• 32+ Pre-built Pages: Comprehensive suite of specialized pages for Trading Desks, Portfolio Overview, Wallet Management, KYC Verifications, Security Audit, Transaction Logs, Support Tickets, Authentication, Errors, and UI Elements.
• Dual Theme Mode: Native Dark and Light themes with animated View Transitions API support.
• Bi-directional (LTR & RTL): Full Right-to-Left (RTL) language support with instantaneous toggle.
• Dynamic 8-Color Accent Switcher: Emerald, Ocean Blue, Violet, Ruby Red, Amber, Aqua Cyan, Hot Pink, and Indigo with real-time CSS variable shade generation.
• Lenis Smooth Scrolling: Silky-smooth desktop scrolling experience integrated at root.
• Rich Interactive Visualizations: Financial candlestick charts, order books, spline area trends, and asset allocation donuts powered by ApexCharts and Recharts.
• Code-Splitting & Lazy Loading: Dynamic page-level routing with React.lazy() and <Suspense>.
• Clean & Modular Codebase: Strict component isolation, reusable UI library, and zero console errors or warnings.

Technology Stack:

2. License & Usage Terms

ThemeForest / Envato Market license types and their usage guidelines:

3. Changelog

Track the continuous evolution, features, and releases of Jiansu.

4. File Structure

Jiansu follows a clean, modular folder organization adhering to React 19 and Vite best practices:

jiansu/
├── public/                     # Static assets accessible directly
│   ├── documentation/          # Standalone offline documentation
│   │   ├── css/                # Documentation stylesheets (app.css, bootstrap)
│   │   ├── images/             # Documentation visual assets
│   │   ├── js/                 # Documentation scripts
│   │   ├── doc.html            # Main documentation page
│   │   └── index.html          # Documentation showcase landing
│   ├── favicon.ico             # Browser tab favicon
│   └── icons.svg               # SVG icons sprite
├── src/
│   ├── assets/                 # Static media and brand assets
│   │   ├── logo/               # Brand logos (logo-dark.png, logo-light.png, logo-sm.png)
│   │   ├── user/               # Demo avatars and profile images
│   │   └── card-img/           # Showcase cards and banners
│   ├── components/
│   │   ├── context/            # Global context providers
│   │   │   └── theme-context.jsx # Dark/Light mode, RTL/LTR, dynamic primary color
│   │   ├── layout/             # Shell and layout architecture
│   │   │   ├── dashboard.jsx   # Master layout wrapper with header, sidebar & rightbar
│   │   │   ├── navbar.jsx      # Top sticky header with search, notifications, profile
│   │   │   ├── sidebar.jsx     # Collapsible navigation sidebar
│   │   │   ├── menu-data.jsx   # Structured menu routes, labels, and icons
│   │   │   ├── rightbar.jsx    # Slide-out theme customizer drawer
│   │   │   ├── footer.jsx      # Footer bar with copyright
│   │   │   └── style-helpers.jsx # Shared style utility functions
│   │   ├── mockdata/           # Curated JSON mock datasets
│   │   │   ├── overview-data.json
│   │   │   ├── trading-data.json
│   │   │   ├── wallet-data.json
│   │   │   ├── chart-data.json
│   │   │   ├── kyc-data.json
│   │   │   ├── security-data.json
│   │   │   ├── table-data.json
│   │   │   └── settings-data.json
│   │   ├── pages/              # Application pages
│   │   │   ├── auth/           # Login, Register, Forgot Password, Reset, Verify
│   │   │   ├── dashboard/      # Overview, Trading, Security, KYC, Wallet, etc.
│   │   │   └── errors/         # 404 Not Found, 500 Server Error
│   │   ├── ui/                 # Reusable atomic UI components (Button, Card, Input...)
│   │   └── ui-elements/        # Interactive showcase pages for UI components
│   ├── routes/
│   │   └── routes-path.jsx     # Master route configuration with lazy loading & Suspense
│   ├── App.jsx                 # Top-level component with Lenis smooth scroll
│   ├── index.css               # Tailwind CSS v4 setup, font imports, custom animations
│   └── main.jsx                # React 19 root entry with BrowserRouter & ThemeProvider
├── eslint.config.js            # ESLint flat configuration
├── index.html                  # Root HTML template with meta SEO tags
├── jsconfig.json               # Path aliasing configuration
├── package.json                # Project dependencies, scripts, and metadata
├── vite.config.js              # Vite build setup with Rollup vendor chunking
└── README.md                   # Project summary & quick reference

5. Installation Guide

Follow these quick steps to get Jiansu up and running on your local machine.

System Prerequisites:

• Node.js: v18.0.0 or higher (v20+ LTS recommended). Check with node -v.
• Package Manager: npm (v9+), yarn, or pnpm. Check with npm -v.
• Browser: Modern Chromium, Firefox, or Safari with modern CSS support.

Step 1: Extract the Archive

Download the ZIP archive from ThemeForest and extract it to your preferred working directory.

Step 2: Open Terminal in Project Folder

cd jiansu

Step 3: Install Node Dependencies

Execute your preferred package manager to install all required libraries:

# Using npm (recommended)
npm install

# Or using yarn
yarn install

# Or using pnpm
pnpm install

Step 4: Launch the Development Server

Start the Vite development server with Hot Module Replacement (HMR):

npm run dev

Your terminal will display the local development URL, typically:

6. Deployment & Production Build

To compile and optimize Jiansu for a production environment:

npm run build

This command compiles all JSX, minifies stylesheets, tree-shakes unused dependencies, and generates an optimized production bundle inside the dist/ directory.

Preview the Production Build Locally:

npm run preview

Deployment Targets:

• Vercel: Import the repository and set the framework preset to Vite. The build command is npm run build and the output directory is dist.
• Netlify: Connect your Git repository, set the build command to npm run build, and publish directory to dist. Ensure client-side routing redirect is configured (/* /index.html 200).
• Apache / Nginx / Traditional Hosting: Upload all files inside dist/ directly to your web server root (public_html or /var/www/html). Ensure fallback routing to index.html is enabled for React Router.

7. Theme & Dark Mode Management

Jiansu features a comprehensive, state-of-the-art theme system managed via ThemeProvider in src/components/context/theme-context.jsx. It provides persistent theme state in localStorage and animated View Transitions API support.

How to Change the Default Theme Mode:

By default, Jiansu opens in dark mode (ideal for crypto & trading interfaces). If you prefer light mode by default, open src/components/context/theme-context.jsx and edit line 49:

// src/components/context/theme-context.jsx
// Change "dark" to "light"
const [theme, setTheme] = useState("light");

Accessing Theme State via Hook:

You can read or toggle the theme anywhere in your application using the custom useTheme() hook:

import { useTheme } from '../components/context/theme-context';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={() => toggleTheme('circle-blur', 'top-right')}>
      Current Mode: {theme === 'dark' ? 'Dark' : 'Light'}
    </button>
  );
};

8. Color Customization & Accent Switcher

Jiansu features a dynamic primary color system. When a color is selected, the application automatically computes CSS variables for --primary-color and all 11 tint/shade stops (--primary-50 to --primary-950).

Changing the Default Primary Accent:

Open src/components/context/theme-context.jsx and modify the DEFAULT_PRIMARY constant (default is Emerald Green #22c55e):

// src/components/context/theme-context.jsx
// Change to any hex color of your choice
const DEFAULT_PRIMARY = "#22c55e"; // Emerald (Crypto default)

Curated 8-Color Palette in Theme Customizer:

The slide-out settings drawer (src/components/layout/rightbar.jsx) provides 8 pre-configured palette presets:

9. Font Customization

Jiansu uses Google's modern geometric font Montserrat as the default typography across all components, headings, and data values.

How Montserrat is Configured:

In src/index.css:

/* src/index.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
  font-family: "Montserrat", sans-serif;
}

To Change the Font Family:

1. Visit Google Fonts and select your preferred font (e.g. Inter, Outfit, Poppins).
2. Copy the provided @import link.
3. Replace the import at line 1 of src/index.css and update the font-family definition under html.

10. RTL (Right-to-Left) & Bi-directional Support

Jiansu provides full, out-of-the-box support for Right-to-Left (RTL) languages such as Arabic, Hebrew, Persian, and Urdu.

How Direction Works:

• Managed via toggleDirection() in ThemeContext.
• Dynamically toggles the dir="rtl" or dir="ltr" attribute on the root <html> element.
• Tailwind CSS logical properties (e.g., ps-, pe-, ms-, me-, border-s, border-e, start-, end-) automatically flip all alignments, paddings, and margins seamlessly.

Set RTL as the Default Direction:

Open src/components/context/theme-context.jsx and update line 50:

// src/components/context/theme-context.jsx
// Change "ltr" to "rtl"
const [direction, setDirection] = useState("rtl");

11. Layout Architecture

All core layout containers and shell components are located in src/components/layout/.

12. Routing Setup & Adding Pages

Jiansu uses React Router DOM v7 with dynamic code-splitting via React.lazy() and <Suspense> inside src/routes/routes-path.jsx.

Step 1: Create Your New Page Component

Create a new component file inside src/components/pages/dashboard/:

// src/components/pages/dashboard/staking.jsx
import React from 'react';
import Card from '../../ui/card';

const StakingPage = () => {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
        Crypto Staking Pool
      </h1>
      <Card>
        <p className="text-gray-600 dark:text-gray-400">
          Lock tokens and earn estimated APY yields.
        </p>
      </Card>
    </div>
  );
};

export default StakingPage;

Step 2: Register Route in src/routes/routes-path.jsx

// 1. Add lazy import near the top
const Staking = lazy(() => import('../components/pages/dashboard/staking'));

// 2. Add route inside <Route path="/" element={<DashboardLayout />}>
<Route path="staking" element={<Staking />} />

Step 3: Add to Navigation Menu in src/components/layout/menu-data.jsx

// src/components/layout/menu-data.jsx
{
  title: "Staking Pool",
  path: "/staking",
  icon: "Coins" // Lucide icon name
}

13. Core UI Components Library

All reusable atomic components are located in src/components/ui/. Each component is self-contained, typed with clean props, and styled with responsive Tailwind CSS classes for Dark and Light themes.

Available Reusable Components:

Usage Example:

import Card from '../ui/card';
import { Button } from '../ui/buttons';
import { Badge } from '../ui/badges';

function PortfolioSummary() {
  return (
    <Card className="p-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-bold">Total Asset Balance</h3>
        <Badge variant="success">+14.8% APY</Badge>
      </div>
      <p className="text-3xl font-extrabold mt-3">$84,230.50</p>
      <div className="mt-4 flex gap-3">
        <Button variant="primary">Deposit</Button>
        <Button variant="outline">Withdraw</Button>
      </div>
    </Card>
  );
}

14. Trading & Data Charts

Jiansu integrates ApexCharts and Recharts for high-frequency financial and portfolio visualizations.

ApexCharts Candlestick & Financial Chart:

import ReactApexChart from 'react-apexcharts';

const candlestickSeries = [{
  data: [
    { x: new Date('2026-10-28').getTime(), y: [65200, 66100, 64900, 65800] },
    { x: new Date('2026-10-29').getTime(), y: [65800, 67400, 65500, 67150] }
  ]
}];

const candlestickOptions = {
  chart: {
    type: 'candlestick',
    height: 350,
    background: 'transparent',
    toolbar: { show: false }
  },
  theme: { mode: 'dark' },
  xaxis: { type: 'datetime' },
  plotOptions: {
    candlestick: {
      colors: {
        upward: '#22c55e',   // Green for price surge
        downward: '#ef4444'  // Red for price dip
      }
    }
  }
};

<ReactApexChart 
  options={candlestickOptions} 
  series={candlestickSeries} 
  type="candlestick" 
  height={350} 
/>

Mock Data Source:

All chart data series and timeline configurations are stored in src/components/mockdata/chart-data.json. You can easily replace these with real REST or WebSocket endpoints.

15. Tables & Mock Data Integration

Jiansu features structured, responsive data tables with pagination, search, status badges, and copyable transaction hashes.

Mock Data Architecture:

Data throughout the application is cleanly organized in src/components/mockdata/:

• overview-data.json — Portfolio balances, recent trading activities, top gainers/losers.
• trading-data.json — Order book bids/asks, market depth, execution logs.
• wallet-data.json — Crypto assets (BTC, ETH, SOL, USDT), available balances, lockups.
• transaction-data.json — Deposit/withdrawal transactions with TXID and confirmations.
• kyc-data.json — Identity verification applicants, document status, tier ratings.
• security-data.json — 2FA status, API keys, session logs, IP whitelist rules.

16. FAQ (Frequently Asked Questions)

useEffect(() => {
  const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@ticker');
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    setPrice(data.c);
  };
  return () => ws.close();
}, []);

# Delete lockfile and dependencies
rm -rf node_modules package-lock.json

# Clean npm cache and re-install
npm cache clean --force
npm install

17. Credits & Sources

Libraries, frameworks, and assets integrated in Jiansu: