# Overview (https://docs.salla.dev/twilight/react/start/what-is-a-theme)



Read this first if you have never built a Salla theme.

A Salla React theme is a small web project that decides how one store looks. The server renders your theme into HTML, then the browser takes over so the page feels like an app.

You do not build a storefront from zero. A theme sits on top of the **theme engine**, the package `@salla.sa/twilight-theme-engine`. The engine ships a complete, working store. Your theme only describes what is different.

## React in one paragraph [#react-in-one-paragraph]

[React](https://react.dev) builds pages out of **components**: functions that return a piece of the page, such as a product card. A component receives **props**, its inputs. A **hook** is a function whose name starts with `use` that a component calls to get something, such as the current cart. Pages render on the server first (**SSR**, server-side rendering), so customers and search engines get real HTML immediately.

## What the engine does for you [#what-the-engine-does-for-you]

* Routing: product, category, cart, blog, account and the other store URLs already exist. See [Routes](https://docs.salla.dev/twilight/react/routes).
* Data: each page loads its products, categories and settings from Salla through the [API client](https://docs.salla.dev/twilight/react/api).
* Translations and direction: Arabic and English, left-to-right and right-to-left.
* The `Salla` browser SDK, the cart, login and other store behavior.
* Server rendering and the build setup.

## What you own [#what-you-own]

* **Look and feel**: layout, header, footer, colors, fonts. See [Styling](https://docs.salla.dev/twilight/react/guide/styling).
* **Components**: swap any built-in block or card for your own. See [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components).
* **Pages**: replace a page, or add a new one. See [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages).
* **Extra UI**: add pieces into marked spots on existing pages. See [Hooks and slots](https://docs.salla.dev/twilight/react/guide/hooks-and-slots).
* **Merchant settings**: the options merchants can change in the dashboard. See [Settings](https://docs.salla.dev/twilight/react/guide/settings).
* **Wording**: override translations. See [Languages and RTL](https://docs.salla.dev/twilight/react/guide/languages-and-rtl).

<Callout>
  Reach for the smallest change first: a setting, then a hook, then a component, and only then a whole page. The smaller the change, the less you maintain when the engine improves.
</Callout>

## Find your way around [#find-your-way-around]

The top bar has six sections:

<Card title="Guide" href="/start/quick-start">
  The path you are on: your first running theme, then routes, data, components, styling, languages and settings.
</Card>

<Card title="Engine" href="/engine">
  Layouts, hooks and components, one page each.
</Card>

<Card title="Routes" href="/routes">
  Every built-in storefront page, with its URLs, data and route file.
</Card>

<Card title="APIs" href="/api">
  The store API client and its modules.
</Card>

<Card title="Local development" href="/local-development">
  Create, run, link a store and publish with the Salla CLI.
</Card>

<Card title="Recipes" href="/recipes">
  Short answers to common tasks.
</Card>

## Next [#next]

Check which [frameworks](https://docs.salla.dev/twilight/react/start/frameworks) a theme can run on, then build one in the [Quick start](https://docs.salla.dev/twilight/react/start/quick-start).