Seed

Get started with Seed

Seed is the real seed for any new react project. If you think that you know react very well, a seed is a perfect version for you. Seed is a folder structure created using Vite with minimal files from the full version to get started. All the unused dependencies are removed from package.json unlike the skeleton version, it does not have the package same as full-version. All the unused files and references were removed like routes, sections, context, API, data, etc. You can check the difference between skeleton and seed on to next page. The seed version is created for those who just want a theme and then wanted to implement their own things.

The Seed 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. Go to full-version, find out component and copy that component from full-version to skeleton. That's it.

import React from 'react';
import { Row, Col, Card } from 'react-bootstrap';

const SamplePage = () => {
  return (
    <React.Fragment>
      <Row>
        <Col xl={6} xxl={4}>
           <Card className="widget-focus">
            <Card.Body>
              <h6 className="mb-4">Daily Sales</h6>
              <div className="row d-flex align-items-center">
                <div className="col-9">
                  <h3 className="f-w-300 d-flex align-items-center m-b-0">
                    <i className="feather icon-arrow-up text-c-green f-30 m-r-5" /> $249.95
                  </h3>
                </div>

                <div className="col-3 text-end">
                  <p className="m-b-0">50%</p>
                </div>
              </div>
              <div className="progress m-t-30" style={{ height: '7px' }}>
                <div
                  className="progress-bar progress-c-theme"
                  role="progressbar"
                  style={{ width: '50%' }}
                  aria-valuenow="50"
                  aria-valuemin="0"
                  aria-valuemax="100"
                />
              </div>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </React.Fragment>
  );
};

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 Datta Able template and how to integrate it for your new project.