Skip to content
GetUrUI

Harbor Help Center

NewTemplateDocs & content4 screens

A help center for Harbor, a fictional booking & payments app: a search hero with instant, highlighted results, category pages with filter and sort, readable articles with scroll-spy contents and helpful-feedback, and a contact desk that suggests answers before it opens a ticket.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$59

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included free with Pro Lifetime ($179) — compare plans.

Open

What is this?

Harbor is a complete help center: a search-first home page, category listings, a long-form article layout and a three-step contact desk, wired together by an in-page router. Search is a real accessible combobox that ranks titles, keywords and summaries as you type, and the contact flow shows the most-read answers for a topic before anyone has to write a ticket.

Who is it for?

SaaS and marketplace teams that need a support site their customers actually use — support leads who want fewer repetitive tickets, and product teams who want help content to feel like part of the product rather than a bolted-on knowledge base.

What you get

Everything needed to make it yours.

Instant search

An accessible combobox with ranked, highlighted results as you type, popular searches when empty, arrow-key navigation, `/` to focus and a support fallback.

Browsable categories

Six topic cards with top articles, then category pages with a topic sidebar, in-category filter, three sort orders and a reflowing list.

Readable articles

Comfortable measure and leading, numbered steps, tips and warnings, copy-link headings, and a contents rail with scroll-spy and reading progress.

Was this helpful?

One-tap yes, or a short no flow with reason chips and an optional note — each path ends in a friendly confirmation.

Ticket-deflecting contact desk

Pick a topic, see the three answers that usually solve it, and only then fill a validated request with priority and expected reply time.

Calm, on-brand motion

A slow lighthouse beam over rolling waves, springy step transitions and gentle reveals — all still under reduced motion.

Screens & sections

  • Search hero with instant results
  • Category cards
  • Popular articles
  • Contact routing
  • Category article list
  • Article with table of contents
  • Was this helpful? feedback
  • Related articles
  • Contact desk — topic, suggestions, request
  • Ticket confirmation

Stack

Next.jsReact 19Tailwind CSS 4Motion

12 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates