Account and loyalty

Customer accounts, wishlists, gift cards and rewards.

4 components · 19 variants

Switch category

On this page

Every component of this category. Pick one to jump to its variants.

Customer account5
Loyalty program5
Wishlist5
Gift cards4

customer-account

Customer account

The account of a shop. A start page with the latest order on its way, the address book, saved ways to pay with a live card preview, the account frame with its menu and order tracking without an account.

Account overview
Address book
Payment methods
Account frame
Order lookup

Props and details

Account overview

Hello by name, the latest order with a track that fills to its stage, points that count up with a bar to the next reward and shortcuts with counts that rise in turn and light their icon on hover.

Installv1.0.0

aiw add @ai-website/customer-account

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="overview" customer={{ name, since, points, nextReward }} order={order} shortcuts={[{ icon, label, count, href }]} />

Source

Address book

Address cards with default badges that move when another address becomes the default. Removing asks once more in place, a new address is entered in a card that zooms in and pops into the list when saved.

Installv1.0.0

aiw add @ai-website/customer-account

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="addresses" addresses={[{ id, label, name, lines, phone, defaultShipping, defaultBilling }]} />

Source

Payment methods

Saved ways to pay as drawn cards that lift and tilt on hover, without network logos. A card that expires soon says so, "Add a card" opens a form with a live preview that fills as you type and turns to its back for the security code.

Installv1.0.0

aiw add @ai-website/customer-account

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="payment-methods" methods={[{ id, kind: "card", label, last4, holder, expires, tone, isDefault }]} />

Source

Account frame

The frame around every account page. On desktop a side menu with counts and a marker that slides to the open page, on phones and tablets a row of tabs with a sliding pill that scrolls the open tab to the middle. The page runs in on every switch.

Installv1.0.0

aiw add @ai-website/customer-account

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="layout" customer={{ name, since }} nav={[{ id, label, icon, count, content: <Orders /> }]} />

Source

Order lookup

Tracking without an account. Order number and email in, a short search, then the order zooms in with its stage, the track and the items. A wrong pair shakes the form and says where to find both.

Installv1.0.0

aiw add @ai-website/customer-account

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="order-lookup" order={order} />

Source

loyalty

Loyalty program

A loyalty program as sections. The levels and their benefits, ways to earn points, rewards to redeem, the member card with progress and activity, and a referral with a link to share.

Levels
Ways to earn
Rewards
Member card
Refer a friend

Props and details

Levels

Four levels side by side with rate and benefits. A line above fills while scrolling up to where the member stands, the current level glows in the accent and reached levels tick their benefits.

Installv1.0.1

aiw add @ai-website/loyalty

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="tiers" tiers={[{ id, name, from, rate, perks }]} member={{ name, points }} />

Source

Ways to earn

Ways to earn points as tiles with their points. The icon tilts on hover, a tap earns the points, turns the tile green with a check and lets the total in the corner roll up.

Installv1.0.1

aiw add @ai-website/loyalty

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="earn" ways={[{ id, icon, title, text, points, action, done }]} />

Source

Rewards

Rewards with their point price. Rewards out of reach show a bar of how far there is to go, redeeming one rolls the balance down with a "-500" that rises from it, and the card turns to "Redeemed".

Installv1.0.1

aiw add @ai-website/loyalty

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="rewards" member={{ points }} rewards={[{ id, title, text, cost, icon, image }]} onRedeem={…} />

Source

Member card

The member card on a dark surface with a ring that draws to the next level while the points count up, next to the latest activity with earned and spent points.

Installv1.0.1

aiw add @ai-website/loyalty

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="status" program="Nordhaus Circle" tiers={tiers} member={{ name, points, number, since }} activity={[{ date, text, points }]} />

Source

Refer a friend

What both get as two cards, a link that selects itself and copies with a check, sharing by email, three steps joined by a dashed line and the friends who already joined, each with their state.

Installv1.0.1

aiw add @ai-website/loyalty

Brings along utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="referral" referral={{ link, youGet, theyGet, friends: [{ name, status, points }] }} />

Source

wishlist

Wishlist

Saved products as a grid or list, several named lists, a list friends reserve gifts from and price alerts with a price history.

Props and details

Grid

Saved products as cards with price drops since saving, stock and move to cart with a rising +1. The heart removes a card and leaves an undo that runs out, "Add all" fills the cart in one go.

Installv1.0.0

aiw add @ai-website/wishlist

Brings along utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="grid" title="Wishlist" items={[{ id, name, price, savedPrice, stock, image }]} onMoveToCart={…} />

Source

List with summary

Rows with options, stock, the date saved and a back-in-stock alert for sold out items. Sorting lets the rows run in again, the summary beside them counts the total and the price drops and adds everything at once.

Installv1.0.0

aiw add @ai-website/wishlist

Brings along utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="list" items={items} onMoveToCart={…} onRemove={…} />

Source

Lists

Several named lists as collages, private or shared. The collage zooms on hover, cards rise in turn, and a new list is named in place and pops in first.

Installv1.0.0

aiw add @ai-website/wishlist

Brings along utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="boards" boards={[{ id, name, count, shared, images }]} onCreateBoard={(name) => …} />

Source

Shared gift list

The list a friend opens from a link. A countdown to the day, a bar that fills with every reservation, notes from the owner and a reserve button that turns into a sticker. Nobody sees who reserved what.

Installv1.0.0

aiw add @ai-website/wishlist

Brings along utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="shared" owner={{ name, occasion, date, days, message }} items={[{ …, reserved, note }]} onReserve={…} />

Source

Price alerts

A wished price per product with a twelve week price line that draws itself and the wished price as a dashed line. Plus and minus move the line, a reached price lights the card and turns the action into "Buy now".

Installv1.0.0

aiw add @ai-website/wishlist

Brings along utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="price-watch" items={[{ id, name, price, target, history: [249, 239, …] }]} onAlert={(item, target) => …} />

Source

gift-cards

Gift cards

Gift cards to design and send, ready cards by occasion, a balance check and the code field in the cart. The card motifs are drawn, your own artwork goes in their place.

Gift card designer
Ready gift cards
Check balance
Redeem in the cart

Props and details

Gift card designer

Design, amount, message and date. The card zooms in with every new design, tilts toward the pointer with a passing gloss, writes name and message along and rolls to the new amount, the total counts with it.

Installv1.0.1

aiw add @ai-website/gift-cards

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<GiftCards variant="designer" brand="Nordhaus" designs={[{ id, name, motif, from, to }]} amounts={[25, 50, 100]} range={[10, 500]} onBuy={…} />

Source

Ready gift cards

Ready cards by occasion and amount in a row. Cards rise one after another, tilt toward the pointer with a gloss that runs across, and the button swaps to "In your cart" with a check.

Installv1.0.1

aiw add @ai-website/gift-cards

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<GiftCards variant="amounts" brand="Nordhaus" designs={designs} offers={[{ id, amount, occasion, designId, note }]} />

Source

Check balance

The code formats itself in groups of four. A short check, then a ring draws to what is left and the history of the card runs in. An unknown code shakes the field and says where the code stands.

Installv1.0.1

aiw add @ai-website/gift-cards

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<GiftCards variant="balance" balance={{ code, amount, initial, expires, history }} />

Source

Redeem in the cart

The gift card field of the cart summary opens with a soft height. A valid code pops in as a line, the total counts down and the rest that stays on the card fades in. A wrong code shakes and says what to check.

Installv1.0.1

aiw add @ai-website/gift-cards

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<GiftCards variant="redeem" cart={{ subtotal, shipping, validCode, codeValue }} />

Source

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Account and loyalty on a page.

Copied to the clipboard