Skeleton

Get started with Skeleton

If you have a purchased theme, it already comes with a skeleton structure, so that you can start directly from there. Skeleton is a folder structure created using react-script with minimal files from the full version to get started. It has all the dependencies preloaded in package.json so you do not need to add any additional dependency unless needed from your side. It has a sample page to get started; With that, Routes, menus, styles, configuration, and many other things have already been set into that which saves no. of hours to set up a new project. Isn't it cool and time-savvy?

The Skeleton version is only available after you purchase a theme.

So when you run the project using yarn/npm, you will see a minimal site like below:

It provides you with a very simple and intuitive structure to get started with a new project. You can add new components from the full version. Now let's see how can we do that.

Add components into the skeleton/new project

Now, let's add some cool components from the full version to the project which we just created. It will help you to craft your pages as per your need. So Let's begin:

Consider a scenario where you want to add Total Users widget (Left card on the analytics dashboard) from the full version to the sample page. For that, we need to do the following things in order.

1. Copy the following code and replace it with sample-page

2. You will see there will be an import error for UsersCardChart, so you need to go to full-version, find out component and copy that component from full-version to skeleton. That's it.

// material-ui
import { Grid } from '@mui/material';
import AnalyticsDataCard from 'components/cards/statistics/AnalyticsDataCard';

// project import
import UsersCardChart from 'sections/UsersCardChart';

// ==============================|| SAMPLE PAGE ||============================== //

const SamplePage = () => (
  <Grid container rowSpacing={4.5} columnSpacing={3}>
    <Grid item xs={12} sm={6} md={4} lg={3}>
      <AnalyticsDataCard title="Total Users" count="78,250" percentage={70.5}>
        <UsersCardChart />
      </AnalyticsDataCard>
    </Grid>
  </Grid>
);

export default SamplePage;

It will output as follows:

Cool and straightforward, right?

You can do the same for other components and design your pages as per your needs. We have made common and reusable controls as well which you can see inside /src/components. Feel free to refer to those as well and start developing your page.

I hope, we cover some basics to get started with the Mantis template and how to integrate it for your new project.