COMPONENTS / LAYOUTS

Dashboard shells

Application frames with different navigation density.

approvedv1.0.0in-reviewFigma not linked

Standards Figma mapping

Live previewUpdated 2026-10-09 · CSC Design System

SAMPLE WORKSPACE

Dashboard overview

Applications2,840Sample figure

In review184Sample figure

Completed1,928Sample figure

Sample applications by month

Recent applications

Demonstration data only.

Sample Applicant ACSC-24081Approved
Sample Applicant BCSC-24082Pending
Sample Applicant CCSC-24083Approved
Sample Applicant DCSC-24084Review

Design variations

Classic

Compact

Floating

Public

Implementation

// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { DashboardShell } from '@csc/ui';

export function Example() {
  return (
    <DashboardShell variant="classic" />
  );
}

Agent prompt

Copy a prompt for this component from the AI Development Hub.

When to use it

Application frames with different navigation density.

Dependencies: None beyond React. Source: packages/ui/src/shells.tsx. 1.0.0 — Classic, compact, floating, and public shells.