> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hana.leafphp.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Let's build an amazing app in just 2 minutes

<Info>
  **Prerequisites**:

  * Node.js version 18 or higher
  * Anywhere Vite can run
</Info>

Hana is built by design to be simple to integrate into any project. At it's core, Hana is just a simple Vite and React setup, and we've got a superfast way to get you set up using your favourite package manager.

<Steps>
  <Step title="Run the setup tool">
    ```bash theme={"theme":"ayu-dark"}
    npm create hana-app@latest # for npm users
    yarn create hana-app@latest # for yarn users
    pnpm create hana-app@latest # for pnpm users
    ```

    This will walk you through a series of prompts to help set up your project
  </Step>

  <Step title="Preview locally">
    Navigate to the generated project, and start the vite server:

    ```bash theme={"theme":"ayu-dark"}
    npm run dev
    ```

    A local preview of your documentation will be available at `http://localhost:3000`.
  </Step>
</Steps>

## Install in existing Vite app

If you already have a React app running through Vite, Hana's modular approach allows you to pick any piece, and install it into your app for a gradual adoption experience.

<Steps>
  <Step title="Find the module to install">
    ```bash theme={"theme":"ayu-dark"}
    pnpm install @hanabira/<module>
    ```

    Every Hana module can be installed as a standalone package, so just head over to the documentation for the functionality you need and run the install script
  </Step>

  <Step title="Follow the install guide">
    Most Hana modules can be used right on install, but if you need to do any config, you can follow the config guide tied to the module you want to use. For example, we can set default values and save our global state to sessionStorage

    ```typescript theme={"theme":"ayu-dark"}
    import { createStore, PersistedState } from '@hanabira/store';

    createStore({
        state: {
    		updated: false
    	},
        plugins: [
            new PersistedState({
                storage: window.sessionStorage,
                exclude: ['rates'],
            }),
        ],
    });
    ```

    Every module will include its own config/setup guide
  </Step>
</Steps>

## Next steps

Now that you have your application running, explore these key features:

<Columns cols={2}>
  <Card title="Hana Store" icon="atom" href="/store/index">
    Set up a global store in your application for easy access to data from any component
  </Card>

  <Card title="File Router" icon="file" href="/router/index">
    Take advantage of file-based routing powered by React Router with no setup
  </Card>

  <Card title="Hana Auth" icon="users" href="/auth/index">
    Let Hana take care of the annoying parts of authentication like middleware & config
  </Card>

  <Card title="Everyday Utils" icon="terminal" href="/utils/index">
    Install Hana Utils for access to everyday features like caching & data fetching
  </Card>
</Columns>

<Note>
  **Need help?** Join our [community](https://discord.gg/Pkrm9NJPE3) to receive help from existing users
</Note>