Overview

Reach for this tab when you know what you want to build and need the exact import, props or return value. The Guide teaches the ideas; these pages are the lookup.

How the pieces relateCopy Anchor Link

Every page of a store is rendered by the engine inside one frame, the MasterLayout (see all 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 for the store, useTheme for colours and settings, useTranslation for text and direction, useMoney for prices, useProduct and useWishlist for live product and wishlist state.
2. Components draw the interface. Use the ready-made ProductCard, Image and Link as they are. Open dialogs and panels with Modal and Drawer, and show short messages with toast.
3. Slots let you add content without replacing a page. A HookSlot is a named spot in a page. useHook 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 is the helper for any button that runs an async action and needs a loading state.

Pick a pageCopy Anchor Link

ImportsCopy Anchor Link

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

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 nextCopy Anchor Link

• Hooks and slots and Layout and components explain when to use each piece.
• Recipes are short, goal-driven walkthroughs, such as adding content to a slot or replacing the product card.
• Routes lists the built-in storefront pages, one page per route.