Templates · Full app

SaaS Dashboard

A production-shaped SaaS shell — collapsible sidebar, search-first header, KPI row, and members table.

Preview

Every element on the page is a Nova primitive. Adjust tokens in src/styles.css.

Users

12.4k

MRR

$42k

Churn

1.2%

Members

AdaAdmin

GraceAdmin

RadiaAdmin

Install

Pull the template with the Nova CLI.

tsx

npx @novix-ui/cli template add saas-dashboard

Routes created

src/routes/_app/index.tsx
src/routes/_app/members.tsx
src/routes/_app/settings.tsx

Source

tsx

// src/routes/_app/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Avatar, Badge, Button, Card, IconButton, Input, Separator } from "@novix-ui/react";
// ...import your loader & UI
 
export const Route = createFileRoute("/_app/")({
  component: DashboardHome,
  loader: async () => await fetchWorkspaceStats(),
});
 
function DashboardHome() {
  const { kpis, members } = Route.useLoaderData();
  return (
    <AppShell>
      <KpiRow kpis={kpis} />
      <MembersCard members={members} />
    </AppShell>
  );
}

What's included

Sidebar navGlobal searchKPI cardsMembers tableSettings scaffoldEmpty states