App Surface

Product Surface

The authenticated product experience — dashboards, settings, and operational tools.

The classic "logged-in" experience

Users log in, see a sidebar, and navigate between protected pages. Dashboards, account settings, admin panels, internal tools — if your users authenticate and work within a structured layout, this is it.

What You Get

A production-ready authenticated layout, out of the box:

Protected pages

Every page requires login. Redirects are handled automatically — no auth code to write.

Persistent sidebar

Navigation stays visible as users move around. Collapses on mobile into a slide-out menu.

User context

The header shows who's logged in — avatar, notifications, and account menu ready to go.

Scalable navigation

Grouped sections that grow with your product. Add pages without redesigning the nav.

When to Use It

Choose this surface when you're building something users log into and use repeatedly:

  • Dashboards — Analytics, reporting, KPIs, status overviews
  • Account & settings — Profile, preferences, billing, team management
  • Admin panels — Content management, user admin, system config
  • Internal tools — CRM, project management, workflow apps
  • SaaS products — The core experience after login

Not sure if you need this?

If users log in and you want consistent navigation, start here. You can rename it to /dashboard or /admin, or delete it entirely if your project doesn't need auth.

Learn More

SurfacesHow surfaces workLayoutShell & sidebar componentsAuthAuthentication setup

For AI Agents

Key rules:

  • Authenticated pages go in app/(app)/app/ for URLs like /app/dashboard
  • Use AppShell for layout — persistent sidebar navigation
  • Add nav items to appNavItems in lib/navigation.ts
  • Auth is handled by middleware — pages are protected automatically
  • Read app/(app)/APP.md for surface conventions