Introduction & Setup

Welcome to Saaslu - A complete React.js SaaS Admin Dashboard Template documentation

1. Product Overview: Saaslu SaaS Admin Template

Saaslu is a modern, responsive admin dashboard template built with React 19, Tailwind CSS v4, Vite, shadcn/ui, and Radix UI. This template is specifically designed for SaaS Analytics, Metrics Tracking, Revenue Management, and Business Intelligence.

Key Features:

• SaaS Analytics Dashboard with Real-time Metrics
• Revenue & Subscription Management UI
• Advanced Data Tables (TanStack Table)
• Interactive Charts & Visualizations
• Built with shadcn/ui and Radix UI components
• Dark Mode Support with next-themes
• Built with latest React 19 and Tailwind CSS v4
• 50+ UI Components
• Fully Responsive Design
• Modern Animation with Motion (motion/react)

Technology Stack:

2. License & Usage Terms

Wrapmarket Marketplace license types and their usage limitations:

3. Changelog

Track the continuous evolution, enhancements, and feature updates of Saaslu.

4. File Structure

The project follows React/Vite standards for easy customization.

saaslu/
├── public/
│   ├── documentation/
│   ├── favicon.ico
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   ├── assets/
│   ├── components/
│   │   └── ui/
│   ├── context/
│   ├── data/
│   ├── hooks/
│   ├── layout/
│   ├── lib/
│   │   └── utils.js
│   ├── pages/
│   │   ├── apps/
│   │   ├── auth/
│   │   ├── charts/
│   │   ├── error/
│   │   ├── forms/
│   │   ├── icons/
│   │   ├── page/
│   │   ├── plans/
│   │   ├── settings/
│   │   ├── support/
│   │   ├── tables/
│   │   ├── ui-element/
│   │   ├── analytics.jsx
│   │   ├── crm.jsx
│   │   ├── dashboard.jsx
│   │   ├── finance.jsx
│   │   └── project-management.jsx
│   └── router/
│       └── routes-path.jsx
├── .gitignore
├── components.json
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package.json
├── vite.config.js
└── README.md

5. Installation Guide

To run the template, you need Node.js (v18+) and npm/yarn installed.

Step 1: Download & Extract

Download the Zip file from WrapMarket and extract it to your local system.

Step 2: Navigate to Project

Open terminal and navigate to the project root directory:

cd saaslu

Step 3: Install Dependencies

Run this command to install all required libraries:

npm install
  # or
  yarn install

Step 4: Start Development Server

Run this command to start the project in development mode:

npm run dev
  # or
  yarn dev

The project will typically start at http://localhost:5173

6. Deployment

To create an optimized build for production, run the following command:

npm run build
  # or
  yarn build

This command will create a dist/ folder containing all optimized HTML, CSS, and JavaScript files. You can upload the contents of the dist/ folder to your hosting server.

Popular Hosting Platforms:

• Vercel: vercel --prod
• Netlify: Drag & drop dist/ folder or use Netlify CLI
• GitHub Pages: Use gh-pages package
• Apache/Nginx: Upload dist/ contents to server

7. Color Customization

All colors in Saaslu are set in the src/index.css file. You can easily change Primary, Secondary, and other colors here.

Modify src/index.css:

:root {
  /* Change your Primary Color here */
  --primary: #6657C3;  /* Main Primary Color */
  --primary-foreground: oklch(0.984 0.003 247.858);
  --primary-50: #f1f0fa;
  --primary-100: #dddbf3;
  --primary-200: #c0bce9;
  --primary-300: #a7a0e1;
  --primary-400: #9087d8;
  --primary-500: #7a6ece;
  --primary-600: #6657c3;
  --primary-700: #5240b3;
  --primary-800: #392c81;
  --primary-900: #1e164b;
  --primary-950: #100b2f;
}

8. Font Customization

The template uses 'Mulish' font, which is imported via Google Fonts in src/index.css.

To Change Font:

1. Go to Google Fonts and select your preferred font
2. Get the new @import link
3. Open src/index.css file and replace the old Font Link with the new one
4. Also change the Font-Family in the @theme section

/* src/index.css */
@import url('https://fonts.googleapis.com/css2?family=Your+Font+Name&display=swap');

@theme inline {
  --font-mulish: "Your Font Name", sans-serif;
}

9. Layout Options & Context Management

Saaslu uses React Context API for global state management. All layout settings are controlled via Context providers located in src/context/.

Available Context Providers:

// Usage in components
import { useTheme } from '@/context/theme-provider';

const MyComponent = () => {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button onClick={() => toggleTheme('circle-center-blur', 'center')}>
      Current Theme: {theme}
    </button>
  );
};

// Usage in components
import { useAppSidebar } from '@/context/sidebar-provider';

const Header = () => {
  const { sidebarVariant, mobileMenuOpen, toggleMobileMenu } = useAppSidebar();
  
  return (
    <button onClick={toggleMobileMenu}>
      {mobileMenuOpen ? 'Close' : 'Open'} Menu
    </button>
  );
};

// Usage in components
import { useSettings } from '@/context/settings-provider';

const Customizer = () => {
  const { settings, updateSetting } = useSettings();
  
  return (
    <select onChange={(e) => updateSetting('primaryColor', e.target.value)}>
      <option value="#6657C3">Purple</option>
      <option value="#3B82F6">Blue</option>
    </select>
  );
};

// Usage in components
import { useRTL } from '../context/RTLContext';

const LanguageSwitch = () => {
  const { isRTL, toggleRTL } = useRTL();
  
  return (
    <button onClick={toggleRTL}>
      Direction: {isRTL ? 'RTL' : 'LTR'}
    </button>
  );
};

// Usage in components
import { useRTL } from '@/context/rtl-provider';

const LanguageSwitch = () => {
  const { isRTL, toggleRTL } = useRTL();
  
  return (
    <button onClick={toggleRTL}>
      Direction: {isRTL ? 'RTL' : 'LTR'}
    </button>
  );
};

// Usage in components
import { useLanguage } from '@/context/language-provider';

const LanguageSelector = () => {
  const { currentLanguage, changeLanguage, getSidebarData } = useLanguage();
  
  return (
    <select onChange={(e) => changeLanguage(e.target.value)}>
      <option value="english">English</option>
      <option value="french">Français</option>
    </select>
  );
};

10. Routing Setup

Saaslu uses React Router DOM. To add a new route, you need to make changes in two places:

Step 1: Create Page Component

Create your new component in the src/pages/ folder:

// src/pages/reports/NewReport.jsx
  import React from 'react';
  
  const NewReport = () => {
    return (
      <div>
        <h1>New Report Page</h1>
        <p>Your content here</p>
      </div>
    );
  };
  
  export default NewReport;

Step 2: Add Route

Open src/router/routes-path.jsx file and add your new route:

import NewReport from '../pages/reports/NewReport';
  
  // Inside your Routes component
  <Route path="/new-report" element={<NewReport />} />

Step 3: Add to Sidebar (Optional)

If you want your new page to appear in the sidebar menu, add it to the appropriate section (e.g. dashboards, apps, or pages) inside src/data/languages/english.json:

{
  "id": "new-report",
  "label": "New Report",
  "icon": "FileText",
  "path": "/new-report"
}

11. Core UI Components

All small, reusable Components are available in the src/components/ui/ folder. Built with shadcn/ui and Radix UI.

Usage Example:

import { Button } from '@/components/ui/button';
import { Dialog } from '@/components/ui/dialog';
import { Card } from '@/components/ui/card';

function MyPage() {
  return (
    <Card>
      <h2>My Page</h2>
      <Button variant="default" size="lg">
        Click Me
      </Button>
    </Card>
  );
}

Available UI Components (50+):

12. Chart Usage

Saaslu uses ApexCharts for data visualization.

ApexCharts Example:

import ReactApexChart from 'react-apexcharts';

const series = [{
  name: "Revenue",
  data: [100, 40, 28, 51, 42, 109, 100] // Change this data
}];

const options = {
  chart: { 
    type: 'line',
    toolbar: { show: false }
  },
  colors: ['#6657C3'],
  stroke: { curve: 'smooth', width: 3 },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  theme: {
    mode: 'dark' // or 'light'
  }
};

<ReactApexChart 
  options={options} 
  series={series} 
  type="line" 
  height={350} 
/>

Data Source: Most chart data is set in the src/data/ folder or directly in the Component file. You need to update the series and options props of the chart.

13. Table Integration

TanStack Table is used for data tables throughout the application, which is very powerful and highly customizable for SaaS dashboards.

TanStack Table with shadcn/ui Example:

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

// Sample data
const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', plan: 'Pro', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', plan: 'Basic', status: 'Active' },
  { id: 3, name: 'Bob Johnson', email: '[email protected]', plan: 'Enterprise', status: 'Inactive' }
];

// Define columns
const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'User Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'plan', header: 'Subscription Plan' },
  { accessorKey: 'status', header: 'Status' }
];

// Initialize table
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel()
});

// Render table
<Table>
  <TableHeader>
    {table.getHeaderGroups().map(headerGroup => (
      <TableRow key={headerGroup.id}>
        {headerGroup.headers.map(header => (
          <TableHead key={header.id}>
            {flexRender(header.column.columnDef.header, header.getContext())}
          </TableHead>
        ))}
      </TableRow>
    ))}
  </TableHeader>
  <TableBody>
    {table.getRowModel().rows.map(row => (
      <TableRow key={row.id}>
        {row.getVisibleCells().map(cell => (
          <TableCell key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</Table>

Data Source: Table data is typically imported from JSON files in the src/data/ folder. Changing data in these files will update the Table.

Columns: Table Columns are set in the Component file. You can Add/Remove new Columns from here.

14. FAQ (Frequently Asked Questions)

15. Credits & Sources

List of all External Resources used in this template: