shadcn Next.js Supabase analytics dashboard template

What is included

These are the pieces in this repository. The public live demo renders the same overview and realtime layout with sample data. It does not call Clerk, the database, Stripe, or Polar.

• Next.js App Router dashboard with Overview, Realtime, and Docs, plus a collapsible sidebar.
• shadcn/ui cards, buttons, badges, tabs, alerts, and menus. Charts are Recharts inside those cards.
• TrackingComponent for pageview and time-spent events, with a public POST ingest route.
• Drizzle schema for sessions, customers, and journey events. Point it at Supabase Postgres.
• Three data modes: demo data in development, a live in-memory session store, and Postgres.
• Optional Stripe revenue, MRR, and visitor cards. Stripe is not used to buy the template.
• Full TypeScript source, lifetime updates, and use in unlimited projects.

Supabase Postgres through Drizzle

There is no @supabase/supabase-js dependency, no Supabase Auth, and no Supabase Realtime channel. getDb() in lib/db/client.ts loads postgres and drizzle-orm/postgres-js. It reads POSTGRES_URL, then DATABASE_URL, and returns null when both are missing so a static build does not open a connection. The client sets prepare: false, max: 1, an idle timeout of 20 seconds, and a connect timeout of 10 seconds. prepare: false is what a transaction-mode pooler needs, including Supabase’s pooler, Neon’s pooler, and PgBouncer.

drizzle.config.ts points Drizzle Kit at lib/db/schema.ts and reads DATABASE_URL only. Apply the tables with bun run db:push, or bun run db:generate and bun run db:migrate. The schema file does not declare Row Level Security. If you enable RLS in the Supabase dashboard, the role in that connection string needs access to these tables. Postgres mode fetches GET /api/datalighthouse/analytics, which calls getAnalyticsSummary. That query counts distinct visitors and sessions on dl_user_sessions and groups a daily trend with date_trunc. The route returns 401 without a Clerk session.

dl_user_sessions

One row per analytics session. session_id is unique. Indexes cover visitor_id, site_id, and last_seen. Columns include landing page, last page, referrer, country, city, latitude, longitude, device, browser, pageviews, duration, first and last seen, and a jsonb metadata column.

customers

One row per Clerk user (unique on clerk_user_id). Stores email, GitHub username, id, and avatar, billing provider and customer id, checkout and payment ids, amount, currency, status (default checkout_created), and purchased_at. This is the customer record the product listing calls the Supabase customer vault.

customer_journey_events

Journey rows unique on clerk user plus event type. Optional customer_id references customers and is set null if that customer row is deleted. Also stores session id and jsonb metadata.

blog_posts

Published pages for this marketing site: slug, page type, title, summary, author, tags, and jsonb content. It is not the analytics fact table.

How shadcn/ui is used

components.json is the shadcn/ui new-york style, with React Server Components enabled, Tailwind CSS variables, and Lucide icons. Primitives live in components/ui. Class names are merged with cn() from lib/utils.ts.

Cards, buttons, and alerts

Overview metric cards, the revenue chart, referrer list, and country list use Card. Range switches use Button. A failed Stripe load uses Alert. Realtime lists use Badge.

Tabs and dropdown menu

The data-mode control is Tabs with Demo (development only), Live, and Postgres. The time-range control uses Dropdown Menu. The sidebar uses Button for collapse.

Recharts, not a shadcn chart block

Revenue vs. visitors is a ComposedChart (bars for succeeded charges, a line for distinct visitors) inside ResponsiveContainer with minWidth 0. The realtime traffic card is an AreaChart. components.json is the new-york style with CSS variables and Lucide icons. There is no components/ui/chart.tsx in this repo.

World map

The realtime location view is a zoomable map from react-simple-maps (world-atlas countries-110m) inside a Card. It is an SVG map with zoom controls, not a separate 3D globe package.

Setup

Short path from purchase to a Supabase-backed dashboard. Deeper notes ship in the private repository. The public version is the quickstart. To build the ingest route and the session table yourself, use the self-hosted Next.js analytics guide.

1. Step 1

   Get the source

   Open checkout, sign in with GitHub, and pay $59 on Polar. Accept the collaborator invite and clone the private repository. The quickstart is the public setup overview.

2. Step 2

   Point Drizzle at Supabase Postgres

   Set DATABASE_URL to the Supabase Postgres connection string. The runtime client also accepts POSTGRES_URL and checks that name first. prepare: false is already set, which is what Supabase’s transaction pooler requires. Add the Clerk publishable and secret keys for sign-in.

3. Step 3

   Apply the schema and track a page

   Run bun run db:push (or generate, then migrate). drizzle.config.ts reads DATABASE_URL only. Paste TrackingComponent into the root layout. Set STRIPE_SECRET_KEY only if you want the revenue cards. The rest of the public steps are on the quickstart.

Compared with the other results for this query

People searching for a shadcn Next.js Supabase analytics dashboard usually land on a generated app, a public repository, or an admin starter. This table is those categories, not a review of a named third-party product. Standalone analytics apps (Umami, OpenPanel, Rybbit, and others) are on the best Next.js analytics dashboard templates page. Stripe card definitions are on the Next.js Stripe analytics dashboard page.

$59 once, then you host it

One-time purchase of a self-hosted Next.js template. Full source, lifetime updates, and use in unlimited projects. Supabase, or any other Postgres host, is your bill. 7-day no-questions refund.

Quickstart · Stripe revenue cards · Compare Next.js analytics dashboards · Build the dashboard yourself