Shadcn navbars for SaaS
SaaS navbars do double duty: they introduce the product to logged-out visitors and they wrap the dashboard for logged-in users. The structure that works for the marketing site: logo, 4-6 horizontal nav items (Product, Pricing, Customers, Docs, Changelog), a 'Sign in' link, and a primary 'Get started' button. Five nav items is the sweet spot — fewer feels barren, more starts looking like an enterprise IT vendor.
npx shadcn@latest add https://ruixen.com/r/navbar-with-search
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for saas
The two CTAs in a SaaS navbar (sign in vs. start) handle two different visitor types: returning users heading to login, and new visitors heading to signup. They have to be visually distinct. 'Sign in' as a text link, 'Get started' as a filled button, with clear spacing between. Mixing them up — same color, same weight — breaks the implicit signal and slows both groups down.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Frequently asked questions
Should the SaaS navbar have a search bar?
Only if your product has docs deep enough to justify it. A search bar in a marketing-site navbar implies the visitor needs to find something — which is true for documentation-heavy SaaS (Stripe, Vercel, Auth0) but oversells for a five-page site. If you're shipping a Marketing site + a separate Docs site, put search in the Docs navbar, not the marketing one. Site-wide search on a marketing site usually returns mediocre results that erode trust.
What about a 'Changelog' nav item?
Worth its slot if you ship at least monthly and have a real audience of power users. Changelog visibility signals product velocity, which converts technical buyers. If you ship quarterly or less, a stale changelog actively hurts — visitors land on it, see the last entry was four months ago, and take it as a 'product abandoned' signal. Either commit to keeping it fresh or omit it entirely.
Should we surface 'Pricing' in the navbar?
Yes — almost always. Hiding pricing in a footer or behind a 'Plans' submenu sends a 'we're being cagey' signal and loses budget-qualified visitors. The exception: enterprise-only products where 'Contact sales' is the genuine call-to-action and there's no public pricing to show. For everyone else, 'Pricing' as a top-level nav item is table stakes — and visitors who click straight to it are usually higher-intent than the ones who arrive at pricing via the homepage.
Browse all navbars
The Navbars category page has every Ruixen navbars variant — not just the curated picks for saas.
See all navbars →