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 seed version, it does not have the same package as the 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 want a theme and then want to implement their 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 we can do that.

Add components to the seed /new project.

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

Consider a scenario where you want to add Total Users a 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. Please copy the following code and replace it with the sample page

2. Go to the full version, find out the component, and copy that component from the full version to the seed. That's it.

// react-bootstrap
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Stack from 'react-bootstrap/Stack';

// project-imports
import MainCard from 'components/MainCard';

// ==============================|| OTHER - SAMPLE PAGE ||============================== //

export default function SamplePage() {
  return (
    <Row>
      <Col xl={4} md={6}>
        <MainCard>
          <Stack className="gap-4">
            <h6 className="mb-0">Daily Sales</h6>
            <Stack direction="horizontal" className="justify-content-between align-items-center">
              <Stack direction="horizontal" className="mb-0">
                <i className={`ph ph-arrow-up text-success f-30 m-r-10`} />
                <h3 className="f-w-300 mb-0">$ 249.95</h3>
              </Stack>
              <p className="mb-0">67%</p>
            </Stack>
            <ProgressBar className="m-t-5">
              <ProgressBar now={67} className="bg-brand-color-1" />
            </ProgressBar>
          </Stack>
        </MainCard>
      </Col>
    </Row>
  );
}

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.