React Server Components for the PulseKit analytics dashboard.
npm install @pulsekit/reactPeer dependencies: react >= 18.0.0, @supabase/supabase-js >= 2.0.0
Import the CSS and render the dashboard in a server component:
// app/admin/analytics/page.tsx
import { PulseDashboard } from "@pulsekit/react";
import { createClient } from "@/lib/supabase/server";
import "@pulsekit/react/pulse.css";
export default async function AnalyticsPage() {
const supabase = await createClient();
return <PulseDashboard supabase={supabase} />;
}<PulseDashboard>— All-in-one analytics dashboard with charts, maps, vitals, and errors
Use these to build a custom dashboard layout:
<PulseChart>— Daily traffic line/bar chart<PulseMap>— Visitor geography world map<PulseVitals>— Web Vitals breakdown (LCP, FID, CLS, etc.)<PulseErrors>— Error tracking table<PulseAggregates>— Aggregated stats display<KpiRow>— Key metrics summary row
<RefreshButton>— Triggers a materialized view refresh<PulseIcon>— PulseKit logo icon<PulseDateRangePicker>— Date range selector for filtering data
MIT