Cadence CRM — Sidebar template package

A complete CRM screen set in the far-left Sidebar navigation style, built on the vibn-ai-templates component library in the light/minimal theme.

Worked example brand: Cadence (the product) / Northwind (the example workspace).

Screens (13)

Auth + onboarding (full-screen, no sidebar yet — standard pattern)

Screen	File
Sign up	`crm-onboarding.jsx` → `CRMSignUp`
Sign in	`crm-onboarding.jsx` → `CRMSignIn`
Onboarding 1 · Name workspace	`CRMOnbWorkspace`
Onboarding 2 · About your team	`CRMOnbAbout`
Onboarding 3 · Import contacts	`CRMOnbImport`
Onboarding 4 · Invite team	`CRMOnbInvite`

In-app (every screen rendered inside SidebarShell)

Screen	File
Home / dashboard	`crm-pages.jsx` → `CRMHome`
People (contacts table)	`CRMPeople`
Company record (detail)	`CRMRecord`
Deals (pipeline kanban)	`CRMPipeline`
Inbox (threads + conversation)	`CRMInbox`
Reports (charts + leaderboard)	`CRMReports`
Settings → Members (admin)	`CRMSettings`

The sidebar pattern

Every in-app screen wraps its body in CRMShell, which configures the kit's SidebarShell:

const CRMShell = ({ active, children }) => (
  <SidebarShell
    brand={{ name: "Northwind", mark: <CadenceMark/> }}
    sections={crmSections(active)}   // sets the active nav item
    user={{ name: "Mira Reyes", email: "mira@northwind.io" }}
    search="Search or jump to…"
  >
    {children}
  </SidebarShell>
);

The nav is defined once in crmSections(active) — three groups: top-level (Home / Inbox / Tasks), Records (Companies / People / Deals), Workspace (Reports / Automations / Settings). Pass the active id and the matching item highlights.

Dependencies & load order

This package depends on vibn-ai-templates. Load order matters:

<link rel="stylesheet" href="vibn-ai-templates/tokens.css">

<script type="text/babel" src="vibn-ai-templates/icons.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/components.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/shells.jsx"></script>
<script type="text/babel" src="vibn-crm/crm-onboarding.jsx"></script>
<script type="text/babel" src="vibn-crm/crm-pages.jsx"></script>

Wrap the app in class="theme-minimal" (the default light theme). Because the whole kit is token-driven, you can re-skin the entire CRM to dark by swapping that one class to theme-dark — no page edits.

Showcase

Cadence CRM Templates.html lays all 13 screens out on a design canvas in three sections (auth, onboarding, in-app). Drag artboards to reorder, or open any one fullscreen (←/→/Esc).

What's template vs. reusable

Reusable — everything in vibn-ai-templates (Button, Table, Card, Badge, Avatar, Tabs, Input, SidebarShell, …).
Template — crm-pages.jsx and crm-onboarding.jsx are compositions. They show how to assemble the kit into real CRM screens. Copy them as starting points and swap in your data.

3.0 KiB Raw Blame History