> ## 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.

# Hana: React without overengineering

> The modern web is unnecessarily complex, everything is over-engineered

Everything from wrestling with SSR and server components to annoying hydration quirks and config wars. Devs from all over the world see these patterns as a burden, not a feature.

> “React has evolved … into a sprawling ecosystem thought to hinder performance.”\
> — from blog *JavaScript Fatigue Strikes Back*

If your goal is to build front ends fast and ship UI, not infrastructure, Hana was made for you

<img src="https://mintcdn.com/selll/E3cLASrFGCwjNCyK/images/image.png?fit=max&auto=format&n=E3cLASrFGCwjNCyK&q=85&s=b7a0d779179bb03847b5440e107fbef1" alt="image.png" width="2065" height="1105" data-path="images/image.png" />

## What Hana gives you **out of the box**

Hana gives you:

* A **built-in router** with file-based conventions
* A **global state system** that’s simple and flexible
* **Auth / session helpers** out of the box
* **Zero config**, low friction (powered by Vite)
* **Modular adoption** let's you use just the router, the store, auth, or all of them

```tsx theme={"theme":"ayu-dark"}
import { Link } from '@hanabira/router';
import { useStore } from '@hanabira/store';
import { withAuthState } from '@hanabira/auth';

const Dashboard = ({ user, logout }) => {
  const [item, setItem] = useStore<SpecialString>('item');

  return (
    <div>
		<Link to="/about">About</Link>
		<p>Hello, {user.name}</p>
		<button onClick={() => setItem('New value')}>Set item</button>
   		<button onClick={logout}>Logout</button>
    </div>
  );
};

export default withAuthState(Dashboard);
```

Think of Hanabira as: React + routing + state + auth. The very basics, no overreach. What's more, you can incrementally add or remove pieces of Hana on demand, so there's no need to cram the whole framework

<Card title="Ready to build?" icon="rocket" horizontal href="/quickstart">
  Let's generate your first app in just 2 minutes
</Card>

## Already have a vite app?

If you already have a React app running on Vite, you can incrementally adopt Hana's modules into your app. This gives you the flexibility to keep your app working as-is, while slowly switching to all the goodies Hana gives you.

<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>

## What Hana *doesn't* do (by design)

Hana may not be as powerful as other meta-frameworks like Next, but it doesn't have to be. We carefully crafted Hana, avoiding all the chaos of the modern web out of the box

* **No SSR / SSG** because we believe client rendering is sufficient for many apps
* **No server components / hybrid rendering** so you control when to fetch / render
* **No hidden abstractions / magic** which means everything is explicit, understandable

Hana has worked for us and businesses serving **2M+ customers**, so let's **stop overengineering**, and start **shipping UI** 💜