# Gridline dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/gridline-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/gridline-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/gridline-dashboard-light-1a5f891f9d5234d6.png - Registry item: https://registry.watermelon.sh/r/gridline-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/gridline-dashboard.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `button`, `card`, `drawer`, `dropdown-menu`, `input`, `sheet`, `switch`, `tooltip`, `utils` ## Files ### `src/components/dashboards/gridline-dashboard/assets/icons.tsx` ```tsx import type { SVGProps } from "react"; export function WorkspacesIcon(props: SVGProps) { return ( ); } export function SidebarToggleIcon(props: SVGProps) { return ( ); } ``` ### `src/components/dashboards/gridline-dashboard/assets/logo.tsx` ```tsx import { cn } from "@/lib/utils"; export function Logo({ showName = false, compact = false, }: { showName?: boolean; compact?: boolean; }) { return (
{showName && Gridline}
); } ``` ### `src/components/dashboards/gridline-dashboard/components/dashboard/dashboard-content.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import { ArrowUpRight, CalendarDays, Clock3, Command, Database, GitBranch, Radio, Search, TrendingUp, UsersRound, Zap, type LucideIcon, } from "lucide-react"; import { WorkspacesIcon } from "../../assets/icons"; import { DashboardLink } from "../navigation"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { dashboardOverview, workspaceCards, type WorkspaceCard, } from "../../data"; const workspaceIcons: Record = { database: Database, flexibility: Zap, planning: TrendingUp, operations: Radio, stakeholders: UsersRound, connections: GitBranch, }; function SectionTitle({ children, icon: Icon, }: { children: string; icon?: LucideIcon; }) { return (

{Icon ? (

); } function WorkspaceCardItem({ workspace }: { workspace: WorkspaceCard }) { const Icon = workspaceIcons[workspace.icon]; return ( {workspace.title}
    {workspace.details.map((detail) => (
  • {detail}
    • ))}
); } export function DashboardContent() { const [query, setQuery] = useState(""); const searchInputRef = useRef(null); const normalizedQuery = query.trim().toLowerCase(); const visibleWorkspaces = workspaceCards.filter((workspace) => [workspace.title, ...workspace.details] .join(" ") .toLowerCase() .includes(normalizedQuery), ); useEffect(() => { function focusSearch(event: KeyboardEvent) { if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") { event.preventDefault(); searchInputRef.current?.focus(); } } window.addEventListener("keydown", focusSearch); return () => window.removeEventListener("keydown", focusSearch); }, []); return (

{dashboardOverview.company}

Recents

Your recent works will appear here

Workspaces {visibleWorkspaces.length > 0 ? (
{visibleWorkspaces.map((workspace) => ( ))}
) : (

No workspaces match your search.

)}
); } ``` ### `src/components/dashboards/gridline-dashboard/components/dashboard/flexibility-dashboard.tsx` ```tsx import { useEffect, useMemo, useState, type ComponentType } from "react"; import { Building2, ChevronDown, ChevronLeft, ChevronRight, CircuitBoard, Database, FileText, GitCompare, Grid3X3, Map, MapPin, MessageSquare, Minus, Network, PanelLeft, Plus, Search, SlidersHorizontal, Table2, X, Zap, } from "lucide-react"; import { Button, buttonVariants } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; import { Input } from "@/components/ui/input"; import { Switch } from "@/components/ui/switch"; import { flexibilityDashboard, gridAssets, networkBasemapUrl, networkRegions, voltageLevelFilters, type GridAsset, } from "../../data"; import { cn } from "@/lib/utils"; type ToolTab = { label: string; icon: ComponentType<{ className?: string; "aria-hidden"?: boolean }>; }; const toolTabs: ToolTab[] = [ { label: "Browse", icon: Database }, { label: "Map", icon: Map }, { label: "Graph", icon: Network }, { label: "Circuit", icon: CircuitBoard }, { label: "Table", icon: Table2 }, { label: "Table++", icon: Grid3X3 }, { label: "LTDS Table Generator", icon: FileText }, { label: "Compare", icon: GitCompare }, ]; const voltageDotStyles: Record< (typeof voltageLevelFilters)[number]["color"], string > = { neutral: "bg-foreground", green: "bg-green-600", yellow: "bg-yellow-400", red: "bg-red-500", blue: "bg-blue-600", brown: "bg-amber-800", }; const regionDotStyles: Record = { blue: "bg-blue-500", purple: "bg-violet-500", red: "bg-red-500", green: "bg-emerald-500", }; function ToolNavigation({ activeTool, onToolChange, }: { activeTool: string; onToolChange: (tool: string) => void; }) { return ( ); } function AssetList({ selectedAsset, onSelectAsset, showHeader = true, }: { selectedAsset: GridAsset | null; onSelectAsset: (asset: GridAsset) => void; showHeader?: boolean; }) { const [query, setQuery] = useState(""); const [expandedAssets, setExpandedAssets] = useState>( () => new Set(selectedAsset ? [selectedAsset.id] : []), ); const visibleAssets = useMemo(() => { const normalizedQuery = query.trim().toLowerCase(); return gridAssets.filter((asset) => `${asset.name} ${asset.voltage}`.toLowerCase().includes(normalizedQuery), ); }, [query]); function toggleAsset(asset: GridAsset) { onSelectAsset(asset); setExpandedAssets((current) => { const next = new Set(current); if (next.has(asset.id)) next.delete(asset.id); else next.add(asset.id); return next; }); } return (
{showHeader && (

{flexibilityDashboard.regionName} Assets

{flexibilityDashboard.substationCount} Substations

)}
{visibleAssets.map((asset) => { const isExpanded = expandedAssets.has(asset.id); return (
{isExpanded && (
Voltage {asset.voltage} Equipment {asset.equipmentCount} items
)}
); })}
); } function FilterPanel({ className, onCollapse, }: { className?: string; onCollapse?: () => void; }) { const [enabledVoltages, setEnabledVoltages] = useState>( () => new Set(voltageLevelFilters.map(({ id }) => id)), ); const [showSubstations, setShowSubstations] = useState(true); function setVoltageEnabled(id: string, enabled: boolean) { setEnabledVoltages((current) => { const next = new Set(current); if (enabled) next.add(id); else next.delete(id); return next; }); } return (

Voltage Levels

{onCollapse && ( )}
{voltageLevelFilters.map((level) => (
{level.label} setVoltageEnabled(level.id, checked) } aria-label={`Show ${level.label}`} />
))}

Option

Show Substations

Grid Regions

{networkRegions.map((region) => ( ))}

Loaded

{flexibilityDashboard.substationCount} Substations

{flexibilityDashboard.mappedSubstationCount} mapped on map

Location DB: {flexibilityDashboard.locationCount} entries

); } function DetailsPanel({ asset, showHeader = true, }: { asset: GridAsset; showHeader?: boolean; }) { const [overviewOpen, setOverviewOpen] = useState(true); const [identifierOpen, setIdentifierOpen] = useState(false); return (
{showHeader && (

Details

{flexibilityDashboard.assetType}

)}

{asset.name} {asset.voltage}

{flexibilityDashboard.assetType}
{overviewOpen && (
Name
{asset.name} {asset.voltage}
Equipment
{asset.equipmentCount} Items
Voltage Levels
{flexibilityDashboard.voltageLevels.length}
)}
{identifierOpen && (
Asset ID
{asset.id}
Region
{flexibilityDashboard.regionName}
)}
); } function MobileUtilities({ selectedAsset, onSelectAsset, detailsOpen, onDetailsOpenChange, }: { selectedAsset: GridAsset | null; onSelectAsset: (asset: GridAsset) => void; detailsOpen: boolean; onDetailsOpenChange: (open: boolean) => void; }) { return (
{flexibilityDashboard.regionName} Assets Browse available substations Map filters Filter voltage levels and grid regions
{selectedAsset && ( Substation details Details for the selected substation )}
); } function AssetMapPoint({ asset, selected, onSelect, }: { asset: GridAsset; selected: boolean; onSelect: () => void; }) { return ( ); } export function FlexibilityDashboard() { const [activeTool, setActiveTool] = useState("Browse"); const [selectedAsset, setSelectedAsset] = useState(null); const [showAssetsPanel, setShowAssetsPanel] = useState(true); const [showFilterPanel, setShowFilterPanel] = useState(false); const [mobileDetailsOpen, setMobileDetailsOpen] = useState(false); const [isCompact, setIsCompact] = useState(() => typeof window === "undefined" ? false : !window.matchMedia("(min-width: 64rem)").matches, ); const [zoom, setZoom] = useState(1); useEffect(() => { const desktopQuery = window.matchMedia("(min-width: 64rem)"); const syncViewport = () => setIsCompact(!desktopQuery.matches); syncViewport(); desktopQuery.addEventListener("change", syncViewport); return () => desktopQuery.removeEventListener("change", syncViewport); }, []); function selectAsset(asset: GridAsset, openMobileDetails = false) { setSelectedAsset(asset); if (openMobileDetails && isCompact) setMobileDetailsOpen(true); } function clearSelection() { setMobileDetailsOpen(false); setSelectedAsset(null); } function handleMobileDetailsChange(open: boolean) { if (open) { setMobileDetailsOpen(true); return; } clearSelection(); } return (
{showAssetsPanel ? (

{flexibilityDashboard.regionName} Assets

{flexibilityDashboard.substationCount} Substations

) : (
)} {selectedAsset && (

Details

{selectedAsset.name}

)}
{showAssetsPanel && ( )}
Substation asset map
{showFilterPanel ? ( ) : ( )}
{gridAssets.map((asset) => ( selectAsset(asset, true)} /> ))}
Attribution: {flexibilityDashboard.attributionCompany}
{selectedAsset && ( )}
); } ``` ### `src/components/dashboards/gridline-dashboard/components/dashboard/modelling-dashboard.tsx` ```tsx import { useEffect, useState } from "react"; import { ArrowUpRight, ChevronDown, ChevronLeft, Database, GitBranch, MapPin, Shield, type LucideIcon, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, } from "@/components/ui/drawer"; import { modellingActions, modellingDashboard, modelWorkflowStatuses, networkBasemapUrl, networkRegions, type ModellingAction, type NetworkRegion, } from "../../data"; import { cn } from "@/lib/utils"; const actionIcons: Record = { database: Database, comparison: GitBranch, clearview: Shield, }; const markerStyles: Record = { blue: "border-blue-700 bg-blue-500", purple: "border-violet-700 bg-violet-500", red: "border-red-700 bg-red-500", green: "border-emerald-700 bg-emerald-500", }; const markerPositions: Record = { "north-east": "right-3 top-[9%] lg:left-[72%] lg:right-auto", central: "right-12 top-[28%] lg:left-[57%] lg:right-auto", west: "left-3 top-[50%] lg:left-[40%]", "south-east": "right-6 top-[71%] lg:left-[68%] lg:right-auto", }; function StatusDotLabel({ children }: { children: string }) { return (

{children}

); } function ModelSummary() { return (
Current Model

{modellingDashboard.currentModel}

{modellingDashboard.currentVersion}

Latest Update

{modellingDashboard.latestUpdate}

Status

{modellingDashboard.coverage} Coverage

Last Published:{" "} {modellingDashboard.lastPublished}

{modellingDashboard.openIssues} open issues

); } function PrimaryAction({ action }: { action: ModellingAction }) { const Icon = actionIcons[action.icon]; return ( ); } function RegionMarker({ region, selected, onSelect, }: { region: NetworkRegion; selected: boolean; onSelect: () => void; }) { return ( ); } function MapLegend() { return (
{networkRegions.map((region) => (
{region.legendName}
))}
); } function Map({ selectedRegion, onSelectRegion, }: { selectedRegion: NetworkRegion | null; onSelectRegion: (region: NetworkRegion) => void; }) { return (
Network regions across Maryland and Delaware
{networkRegions.map((region) => { const key = `${region.name}-${region.color}`; return ( onSelectRegion(region)} /> ); })}
); } function InformationPanelHeader({ region, mobile = false, onCollapse, }: { region: NetworkRegion; mobile?: boolean; onCollapse: () => void; }) { const CollapseIcon = mobile ? ChevronDown : ChevronLeft; return (

{modellingDashboard.title}

{region.name}

); } function InformationPanelBody({ region }: { region: NetworkRegion }) { return (

{modellingDashboard.description}

{modellingDashboard.version} {modelWorkflowStatuses.publication} {modelWorkflowStatuses.validation}

{modellingActions.map((action) => ( ))}
); } function DesktopInformationPanel({ region, onCollapse, }: { region: NetworkRegion; onCollapse: () => void; }) { return (
); } function MobileInformationDrawer({ region, open, onCollapse, }: { region: NetworkRegion; open: boolean; onCollapse: () => void; }) { return ( { if (!nextOpen) onCollapse(); }} > {modellingDashboard.title} Network model information and primary actions
); } export function ModellingDashboard() { const [selectedRegion, setSelectedRegion] = useState( null, ); const [isMobile, setIsMobile] = useState(() => typeof window === "undefined" ? false : !window.matchMedia("(min-width: 48rem)").matches, ); useEffect(() => { const desktopQuery = window.matchMedia("(min-width: 48rem)"); const syncViewport = () => setIsMobile(!desktopQuery.matches); syncViewport(); desktopQuery.addEventListener("change", syncViewport); return () => desktopQuery.removeEventListener("change", syncViewport); }, []); const clearSelection = () => setSelectedRegion(null); return (
{selectedRegion && ( <> )}
); } ``` ### `src/components/dashboards/gridline-dashboard/components/layout/app-sidebar.tsx` ```tsx import { ChevronLeft, Database, FileText, GitBranch, House, MoonStar, Radio, SunDim, TrendingUp, UsersRound, Zap, } from "lucide-react"; import { useState } from "react"; import { buttonVariants } from "@/components/ui/button"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; import { Switch } from "@/components/ui/switch"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { SidebarToggleIcon } from "../../assets/icons"; import { Logo } from "../../assets/logo"; import { ProfileMenu } from "../shared/profile-menu"; import { SidebarNavigationItem, type NavigationItem, } from "./sidebar-navigation-item"; export const primaryNavigation: NavigationItem[] = [ { href: "/", label: "Dashboard", shortLabel: "Dashboard", icon: House }, { href: "/modelling", label: "System modelling and data", shortLabel: "Modelling", icon: Database, }, { href: "/flexibility", label: "Flexibility", shortLabel: "Flexibility", icon: Zap, }, { href: "/planning", label: "Planning and investment", shortLabel: "Planning", icon: TrendingUp, }, { href: "/operations", label: "Operations interface", shortLabel: "Operations", icon: Radio, }, { href: "/stakeholders", label: "Stakeholders and public", shortLabel: "Stakeholders", icon: UsersRound, }, { href: "/connections", label: "Connections and queue", shortLabel: "Connections", icon: GitBranch, }, ]; type ThemeProps = { isDark: boolean; onThemeChange: (isDark: boolean) => void; }; export function AppSidebar() { return ( ); } export function MobileNavigation({ isDark, onThemeChange }: ThemeProps) { const [open, setOpen] = useState(false); return ( Navigate between dashboard pages
{isDark ? (
); } ``` ### `src/components/dashboards/gridline-dashboard/components/layout/dashboard-shell.tsx` ```tsx import { useEffect, useState, type ReactNode } from "react"; import { TooltipProvider } from "@/components/ui/tooltip"; import { AppSidebar } from "./app-sidebar"; import { TopNavbar } from "./top-navbar"; export function DashboardShell({ children }: { children: ReactNode }) { const [isDark, setIsDark] = useState(() => typeof document === "undefined" ? false : document.documentElement.classList.contains("dark"), ); useEffect(() => { const root = document.documentElement; const syncTheme = () => setIsDark(root.classList.contains("dark")); const observer = new MutationObserver(syncTheme); syncTheme(); observer.observe(root, { attributes: true, attributeFilter: ["class"], }); return () => observer.disconnect(); }, []); function handleThemeChange(dark: boolean) { document.documentElement.classList.toggle("dark", dark); localStorage.setItem("theme", dark ? "dark" : "light"); setIsDark(dark); } return (
{children}
); } ``` ### `src/components/dashboards/gridline-dashboard/components/layout/sidebar-navigation-item.tsx` ```tsx import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { LucideIcon } from "lucide-react"; import { useDashboardNavigation } from "../navigation"; export type NavigationItem = { href: string; label: string; shortLabel: string; icon: LucideIcon; }; type SidebarNavigationItemProps = { item: NavigationItem; showLabel?: boolean; onNavigate?: () => void; }; export function SidebarNavigationItem({ item, showLabel = false, onNavigate, }: SidebarNavigationItemProps) { const { pathname, navigate } = useDashboardNavigation(); const active = item.href === "/" ? pathname === item.href : pathname.startsWith(item.href); const Icon = item.icon; const className = cn( buttonVariants({ variant: "ghost", size: showLabel ? "lg" : "icon-lg", }), "rounded-lg text-muted-foreground", showLabel && "w-full justify-start gap-3", active && "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary", ); const content = ( <>