Cleaning your project

In the previous section, you learned how to install Xpulse, to setup your IDE, and to enable the layout you've selected for your project. Like any template project, Xpulse ships with a lot of files that you may not need. You will therefore need to clean the project before starting your own development. Here is a list of instructions to follow to start from a clean base. In the upcoming chapters, we will cover each of these steps in detail and review the template structure in details, so you know what you are doing when removing stuff.

my-project/
├── public                  # Static files (images, favicon.ico, manifest.json, etc.)
├── src
│   ├── app                 # API routes
│   ├── components          # Reusable UI components
│   ├── context             # Shared state management (e.g., menu, layout, dashboard)
│   ├── data                # Sample data used in components and pages
│   ├── documentation       # Examples and samples used in documentation pages
│   ├── hooks               # Custom hooks and reusable logic/functions
│   ├── layouts             # Layout components for different sections of the site
│   ├── pages               # Route components (each file represents a route)
│   ├── styles              # CSS styles and font files
│   ├── types.ts            # Project-wide TypeScript types/interfaces
│   └── utils               # Utility functions and helpers (e.g., loading fonts, string manipulation)

App

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.

├── app
│   ├── api

The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior. Since Xpulse is a template, we don't have any API routes in there. We only have a demo handler used by the uploader component, in src/app/api/upload.ts. You can safely delete the src/app folder if you don't need it.

Components

Xpulse ships with a lot of components. You will probably not need all of them, but if you do, you can simply skip this section. Before defining what can be deleted or not, let's review the structure of the src/components folder.

├── components
│   ├── charts
│   ├── documentation
│   ├── elements
│   ├── layouts
│   ├── pages
│   ├── vector
│   ├── video
│   ├── widgets

Charts

The src/components/charts folder contains the chart components. You can safely delete this folder if you don't need charts in your project. Even if you need charts, we recommend deleting its contents and bring in the charts you need one by one, so you don't keep unused components inside your project.

Documentation

The src/components/documentation folder contains the documentation layout components. You can safely delete this folder since the documentation in Xpulse is solely present for demonstration purposes.

Elements

├── elements
│   ├── addons
│   ├── base
│   ├── form
│   ├── variants

The src/components/elements folder contains all basic components, that act as building blocks for the rest of the template. You will probably need most of them, therefore we do not recommend deleting any of those until you are done with your development. If you notice some are unused, you can safely delete them.

Addons

The src/components/elements/addons folder contains the addons components. Everything in this folder is somehow related to a plugin or an external library, like react-video-player or react-swiper for instance. Depending on whether you are going to use these libraries or not, it's up to you to decide what to remove in here.

Base

The src/components/elements/base folder contains the base components. These are the most basic components, like buttons, cards, etc. You will probably need most of them, therefore we do not recommend deleting any of those until you are done with your development.

Form

The src/components/elements/form folder contains the form components, like inputs, selects, checkboxes and radios etc... You will probably need most of them, therefore we do not recommend deleting any of those until you are done with your development.

Variants

The src/components/elements/variants folder contains the declarative files for component variants. Some components have complex styles that rely on conditions to be applied. To simplify the code, we've moved these conditions to separate files, using the Class Variance Authority (CVA) external library. You should never delete this folder or a lot of components might break.

Layouts

├── layouts
│   ├── sidebar-collapse
│   ├── sidebar-panel-float
│   ├── sidebar-panel
│   ├── sideblock
│   ├── sidedock
│   ├── LayoutSwitcher.tsx
│   ├── SidebarIcon.tsx
│   ├── styles.ts

Xpulse features 6 master layouts to chose from. You will probably

only need one of them. You can remove the layouts you don't need by deleting the corresponding files in the src/components/layouts folder. For instance, if you've selected the sidebar-panel layout you will have to delete all other folders inside the src/components/layouts. We've covered this in the previous section of this documentation.

WARNING

Do not delete the styles.ts file as it is required by layouts to inject some specific styles.

Pages

├── pages
│   ├── **/*.tsx

The src/components/pages folder contains the components used in specific pages. They are usually more complex and are often using multiple basic components. Since you'll be deleting all the demo pages to start from a clean base, you should probably delete all the files and directories in this folder as well. It is better to reintroduce them one by one as you need them.

Vector

```bash
├── vector
│   ├── Logo.tsx
│   ├── LogoText.tsx

The src/components/vector folder contains the Xpulse Logo and LogoText components. You should never delete this folder at risk of breaking the template. Instead replace the contents of the files with your own logo svg code or by a png image.

Widgets

```bash
├── widgets
│   ├── *.tsx

The src/components/widgets folder contains widgets used in specific pages. They are usually more complex and are often using multiple basic components. Since you'll be deleting all the demo pages to start from a clean base, you should probably delete all the files and directories in this folder as well. It is better to reintroduce them one by one as you need them.

Context

├── app
│   ├── DashboardContext.tsx
│   ├── LayoutContext.tsx
│   ├── MailboxContext.tsx
│   ├── MenuContext.tsx

The src/context folder contains the shared state management. It is mostly used to control how the layout navigation behaves and how the state is shared between key layout components. You should never delete this folder at risk of breaking layouts.

Data

├── data
│   ├── charts
│   ├── constants
│   ├── documentation
│   ├── *.tsx

The src/data folder contains the sample data used in components and pages. You can safely delete this folder if you don't need sample data in your project. However, make sure you don't delete the constants folder, as it is used by the sidebar-panel and the sidebar-panel-float layouts. If you are not using one of those two, you can safely delete the constants folder as well.

Documentation

├── documentation
│   ├── elements

The src/documentation folder contains the examples and samples used in documentation pages. You can safely delete this folder since you won't need to display Xpulse documentation pages in your project.

Hooks

├── hooks
│   ├── useOnClickOutside.tsx
│   ├── usePagination.tsx
│   ├── useScroll.tsx
│   ├── useSearch.tsx
│   ├── useTheme.tsx

The src/hooks folder contains the custom hooks and reusable logic/functions. The custom hooks defined in this folder, like the click outside handler or the dark mode management, are used in the src/components folder. You should never delete this folder at risk of breaking components.

Layouts

Xpulse features 6 master layouts to chose from. You will probably

only need one of them. You can remove the layouts you don't need by deleting the corresponding files in the src/components/layouts folder. For instance, if you've selected the sidebar-panel layout you will have to delete all other folders inside the src/components/layouts. We've covered this in the previous section of this documentation.

Pages

The src/pages folder contains the page components. Each file represents a route. Since you are starting from a clean base, you can safely delete almost all the files in this folder, beside _app.tsx, _document.tsx and 404.tsx. Make sure to remove the src/pages/documentation folder as it contains all the documentation pages. You can choose to keep or delete the src/pages/api folder depending on your usage it (Xpulse demo search feature uses it).

You can then create a new index.tsx file to start from scratch, like the example below:

import React from 'react'
import Layout from '@/layouts/Default'

const MyNewPage = () => {
  return (
    <Layout title="My New Page" color="muted">
      <main>
        <h1>My New Page</h1>
      </main>
    </Layout>
  )
}

export default MyNewPage

You've now successfully cleaned the pages folder and have a new index page to start from.

Styles

├── styles
│   ├── addons
│   │   ├── apexcharts.css
│   │   ├── base.css
│   │   ├── editor.css
│   │   ├── gridlines.css
│   │   ├── loader.css
│   │   ├── playbars.css
│   │   ├── tooltip.css
│   ├── globals.css

The src/styles folder contains additional and optional CSS styles. Those additional styles are imported into the main file, which is globals.css. The main CSS file should never be deleted. You should simply remove the imports of the files you don't need. Here is the content of the globals.css file:

@import './addons/base.css';
@import './addons/loader.css';
@import './addons/apexcharts.css';
@import './addons/tooltip.css';
@import './addons/editor.css';
@import './addons/gridlines.css';
@import './addons/playbars.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

base

The src/styles/addons/base.css file contains the base styles for the template body. You should never delete this file at risk of breaking some features.

loader

The src/styles/addons/loader.css file contains the styles for the loader component. You should not remove this file or the import in the main CSS file at the risk of breaking some components.

apexcharts

The src/styles/addons/apexcharts.css file contains dark mode styles for the apexcharts component. You can remove this file and its import in the main CSS file if you don't need charts in your project.

tooltip

The src/styles/addons/tooltip.css file contains the styles for the tooltip component. You can remove this file and its import in the main CSS file if you don't need the tooltip component in your project.

editor

The src/styles/addons/editor.css file contains the styles for the code editor component used in the documentation example. You can remove this file and its import in the main CSS file if you won't have the documentation pages in your project.

gridlines

The src/styles/addons/gridlines.css file contains the styles for the gridlines aesthetic effect. You can remove this file and its import in the main CSS file if you don't need the gridlines effect in your project.

playbars

The src/styles/addons/playbars.css file contains the styles for the audio library playbars animation. You can remove this file and its import in the main CSS file if you don't need the playbars effect in your project.

Utils & Types

The src/utils folder contains a few utility functions and are in charge of loading the main font. You should never delete this folder at risk of breaking some components. Use it instead to configure your own fonts.

Public Files

my-project/
├── public  # Static files

The public folder contains the static files of your project. It contains diverse assets used by the project demo, like illustrations, icons, and images. Explore the contents of the folder and decide what you will need in your project. You can safely delete the files you don't need.

By now, you should have a clean base to start from. In the next section, we will cover the template customization.