# Overview (https://docs.salla.dev/twilight/react/engine)



Reach for this tab when you know what you want to build and need the exact import, props or return value. The [Guide](https://docs.salla.dev/twilight/react/start/what-is-a-theme) teaches the ideas; these pages are the lookup.

## How the pieces relate [#how-the-pieces-relate]

Every page of a store is rendered by the engine inside one frame, the [`MasterLayout`](https://docs.salla.dev/twilight/react/layouts/master-layout) (see all [layouts](https://docs.salla.dev/twilight/react/layouts)). Inside that frame you work with three kinds of building blocks.

1. **Hooks read data.** A hook is a function a component calls to get something: [`useStore`](https://docs.salla.dev/twilight/react/hooks/use-store) for the store, [`useTheme`](https://docs.salla.dev/twilight/react/hooks/use-theme) for colours and settings, [`useTranslation`](https://docs.salla.dev/twilight/react/hooks/use-translation) for text and direction, [`useMoney`](https://docs.salla.dev/twilight/react/hooks/use-money) for prices, [`useProduct`](https://docs.salla.dev/twilight/react/hooks/use-product) and [`useWishlist`](https://docs.salla.dev/twilight/react/hooks/use-wishlist) for live product and wishlist state.
2. **Components draw the interface.** Use the ready-made [`ProductCard`](https://docs.salla.dev/twilight/react/components/product-card), [`Image`](https://docs.salla.dev/twilight/react/components/image) and [`Link`](https://docs.salla.dev/twilight/react/components/link) as they are. Open dialogs and panels with [`Modal`](https://docs.salla.dev/twilight/react/components/modal) and [`Drawer`](https://docs.salla.dev/twilight/react/components/drawer), and show short messages with [`toast`](https://docs.salla.dev/twilight/react/components/toast).
3. **Slots let you add content without replacing a page.** A [`HookSlot`](https://docs.salla.dev/twilight/react/hooks/hook-slot) is a named spot in a page. [`useHook`](https://docs.salla.dev/twilight/react/hooks/use-hook) puts your content into that spot from anywhere in your theme.

A typical flow: a route loads a product, your component reads it with `useProduct`, shows the price with `useMoney`, links with `Link`, and a small `useHook` handler adds a shipping note under the add-to-cart form through the `product:single.description.end` slot.

[`useAsyncFn`](https://docs.salla.dev/twilight/react/hooks/use-async-fn) is the helper for any button that runs an async action and needs a loading state.

## Pick a page [#pick-a-page]

<Card title="Read store data" href="/hooks/use-store">
  `useStore`

  , 

  `useTheme`

  , 

  `useTranslation`

  , 

  `useMoney`

  .
</Card>

<Card title="Live product state" href="/hooks/use-product">
  `useProduct`

  , 

  `useWishlist`

  , 

  `useAsyncFn`

  .
</Card>

<Card title="Add content to a page" href="/hooks/hook-slot">
  `HookSlot`

   and 

  `useHook`

  .
</Card>

<Card title="Show a product" href="/components/product-card">
  `ProductCard`

  , 

  `Image`

  , 

  `Link`

  .
</Card>

<Card title="Dialogs and messages" href="/components/modal">
  `Modal`

  , 

  `Drawer`

  , 

  `toast`

  .
</Card>

<Card title="Slots" href="/slots">
  Every spot where you can add content, per page.
</Card>

<Card title="Page frames" href="/layouts">
  `MasterLayout`

  , 

  `CustomerLayout`

  , header and footer: what you get and how to replace it.
</Card>

## Imports [#imports]

Each hook and component has its own import path, so you only bundle what you use. Every page starts from the import, for example:

```tsx
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';
import { Link } from '@salla.sa/twilight-theme-engine/common';
```

Hooks and components work inside the engine's provider, which your root route already sets up.

## Where to go next [#where-to-go-next]

* [Hooks and slots](https://docs.salla.dev/twilight/react/guide/hooks-and-slots) and [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components) explain when to use each piece.
* [Recipes](https://docs.salla.dev/twilight/react/recipes) are short, goal-driven walkthroughs, such as [adding content to a slot](https://docs.salla.dev/twilight/react/recipes/add-content-to-a-slot) or [replacing the product card](https://docs.salla.dev/twilight/react/recipes/replace-the-product-card).
* [Routes](https://docs.salla.dev/twilight/react/routes) lists the built-in storefront pages, one page per route.