Getting Started

First of all, Thank you so much for purchasing this template and for being our valued customer. You are awesome! You are entitled to get free lifetime updates to this product and 6 months support from the CSS Ninja team directly. Xpulse is a product built by CSS Ninja.

This documentation has been written to help you regarding each step of setup and customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. HTML CSS, and Next.js / React framework knowledge is required to customize this template.

You are currently reading the Xpulse v1.1.0 documentation. The product uses:

• React (v18+)
• Next.js (v13+) pages router
• Typescript (v5+)
• Tailwind CSS (v3+)
• Fuse.js a powerful, lightweight fuzzy-search library.
• Apexcharts for creation of interactive, responsive charts and graphs.
• date-fns for date and time manipulation.
• Class Variance Authority for creating style variants.
• React Beautiful DnD for implementing drag-and-drop functionality in React applications.

What's inside the release?

The Xpulse release contains a single project:

• template: contains the full source code of the template which runs the https://xpulse.cssninja.io/ demo

release-xpulse-v1.1.0.zip
├── template-xpulse-v1.1.0.zip

TIP

You can also unlock your GitHub access to get the latest version of the template directly from GitHub.
https://cssninja.io/faq/github-access

Prerequisites

1. A good code editor
   VSCode settings are pre-configured
2. A supported web browser (Chrome, Edge, Firefox, ...)
3. Node.js LTS(> 16.15.x) installed
4. Familiarity with the command line
5. Knowledge with Typescript(> 5.x) (should not be installed globally)

Install Node.js

First, check if you already have Node.js and pnpm installed. To check if you have Node.js installed, run this command in your terminal:

node -v

If Node.js is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system:

Install Node.js on Windows, Linux or Mac OSX

TIP

You can also use Node Version Manager, or Volta.sh, to manage multiple Node.js versions on your machine.

Enable pnpm with corepack

We recommend pnpm, which can be enabled with:

corepack enable
corepack prepare pnpm@latest --activate

Corepack is a script that acts as a bridge between Node.js projects and the package managers they are intended to be used with during development.
In practical terms, Corepack will let you use Yarn and pnpm without having to install them - just like what currently happens with npm, which is shipped in Node.js by default.

TIP

Corepack is installed with Node.js from v16.9.x.
If your version is below, install it with: npm install -g corepack

Support

If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to post your request on our support at cssninja.io/faq/support

You can find the changelog here and inside the Xpulse source folder or you can check the changelog on the theme's sale page.

Once again, thank you so much for purchasing this theme. As I said at the beginning, we'd be glad to help you if you have any questions related to this theme. No guarantees, but we'll do our best to assist and support you. If you have a more general question relating to Xpulse, you might consider opening a ticket and ask your question in the CSS Ninja support portal.