Commerce block

Return Label and Instructions

The screen between approved and posted: three drop-off methods with the thing that actually blocks each one, the packing rules that get returns refused, and a date rather than a duration.

285 lineslucide-reactAdded 13 Sept 2026

returns
label
shipping
instructions
after-sale

What's included

components/return-label-instructions.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add return-label-instructions

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Send it back

Return RTN-4471-9082 · 1 parcel · up to 20 kg · 60 × 60 × 60 cm

Must be posted by Tuesday 30 September 2026

Or quote
RTN-4471-9082

How do you want to send it?

Drop off, no printerYou need a phone with you at the counter

Print the label yourselfYou need a printer and something to attach the label with

Collection from your addressSomeone must be in between 08:00 and 18:00

Drop off, no printer — what to do

Pack the item — see the rules below.
Take the parcel and this QR code to any of the 4,100 drop-off points.
The shop scans the code and prints the label onto your parcel.
Keep the receipt. It is the proof of posting and the only thing that settles a lost-parcel claim.

Pack it like this

Original box and internal packaging, if you still have them.
Every accessory that came with it — cables, allen keys, the manual.
Nothing written on the product box itself. Put it inside an outer carton.
One return per parcel. Two references in one box cannot be checked in.

Nearest drop-off points

Kade Convenience, Weena 212Open until 22:00 · 0.4 km
PostPoint Central StationOpen until 20:00 · 1.1 km
Blaak Locker Bank24 hours · 1.6 km · parcels under 40 cm

Posted after Tuesday 30 September 2026 and the return is refused at the depot and sent back to you. Nothing is charged, but nothing is refunded either.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/return-label-instructions.tsx

'use client'

/**
 * <ReturnLabelInstructions> — the screen between "approved" and "posted".
 *
 * Returns fail in the gap after approval. The customer has a reference number,
 * a vague memory of a QR code in an email, and a box in the hall for eleven
 * days. Every one of those days is a support contact waiting to happen and a
 * refund the retailer has not been able to close.
 *
 * SO THE BLOCK IS A SET OF INSTRUCTIONS, NOT A LABEL DOWNLOAD
 *
 * Three drop-off methods, each with the thing that actually blocks it stated
 * up front: printerless needs a QR code the shop scans, home collection needs
 * someone in, a locker needs the parcel to fit. Choosing the method changes
 * the steps, because "print the label" and "show the QR code at the counter"
 * are not the same list with one line swapped.
 *
 * THE PACKING RULES ARE PART OF THE INSTRUCTIONS
 *
 * Most rejected returns are rejected on arrival for a reason listed here and
 * nowhere the customer saw: original packaging kept, accessories included,
 * label on the outside not inside. Putting them beside the label rather than
 * in a policy page is the entire difference between a return that clears and
 * one that bounces.
 *
 * THE DEADLINE IS A DATE, NOT A DURATION. "Return within 14 days" requires the
 * customer to remember when they started. A date does not, and it is the one
 * number worth repeating at the top and the bottom.
 *
 * THE QR CODE IS DRAWN, NOT FETCHED. A deterministic pattern from the
 * reference string — no image to host, no layout shift, and it demonstrates
 * the slot without pretending to be a real scannable code. Swap it for your
 * carrier's.
 *
 * ACCESSIBILITY: methods are a radio group, so arrow keys move between them
 * and only one is in the tab order; the steps are an `<ol>` that changes with
 * the method and is announced through a polite live region; the drawn code is
 * `aria-hidden` with the reference available as text beside it, because a
 * screen-reader user cannot use a QR code but can read the number out.
 */

import * as React from 'react'
import { Box, CalendarDays, MapPin, Printer, QrCode, Truck } from 'lucide-react'

export interface ReturnMethod {
  id: string
  label: string
  blocker: string
  icon: typeof Printer
  steps: string[]
}

export interface ReturnLabelInstructionsProps {
  reference?: string
  deadline?: string
  parcelNote?: string
  methods?: ReturnMethod[]
  packingRules?: string[]
  className?: string
}

const DEFAULT_METHODS: ReturnMethod[] = [
  {
    id: 'qr',
    label: 'Drop off, no printer',
    blocker: 'You need a phone with you at the counter',
    icon: QrCode,
    steps: [
      'Pack the item — see the rules below.',
      'Take the parcel and this QR code to any of the 4,100 drop-off points.',
      'The shop scans the code and prints the label onto your parcel.',
      'Keep the receipt. It is the proof of posting and the only thing that settles a lost-parcel claim.',
    ],
  },
  {
    id: 'print',
    label: 'Print the label yourself',
    blocker: 'You need a printer and something to attach the label with',
    icon: Printer,
    steps: [
      'Print the label at 100% — "fit to page" shrinks the barcode until scanners refuse it.',
      'Tape it flat on the largest face, with no tape across the barcode itself.',
      'Cover or remove the old delivery label. Two labels is the most common misroute.',
      'Drop the parcel at any point on the network, or hand it to a collecting driver.',
    ],
  },
  {
    id: 'collect',
    label: 'Collection from your address',
    blocker: 'Someone must be in between 08:00 and 18:00',
    icon: Truck,
    steps: [
      'Pick a date at least one working day ahead.',
      'Leave the parcel packed but unlabelled — the driver brings the label.',
      'The driver scans it on the doorstep and hands you a receipt.',
      'A missed collection is rebooked free once, then costs £4.',
    ],
  },
]

const DEFAULT_RULES = [
  'Original box and internal packaging, if you still have them.',
  'Every accessory that came with it — cables, allen keys, the manual.',
  'Nothing written on the product box itself. Put it inside an outer carton.',
  'One return per parcel. Two references in one box cannot be checked in.',
]

/** A drawn placeholder, deterministic from the reference. Not scannable. */
function codeCells(reference: string, size: number) {
  const cells: boolean[] = []
  let hash = 0
  for (const ch of reference) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0
  for (let i = 0; i < size * size; i++) {
    hash = (hash * 1103515245 + 12345) >>> 0
    cells.push(((hash >>> 16) & 1) === 1)
  }
  return cells
}

export function ReturnLabelInstructions({
  reference = 'RTN-4471-9082',
  deadline = 'Tuesday 30 September 2026',
  parcelNote = '1 parcel · up to 20 kg · 60 × 60 × 60 cm',
  methods = DEFAULT_METHODS,
  packingRules = DEFAULT_RULES,
  className = '',
}: ReturnLabelInstructionsProps) {
  const uid = React.useId()
  const [methodId, setMethodId] = React.useState(methods[0]?.id ?? '')

  const method = methods.find((m) => m.id === methodId) ?? methods[0]
  const grid = 11
  const cells = React.useMemo(() => codeCells(reference, grid), [reference])

  if (!method) return null

  return (
    <section className={`bg-background px-4 py-10 sm:px-6 ${className}`}>
      <div className="mx-auto max-w-3xl">
        <header className="rounded-2xl border border-border bg-card p-5">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <h2 className="text-xl font-bold tracking-tight">Send it back</h2>
              <p className="mt-1 text-sm text-muted-foreground">
                Return {reference} · {parcelNote}
              </p>
              {/* A date, not a duration. Repeated at the foot. */}
              <p className="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-amber-500/10 px-2 py-1 text-xs font-semibold text-amber-700 dark:text-amber-400">
                <CalendarDays aria-hidden className="h-3.5 w-3.5" />
                Must be posted by {deadline}
              </p>
            </div>

            <div className="flex items-center gap-3">
              <div
                aria-hidden
                className="grid shrink-0 gap-px rounded-lg border border-border bg-card p-2"
                style={{ gridTemplateColumns: `repeat(${grid}, 0.5rem)` }}
              >
                {cells.map((on, i) => (
                  <span
                    key={i}
                    className={`h-2 w-2 rounded-[1px] border border-transparent ${on ? 'bg-foreground' : 'bg-transparent'}`}
                  />
                ))}
              </div>
              <p className="text-xs text-muted-foreground">
                Or quote
                <br />
                <span className="font-mono text-xs text-foreground">{reference}</span>
              </p>
            </div>
          </div>
        </header>

        <fieldset className="mt-6 border-0 p-0">
          <legend className="text-sm font-semibold">How do you want to send it?</legend>
          <div className="mt-3 grid gap-2 md:grid-cols-3">
            {methods.map((option) => {
              const Icon = option.icon
              const id = `${uid}-${option.id}`
              const on = methodId === option.id
              return (
                <div key={option.id}>
                  <input
                    type="radio"
                    id={id}
                    name={`${uid}-method`}
                    checked={on}
                    onChange={() => setMethodId(option.id)}
                    className="peer sr-only"
                  />
                  <label
                    htmlFor={id}
                    className={`block h-full cursor-pointer rounded-xl border p-3 text-sm transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring ${
                      on ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/60'
                    }`}
                  >
                    <span className="flex items-center gap-1.5 font-semibold">
                      <Icon aria-hidden className="h-4 w-4" />
                      {option.label}
                    </span>
                    {/* The thing that actually blocks it, said up front. */}
                    <span className="mt-1 block text-xs text-muted-foreground">
                      {option.blocker}
                    </span>
                  </label>
                </div>
              )
            })}
          </div>
        </fieldset>

        <div aria-live="polite" className="mt-6">
          <h3 data-stress-ignore className="text-sm font-semibold">{method.label} — what to do</h3>
          <ol className="mt-3 space-y-3">
            {method.steps.map((step, index) => (
              <li key={step} className="flex gap-3">
                <span
                  aria-hidden
                  className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-bold text-primary"
                >
                  {index + 1}
                </span>
                <p className="text-sm text-muted-foreground">{step}</p>
              </li>
            ))}
          </ol>
        </div>

        <div className="mt-6 grid gap-4 sm:grid-cols-2">
          <div className="rounded-xl border border-border bg-card p-4">
            <h3 className="flex items-center gap-2 text-sm font-semibold">
              <Box aria-hidden className="h-4 w-4 text-primary" />
              Pack it like this
            </h3>
            <ul className="mt-3 space-y-2 text-xs text-muted-foreground">
              {packingRules.map((rule) => (
                <li key={rule} className="flex gap-2">
                  <span aria-hidden className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground border border-transparent" />
                  {rule}
                </li>
              ))}
            </ul>
          </div>

          <div className="rounded-xl border border-border bg-card p-4">
            <h3 className="flex items-center gap-2 text-sm font-semibold">
              <MapPin aria-hidden className="h-4 w-4 text-primary" />
              Nearest drop-off points
            </h3>
            <ul className="mt-3 space-y-2 text-xs">
              {[
                ['Kade Convenience, Weena 212', 'Open until 22:00 · 0.4 km'],
                ['PostPoint Central Station', 'Open until 20:00 · 1.1 km'],
                ['Blaak Locker Bank', '24 hours · 1.6 km · parcels under 40 cm'],
              ].map(([name, meta]) => (
                <li key={name}>
                  <span className="block font-medium">{name}</span>
                  <span className="block text-muted-foreground">{meta}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-dashed border-border p-4">
          <p className="text-xs text-muted-foreground">
            Posted after {deadline} and the return is refused at the depot and
            sent back to you. Nothing is charged, but nothing is refunded either.
          </p>
          <button
            type="button"
            className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
          >
            <Printer aria-hidden className="h-4 w-4" />
            {method.id === 'print' ? 'Download the label' : 'Email me this page'}
          </button>
        </div>
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/return-label-instructions.tsx and import it where you need the section:

import { ReturnLabelInstructions } from '@/components/return-label-instructions'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`reference`	`string`	`'RTN-4471-9082'`
`deadline`	`string`	`'Tuesday 30 September 2026'`
`parcelNote`	`string`	`'1 parcel · up to 20 kg · 60 × 60 × 60 cm'`
`methods`	`ReturnMethod[]`	`DEFAULT_METHODS`
`packingRules`	`string[]`	`DEFAULT_RULES`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

return-label-instructions.html

<!--
  Return Label and Instructions — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section class="bg-background px-4 py-10 sm:px-6 ">
  <div class="mx-auto max-w-3xl">
    <header class="rounded-2xl border border-border bg-card p-5">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h2 class="text-xl font-bold tracking-tight">Send it back</h2>
          <p class="mt-1 text-sm text-muted-foreground">Return RTN-4471-9082 · 1 parcel · up to 20 kg · 60 × 60 × 60 cm</p>
          <p class="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-amber-500/10 px-2 py-1 text-xs font-semibold text-amber-700 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days h-3.5 w-3.5" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg>Must be posted by Tuesday 30 September 2026</p>
        </div>
        <div class="flex items-center gap-3">
          <div aria-hidden="true" class="grid shrink-0 gap-px rounded-lg border border-border bg-card p-2" style="grid-template-columns:repeat(11, 0.5rem)">
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-transparent"></span>
            <span class="h-2 w-2 rounded-[1px] border border-transparent bg-foreground"></span>
          </div>
          <p class="text-xs text-muted-foreground">Or quote<br /><span class="font-mono text-xs text-foreground">RTN-4471-9082</span></p>
        </div>
      </div>
    </header>
    <fieldset class="mt-6 border-0 p-0">
      <legend class="text-sm font-semibold">How do you want to send it?</legend>
      <div class="mt-3 grid gap-2 md:grid-cols-3">
        <div>
          <input type="radio" id="_R_0_-qr" class="peer sr-only" name="_R_0_-method" checked="" />
          <label for="_R_0_-qr" class="block h-full cursor-pointer rounded-xl border p-3 text-sm transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring border-primary bg-primary/5">
            <span class="flex items-center gap-1.5 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-qr-code h-4 w-4" aria-hidden="true"><rect width="5" height="5" x="3" y="3" rx="1"></rect><rect width="5" height="5" x="16" y="3" rx="1"></rect><rect width="5" height="5" x="3" y="16" rx="1"></rect><path d="M21 16h-3a2 2 0 0 0-2 2v3"></path><path d="M21 21v.01"></path><path d="M12 7v3a2 2 0 0 1-2 2H7"></path><path d="M3 12h.01"></path><path d="M12 3h.01"></path><path d="M12 16v.01"></path><path d="M16 12h1"></path><path d="M21 12v.01"></path><path d="M12 21v-1"></path></svg>Drop off, no printer</span>
            <span class="mt-1 block text-xs text-muted-foreground">You need a phone with you at the counter</span>
          </label>
        </div>
        <div>
          <input type="radio" id="_R_0_-print" class="peer sr-only" name="_R_0_-method" />
          <label for="_R_0_-print" class="block h-full cursor-pointer rounded-xl border p-3 text-sm transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring border-border hover:bg-muted/60">
            <span class="flex items-center gap-1.5 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-printer h-4 w-4" aria-hidden="true"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"></path><rect x="6" y="14" width="12" height="8" rx="1"></rect></svg>Print the label yourself</span>
            <span class="mt-1 block text-xs text-muted-foreground">You need a printer and something to attach the label with</span>
          </label>
        </div>
        <div>
          <input type="radio" id="_R_0_-collect" class="peer sr-only" name="_R_0_-method" />
          <label for="_R_0_-collect" class="block h-full cursor-pointer rounded-xl border p-3 text-sm transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring border-border hover:bg-muted/60">
            <span class="flex items-center gap-1.5 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck h-4 w-4" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg>Collection from your address</span>
            <span class="mt-1 block text-xs text-muted-foreground">Someone must be in between 08:00 and 18:00</span>
          </label>
        </div>
      </div>
    </fieldset>
    <div aria-live="polite" class="mt-6">
      <h3 data-stress-ignore="true" class="text-sm font-semibold">Drop off, no printer — what to do</h3>
      <ol class="mt-3 space-y-3">
        <li class="flex gap-3">
          <span aria-hidden="true" class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-bold text-primary">1</span>
          <p class="text-sm text-muted-foreground">Pack the item — see the rules below.</p>
        </li>
        <li class="flex gap-3">
          <span aria-hidden="true" class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-bold text-primary">2</span>
          <p class="text-sm text-muted-foreground">Take the parcel and this QR code to any of the 4,100 drop-off points.</p>
        </li>
        <li class="flex gap-3">
          <span aria-hidden="true" class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-bold text-primary">3</span>
          <p class="text-sm text-muted-foreground">The shop scans the code and prints the label onto your parcel.</p>
        </li>
        <li class="flex gap-3">
          <span aria-hidden="true" class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-bold text-primary">4</span>
          <p class="text-sm text-muted-foreground">Keep the receipt. It is the proof of posting and the only thing that settles a lost-parcel claim.</p>
        </li>
      </ol>
    </div>
    <div class="mt-6 grid gap-4 sm:grid-cols-2">
      <div class="rounded-xl border border-border bg-card p-4">
        <h3 class="flex items-center gap-2 text-sm font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box h-4 w-4 text-primary" aria-hidden="true"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg>Pack it like this</h3>
        <ul class="mt-3 space-y-2 text-xs text-muted-foreground">
          <li class="flex gap-2"><span aria-hidden="true" class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground border border-transparent"></span>Original box and internal packaging, if you still have them.</li>
          <li class="flex gap-2"><span aria-hidden="true" class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground border border-transparent"></span>Every accessory that came with it — cables, allen keys, the manual.</li>
          <li class="flex gap-2"><span aria-hidden="true" class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground border border-transparent"></span>Nothing written on the product box itself. Put it inside an outer carton.</li>
          <li class="flex gap-2"><span aria-hidden="true" class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground border border-transparent"></span>One return per parcel. Two references in one box cannot be checked in.</li>
        </ul>
      </div>
      <div class="rounded-xl border border-border bg-card p-4">
        <h3 class="flex items-center gap-2 text-sm font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Nearest drop-off points</h3>
        <ul class="mt-3 space-y-2 text-xs">
          <li>
            <span class="block font-medium">Kade Convenience, Weena 212</span>
            <span class="block text-muted-foreground">Open until 22:00 · 0.4 km</span>
          </li>
          <li>
            <span class="block font-medium">PostPoint Central Station</span>
            <span class="block text-muted-foreground">Open until 20:00 · 1.1 km</span>
          </li>
          <li>
            <span class="block font-medium">Blaak Locker Bank</span>
            <span class="block text-muted-foreground">24 hours · 1.6 km · parcels under 40 cm</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-dashed border-border p-4">
      <p class="text-xs text-muted-foreground">Posted after Tuesday 30 September 2026 and the return is refused at the depot and sent back to you. Nothing is charged, but nothing is refunded either.</p>
      <button type="button" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-printer h-4 w-4" aria-hidden="true"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"></path><rect x="6" y="14" width="12" height="8" rx="1"></rect></svg>Email me this page</button>
    </div>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

8 more blocks in After-Sale Service

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse After-Sale Service

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More After-Sale Service blocks

View category

Warranty

Coverage is per unit, not per order. Pick the serial number on the underside of the product.

Covered until 12 March 2027

Kestrel sit-stand desk · serial KS-2291-8840 · bought 12 March 2025 · Standard · 2 years · 546 days remaining

Download the certificate

Covered

Motor, control box and handset failure
Frame welds, joints and structural parts
Gas lift, castors and tilt mechanism
Manufacturing defects in the desktop surface
Labour and parts on an approved repair

Not covered

Scratches, dents and finish wear from normal use
Damage from moving the unit without dismantling it
Units modified with third-party parts
Consumables — cable ties, felt pads, bulbs
Anything bought through an unauthorised reseller

This warranty is in addition to your statutory rights, which it does not affect. Nothing on this page shortens them.

Warranty Coverage Panel

A verdict for this serial number today, with exclusions given equal weight to cover and an extension offered only while it can still be bought.

After-Sale Service259 lines1 dep

Request a refund

Order ORD-88410 · delivered 2 September 2026. Pick the lines you want back — you do not have to return the whole order.

Meridian task chair

Graphite mesh · £420.00 each · 2 ordered

Quantity

Reason for Meridian task chair

Halo task lamp

Brushed steel · £145.00 each · 1 ordered

Cable spine

Black, 1.2 m · £38.00 each · 4 ordered

Photos of the damage — required

One clear shot of the fault and one of the packaging. Claims without them are held until we ask for them, which adds days.

Anything else we should knowOptional

Refunds reach the original payment method in 3–5 working days once approved.

Refund Request Form

Refunds are per line, not per order: a reason on each line that drives what is asked for next, and a running total itemising the restocking fee and the delivery rule.

After-Sale Service348 lines1 dep

Refund REF-20418

£928.00

Back to Visa ending 4417. Currently: Refund released.

Request received
Done· 3 September, 14:20
With Northwind
Three lines from order ORD-88410, with photographs attached.
Returned goods checked in
Done· 8 September, 09:05
With Northwind · Rotterdam DC
Two of three lines arrived. The lamp is still with the carrier.
Refund released
In progress· 9 September, 11:40
With Northwind
Sent to the card ending 4417. From this point the money is with your bank, not with us.
Posted to your account
Waiting
With Your bank
Most banks post within 3–5 working days. We cannot make this faster and neither can our payment provider.

Nothing has gone wrong if the last stage is still open on day three. Banks post refunds in batches, and a weekend does not count as a working day.

Refund Status Tracker

Where the money is and who is holding it - four stages, each naming the responsible party, including the bank stage every where-is-my-refund contact comes from.

After-Sale Service241 lines1 dep

Refunds

Oldest open first. A refund gets slower the longer nobody looks at it, so recency is the wrong default here.

Released this period: £412.40
Past 5 days: 3
Blocked on us: 3

Refunds, by age
Refund	Customer			Status
REF-20390ORD-88104	A. Ferreira	£214.00	13 days — past the promiseraised 31 Aug	BlockedBank details refused — customer contacted twice
REF-20402ORD-88221	Northwind Trading	£1,840.50	11 days — past the promiseraised 2 Sep	BlockedOver the £1,000 approval limit — needs Rhea Patel
REF-20411ORD-88377	K. Ojo	£89.99	8 days — past the promiseraised 5 Sep	BlockedAwaiting returned goods — carrier scan 4 days ago
REF-20418ORD-88410	M. Haugen	£928.00	4 daysraised 9 Sep	Approved
REF-20425ORD-88502	Contoso Logistics	£412.40	2 daysraised 11 Sep	Released
REF-20431ORD-88566	S. Baptiste	£64.00	1 dayraised 12 Sep	Rejected

Refunds Overview Table

The operator queue, sorted oldest-open-first because recency is the wrong default, with blocked as a first-class status that names its blocker.

After-Sale Service277 lines1 dep

Return or exchange

Order ORD-88410. Each line is decided on its own — one can be refunded while another is swapped.

Meridian task chair

Graphite mesh, standard height · £420.00 · 1 in the order

Outcome for Meridian task chair

RefundBack to the original payment method

ExchangeSwap for another variant

Store credit+10%Issued instantly, never expires

Swap for

Halo task lamp

Brushed steel · £145.00 · 2 in the order

Summary

Lines selected: 1
Coming back to you: £0.00

Return or Exchange Picker

Refund, exchange or credit decided per line, with live stock on the variants and the price difference shown before the goods are posted rather than after.

After-Sale Service331 lines1 dep

Book a repair

Kestrel sit-stand desk · serial KS-2291-8840

Under warranty until 12 March 2027 — parts and labour included

What is wrong with it?

Desk will not raise or lowerHandset lights up but nothing moves, or it moves and stops.

Frame wobbles or is unevenUsually a levelling foot or a loose crossbar, not a fault in the legs.

Handset or display is deadA part swap. The unit does not need to travel.

Desktop surface is damagedSplitting, delamination or a lifting edge. Needs an inspection.

How should we do it?2 of 4 routes suit this fault

Engineer visits5–9 working days · half-day window

We post the part2–3 working days · you fit it

Earliest date that suits you

Phone for the engineer

Anything the picker did not coverOptional

Estimate: No charge — this unit is under warranty

An estimate, not a quote. Nothing is charged until an engineer has seen the fault and you have accepted a figure in writing.

Service Repair Request

A repair is not a return - a symptom picker that filters the service routes, warranty resolved inside the form, and an estimate with its uncertainty stated.

After-Sale Service310 lines1 dep

Your reviews

3 written · 2 still to write

Waiting on you

Halo task lamp
Delivered 2 September 2026 · 19 days left to review it
Cable spine, 1.2 m
Delivered 2 September 2026 · 19 days left to review it

Written

Meridian task chair
4 out of 5 for Meridian task chairEditedWritten 11 August 2026, edited 3 September 2026
Comfortable, but the armrests creak
Eight months in and it still supports a full day. The armrests developed a creak around month three that a drop of oil fixed.
24 people found this helpful
Kestrel sit-stand desk
5 out of 5 for Kestrel sit-stand deskPublishedWritten 14 June 2026
Solid at full height, which is rare
No wobble at 120 cm with two monitors on it. The handset is unnecessarily complicated.
61 people found this helpful
Halo task lamp
2 out of 5 for Halo task lampHeldWritten 19 May 2026
Arrived three weeks late
Ordered in April, arrived in May, and by then I had bought another one.
This is about delivery rather than the product, so it is not published on the product page. Delivery feedback goes to the carrier report instead.

Editing a published review keeps its original date and marks it as edited on the product page. Withdrawing removes it entirely and cannot be undone.

Review History

The reviews you wrote and the ones you owe, with editing that is honest about being marked as edited and moderation that names the rule it applied.

After-Sale Service291 lines1 dep

Check a gift card

The number and PIN are on the back of the card, or in the email if it was sent digitally.

Card ending 5566

£62.50

Issued 4 December 2025 · valid until 4 December 2027

Where it went

Order ORD-88410 — Halo task lamp2 Sep 2026−£145.00
Top-up at checkout12 Aug 2026£100.00
Order ORD-87204 — Cable spine ×43 Jun 2026−£42.50
Issued4 Dec 2025£150.00

Gift Card Balance Check

A balance checker built for the two ways it goes wrong - an empty card and an expired one - answering with a transaction history rather than a bare zero.

After-Sale Service254 lines1 dep