Skip to main content

Domain Search Panel

Use this section when domain lookup is an early conversion step in the hosting funnel.

Domain search

A compact search panel with enough context

Designed for a homepage or pricing page where domain search needs to feel fast and credible.

mybrand
.com $12.io $36.store $18.cloud $14

Notes​

  • Keep the search action prominent and obvious.
  • Show only the most relevant TLD shortcuts.
  • Use real pricing and availability logic before shipping.

Copy paste snippet​

DomainSearchPanel.tsx
export function DomainSearchPanel() {
  return (
    <section className="rounded-[32px] border border-slate-200 bg-white p-8 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.35)]">
      <div className="grid gap-4">
        <div className="grid gap-3 rounded-[24px] border border-slate-200 bg-slate-50 p-3 md:grid-cols-[1fr_auto]">
          <input
            className="h-12 rounded-2xl border-0 bg-white px-4 text-sm text-slate-900 outline-none"
            placeholder="mybrand"
          />
          <button className="h-12 rounded-full bg-slate-950 px-5 text-sm font-semibold text-white">
            Search domains
          </button>
        </div>
        <div className="flex flex-wrap gap-2 text-sm font-medium text-slate-600">
          <span className="rounded-full bg-sky-50 px-3 py-1 text-sky-700">.com $12</span>
          <span className="rounded-full bg-sky-50 px-3 py-1 text-sky-700">.io $36</span>
          <span className="rounded-full bg-sky-50 px-3 py-1 text-sky-700">.store $18</span>
          <span className="rounded-full bg-sky-50 px-3 py-1 text-sky-700">.cloud $14</span>
        </div>
      </div>
    </section>
  );
}