Tulip Logo IconTulip
App

Providers

Understand the shared client providers used by Tulip app shells.

Tulip's Providers component groups common client-side providers for app screens.

It is intentionally broad enough for the default app shell, but still lets feature modules own their own local providers when needed.

What it provides

  • TanStack Query client provider
  • Nuqs adapter for URL state
  • indicator/action context from Core
  • tooltip provider
  • theme provider
  • toaster
  • React Query devtools

Usage

import { Providers } from "@tulip-systems/app/components/client";

export default function Layout({ children }: { children: React.ReactNode }) {
  return <Providers>{children}</Providers>;
}

Add feature providers locally

Keep route-specific providers close to the route that needs them. For example, wrap protected admin routes with AuthProvider in the admin layout instead of making the whole public site auth-aware.

Continue reading

On this page