Account slots
Every slot on the customer account pages, where it renders, and what context it passes.
Use account slots when you want to add a banner, a loyalty block or a custom section to the profile, orders, wallet, wishlist or notifications pages without replacing them. For how useHook, priority, fallback and cleanup work, see Slots and Page frame slots.
All account pages render inside CustomerLayout, so the account menu and page title come from the layout and sit outside every slot below.
Framework: TanStack Start
These slots are rendered by the engine's TanStack Start routes.
Context
None of the account slots pass their own context. Every handler receives only twilight (store, theme and more). Read order, wallet or wishlist data from your own hooks or loaders, not from the slot.
Profile
Route: Profile.
customer:profile.startcustomer:profile.form.startcustomer:profile.form.endcustomer:profile.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:profile.start | First thing on the page, above the form. | twilight | Always rendered. |
customer:profile.form.start | Directly above the profile form. | twilight | Always rendered. |
customer:profile.form.end | Directly below the profile form, above the verification block. | twilight | Always rendered. |
customer:profile.end | Last thing on the page, below the notification settings. | twilight | Always rendered. |
Settings
Route: Settings.
customer:settings.startcustomer:settings.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:settings.start | Above the settings component. | twilight | Always rendered. |
customer:settings.end | Below the settings component. | twilight | Always rendered. |
The profile page also shows the user settings component, but it does not render the customer:settings.* slots. Use the profile slots there.
Notifications
Route: Notifications.
customer:notifications.items.startalso when emptycustomer:notifications.items.endalso when empty| Slot | Position | Context | Notes |
|---|---|---|---|
customer:notifications.items.start | Above the notification list. | twilight | Rendered even when there are no notifications. |
customer:notifications.items.end | Below the notification list. | twilight | Rendered even when there are no notifications. |
Orders list
Route: Orders.
customer:orders.index.items.startcustomer:orders.index.items.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:orders.index.items.start | Above the status filters and the table. | twilight | Rendered even when the customer has no orders. |
customer:orders.index.items.end | Below the table (or the empty state). | twilight | Rendered even when the customer has no orders. |
Single order
Route: Order.
customer:orders.single.details.startcustomer:orders.single.details.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:orders.single.details.start | First thing in the order content, above the gift tag and the order details table. | twilight | Always rendered. |
customer:orders.single.details.end | After the last order section (details, shipping, payment and rating blocks), before the modals. | twilight | Always rendered. Modals render outside the slot. |
Wallet
Route: Wallet.
With transactions:
customer:wallet.transactions.startcustomer:wallet.transactions.endWith no transactions:
customer:wallet.transactions.startcustomer:wallet.transactions.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:wallet.transactions.start | Top of the page, above the balance card (or above the empty state). | twilight | Always rendered. |
customer:wallet.transactions.end | Below the transactions table (or below the empty state). | twilight | Always rendered. |
The wallet page renders each slot in two places because it has two layouts: the empty state when the customer has no transactions, and the balance plus table otherwise. Exactly one of them is on screen, so a handler never shows twice. The empty state has no balance card.
Wishlist
Route: Wishlist.
customer:wishlist.items.startProduct list or empty state
customer:wishlist.items.end| Slot | Position | Context | Notes |
|---|---|---|---|
customer:wishlist.items.start | Above the share bar and the product list. | twilight | Rendered even when the wishlist is empty. |
customer:wishlist.items.end | Below the product list (or empty state). | twilight | Rendered even when the wishlist is empty. |
Example
Show a banner above the customer's orders. Render the component once under your layout, as described in useHook.
import { useHook } from '@salla.sa/twilight-theme-engine/hooks/useHook';
export function OrdersBanner() {
useHook('customer:orders.index.items.start', () => (
<p className="mb-4 rounded bg-yellow-50 p-3 text-sm">
Need help with an order? Contact support and quote the order number.
</p>
));
return null;
}The banner also shows when the customer has no orders, because the slot sits above the empty state.
Next
- Slots explains how registration, priority and fallback work.
useHookis the API used above.- Blog slots covers the blog pages.