Harbor
B2B SaaS site with a working app shell.
A marketing site and a clickable product app for a B2B SaaS, built in Next.js 16, TypeScript and Tailwind CSS 4, with one three.js moment: wide, flat ribbons travel slowly across the hero like orders moving down lanes on a warehouse floor, with the live count at each stage pinned beneath them. The sample product is Harbor, order operations for wholesale and fulfilment teams.
- For
- B2B SaaS
- Built with
- Next.js 16, TypeScript, Tailwind CSS 4, Motion, anime.js, three.js
- Pages
- 8 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
The 3D moment
Wide flat ribbons travel slowly across the hero like orders moving down warehouse lanes, with the live count at each stage pinned beneath them.
What you get
Straight from the template's README, the same file you will find in the repository.
- A marketing site and an app in one project: Home, Pricing, Sign in, the app's Overview, Orders, Order detail and Settings, plus a 404 and an error page.
- A signature 3D hero: flat, matte ribbons in signal orange and graphite drifting like orders down lanes, with live lane counts beneath. Lazy loaded, paused off screen, still under reduced motion, with a drawn fallback that follows the theme.
- A real app shell, not screenshots: sidebar with site switcher, top bar with search, a phone drawer, lane counts, an hourly throughput chart, carrier cut-offs and an exceptions list.
- An orders table with search, stage filters, a phone list layout, and every state designed: data, loading, empty and error (a preview switch shows each one).
- Order detail with a timeline, hold and release actions, and a settings page with validation, saving and saved states, notification switches and a team invite.
- A hero that shows the product: two live app cards (the next cut-off counting down and a held order) over the ribbons, with proof figures right under the buttons and the customer row beneath.
- A product tour on the home page that shows the same app components in tabs (Radix Tabs in the shadcn pattern, with a Motion pill), a bento feature grid, how it works with an aerial photo and a route that draws itself (anime.js), integrations, a featured quote beside a floor photo, a card shuffle deck of quotes (Motion; pauses on hover, focus, off screen and with a button), FAQ and a closing call to action.
- Dashboard pieces that read like a real ops tool: lane counts with seven hour trend lines, an hourly chart with a peak callout, an on-time ring and carrier cut-offs.
- Pricing with a monthly and yearly switch, a featured plan and a full comparison table.
- Light and dark themes that differ from the first screen down (the field bands turn from graphite to signal orange), with a switch that opens the new theme as a circle from the button. Both pass WCAG AA (checked by script).
- One content file: every word, price, order and person lives in
src/config/site.ts. - Self-hosted fonts (Red Hat Display and Red Hat Text, OFL), no trackers, no runtime CDN. Motion (MIT) for UI motion and anime.js (MIT) for the route drawing, both from npm; no GSAP.
- No decorative icons: navigation, plans and states are set in type; only the menu, close, theme and FAQ controls use small drawn glyphs.
- Phone (390 px), tablet and desktop (1440 px) layouts; keyboard and screen reader friendly; visible focus everywhere; reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Pricing
- Sign in
- App overview
- Orders
- Order detail
- Settings
- 404
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Motion
- anime.js
- three.js
What is not included
- A backend. Sign in, saving settings, holding orders and invites are UI only and say so.
- Real customer logos, real photos and a social share image (see
IMAGES.mdfor each slot). The two photos included are Pixabay demo content; replace them before you publish. - A blog or changelog.
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
