# Demostack dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/demostack-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/demostack-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/demostack-dashboard-light-5579a06741e77222.png - Registry item: https://registry.watermelon.sh/r/demostack-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/demostack-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: `avatar`, `button`, `dropdown-menu`, `input-group`, `sidebar`, `tabs`, `tooltip`, `utils` ## Files ### `src/components/dashboards/demostack-dashboard/components/demostack/dashboard-content.tsx` ```tsx "use client"; import { useRef, useState } from "react"; import { ArrowUpRight, ChevronRight, X } from "lucide-react"; import { BgFolderVector, DashboardFolderPlusIcon, DashboardImagesIcon, DashboardVideoIcon, FigGraduationIcon, FigLightbulbIcon, FigPlayIcon, FigSparkleIcon, InspireFourIcon, InspireOneIcon, InspireThreeIcon, InspireTwoIcon, } from "./icons"; import { Button } from "@/components/ui/button"; const dashboardActions = [ { title: "Create a Demostack", description: "Record an example Demostack in under 2 minutes", image: "https://assets.watermelon.sh/components/bg-element-wave.webp", icon: DashboardFolderPlusIcon, }, { title: "Interactive Tutorial", description: "Get a high-level platform overview in a few clicks", image: "https://assets.watermelon.sh/components/bg-element-neon.webp", icon: DashboardVideoIcon, }, { title: "Explore Gallery", description: "Get inspired with examples and use cases", image: "https://assets.watermelon.sh/components/bg-element-sky.webp", icon: DashboardImagesIcon, }, ] as const; const dashboardTips = [ { title: "Use case tips from the CEO", description: "Our high-level recommendation", image: "https://assets.watermelon.sh/components/demostack-tip-1.webp", }, { title: "Personalized outbound", description: "Use variables to send personalized demos at scale", image: "https://assets.watermelon.sh/components/demostack-tip-2.webp", }, { title: "Tradeshow and expo demos", description: "Include in email sequences or follow-ups", image: "https://assets.watermelon.sh/components/demostack-tip-3.webp", }, { title: "Modular onboarding emails", description: "Include in email sequences or follow-ups", image: "https://assets.watermelon.sh/components/demostack-tip-4.webp", }, ] as const; const inspiredDemos = [ { title: "Mobile App Demo", icon: InspireOneIcon }, { title: "Payment Flow Demo", icon: InspireTwoIcon }, { title: "Team Workspace Demo", icon: InspireThreeIcon }, { title: "Analytics Platform Demo", icon: InspireFourIcon }, ] as const; const dashboardResources = [ { label: "Learning Academy", icon: FigGraduationIcon }, { label: "Knowledge Base", icon: FigLightbulbIcon }, { label: "How we use Demostack", icon: FigPlayIcon }, { label: "Product Updates", icon: FigSparkleIcon }, ] as const; export function DashboardContent() { return (

{dashboardActions.map((action) => ( ))}

); } function DashboardActionCard({ action, }: { action: (typeof dashboardActions)[number]; }) { const Icon = action.icon; return (

{action.title}

{action.description}

); } function DashboardTips() { const [visible, setVisible] = useState(true); const scrollRef = useRef(null); if (!visible) { return null; } function scrollRight() { if (scrollRef.current) { scrollRef.current.scrollBy({ left: scrollRef.current.clientWidth, behavior: "smooth", }); } } return (

Demostack Tips

Drive successful outcomes across multiple departments and interactive demos

{dashboardTips.map((tip) => (

{tip.title}

{tip.description}

))}

); } function ResourcesSection() { return (

Resources

{dashboardResources.map((resource) => { const Icon = resource.icon; return (

{resource.label}

); })}

); } function InspirationList() { return (

Get Inspired

{inspiredDemos.map((item) => { const Icon = item.icon; return (

{item.title}

); })}

); } ``` ### `src/components/dashboards/demostack-dashboard/components/demostack/demostacks-content.tsx` ```tsx "use client"; import { useMemo, useState, type ReactNode } from "react"; import { Archive, ArrowDownWideNarrow, Copy, EllipsisVertical, ExternalLink, Filter, FolderInput, FolderPlus, Grid2X2, Info, List, Pencil, Plus, Trash2, UserRound, Users, } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { demostacks, type Demostack } from "../../data"; const demostackAuthors = [ ...new Set(demostacks.map((demostack) => demostack.author)), ]; const sortLabels = { recent: "Recent", ascending: "Title A-Z", descending: "Title Z-A", } as const; type SortMode = keyof typeof sortLabels; type ViewMode = "grid" | "list"; function getInitials(name: string) { return name .trim() .split(/\s+/) .map((part) => part[0]) .join("") .toUpperCase() .slice(0, 2); } export function DemostacksContent() { const [sort, setSort] = useState("recent"); const [selectedAuthors, setSelectedAuthors] = useState([]); const [view, setView] = useState("grid"); const visibleDemostacks = useMemo(() => { const filtered = selectedAuthors.length ? demostacks.filter((demostack) => selectedAuthors.includes(demostack.author), ) : demostacks; if (sort === "ascending") { return [...filtered].sort((a, b) => a.title.localeCompare(b.title)); } if (sort === "descending") { return [...filtered].sort((a, b) => b.title.localeCompare(a.title)); } return filtered; }, [selectedAuthors, sort]); return (

Team Demostacks

Demostacks shared with everyone in your workspace

Demostacks Screenshots Create New Demostack New Screenshot

); } function TabCapsule({ value, children, }: { value: string; children: ReactNode; }) { return ( {children} ); } type DemostacksToolbarProps = { sort: SortMode; setSort: (sort: SortMode) => void; selectedAuthors: string[]; setSelectedAuthors: (authors: string[]) => void; view: ViewMode; setView: (view: ViewMode) => void; }; function DemostacksToolbar({ sort, setSort, selectedAuthors, setSelectedAuthors, view, setView, }: DemostacksToolbarProps) { function toggleAuthor(author: string, checked: boolean) { setSelectedAuthors( checked ? [...selectedAuthors, author] : selectedAuthors.filter((item) => item !== author), ); } return (

Team Shared with Team Personal Archive

{sortLabels[sort]} setSort(value as SortMode)} > Sort by {Object.entries(sortLabels).map(([value, label]) => ( {label} ))} Filter {selectedAuthors.length > 0 && ( {selectedAuthors.length} )} Filter by creator {demostackAuthors.map((author) => ( toggleAuthor(author, checked)} > {author} ))} {selectedAuthors.length > 0 && ( <> setSelectedAuthors([])}> Clear filters )} New folder Manage folders

); } function WorkspaceTab({ value, icon: Icon, children, }: { value: string; icon: typeof Users; children: ReactNode; }) { return ( {children} ); } function DemostackCollection({ demos, view, }: { demos: Demostack[]; view: ViewMode; }) { if (!demos.length) { return ( ); } return (

{demos.map((demostack) => (

{demostack.title}

{getInitials(demostack.author)} {demostack.author} · Mar 02

))}

); } function CardMenu({ title }: { title: string }) { return ( Open Rename Duplicate Move to folder Archive Delete ); } function EmptyState({ title, description, className, }: { title: string; description: string; className?: string; }) { return (

{title}

{description}

); } ``` ### `src/components/dashboards/demostack-dashboard/components/demostack/icons.tsx` ```tsx export function BgFolderVector({ className, fill0 = "#4338CB", }: { className?: string; fill0?: string; }) { return ( ); } export function BuildingIcon({ className }: { className?: string }) { return ( ); } export function CaretUpDownIcon({ className }: { className?: string }) { return ( ); } export function DashboardFolderPlusIcon({ className }: { className?: string }) { return ( ); } export function DashboardImagesIcon({ className }: { className?: string }) { return ( ); } export function DashboardVideoIcon({ className }: { className?: string }) { return ( ); } export function FigGraduationIcon({ className }: { className?: string }) { return ( ); } export function FigLightbulbIcon({ className }: { className?: string }) { return ( ); } export function FigPlayIcon({ className }: { className?: string }) { return ( ); } export function FigSparkleIcon({ className }: { className?: string }) { return ( ); } export function GroupGenericIcon({ className }: { className?: string }) { return ( ); } export function HomeIcon({ className }: { className?: string }) { return ( ); } export function NavCmdIcon({ className }: { className?: string }) { return ( ); } export function NavSearchIcon({ className }: { className?: string }) { return ( ); } export function NavTitleIcon({ className }: { className?: string }) { return ( ); } export function ShowcasesIcon({ className }: { className?: string }) { return ( ); } export function DemostacksIcon({ className }: { className?: string }) { return ( ); } export function VideosIcon({ className }: { className?: string }) { return ( ); } export function InspireOneIcon({ className }: { className?: string }) { return ( ); } export function InspireTwoIcon({ className }: { className?: string }) { return ( ); } export function InspireThreeIcon({ className }: { className?: string }) { return ( ); } export function InspireFourIcon({ className }: { className?: string }) { return ( ); } ``` ### `src/components/dashboards/demostack-dashboard/components/demostack/logo.tsx` ```tsx import type { SVGProps } from "react"; export const DemostackLogo = (props: SVGProps) => ( ); ``` ### `src/components/dashboards/demostack-dashboard/components/demostack/navigation.tsx` ```tsx import { createContext, useContext, useMemo, useState, type AnchorHTMLAttributes, type MouseEvent, type ReactNode, } from "react"; type DashboardNavigation = { pathname: string; navigate: (pathname: string) => void; }; const DashboardNavigationContext = createContext( null, ); export function DashboardNavigationProvider({ children, }: { children: ReactNode; }) { const [pathname, setPathname] = useState("/"); const value = useMemo( () => ({ pathname, navigate: setPathname }), [pathname], ); return ( {children} ); } export function useDashboardNavigation() { const context = useContext(DashboardNavigationContext); if (!context) { throw new Error( "useDashboardNavigation must be used within DashboardNavigationProvider", ); } return context; } export function DashboardLink({ href, onClick, ...props }: AnchorHTMLAttributes & { href: string }) { const { navigate } = useDashboardNavigation(); function handleClick(event: MouseEvent) { onClick?.(event); if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) { return; } event.preventDefault(); navigate(href); } return ; } ``` ### `src/components/dashboards/demostack-dashboard/components/demostack/sidebar.tsx` ```tsx "use client"; import { useState } from "react"; import { LogOut, Moon, Settings, Sun, User } from "lucide-react"; import { BuildingIcon, CaretUpDownIcon } from "./icons"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, useSidebar, } from "@/components/ui/sidebar"; import { adminNavigation, companies, currentUser, workspaceNavigation, } from "../../data"; import { DemostackLogo } from "./logo"; import { DashboardLink, useDashboardNavigation } from "./navigation"; import { useTheme } from "./theme-provider"; export function DashboardSidebar() { const { theme, toggleTheme } = useTheme(); const { pathname } = useDashboardNavigation(); const { isMobile, setOpenMobile, state } = useSidebar(); const collapsed = !isMobile && state === "collapsed"; const [selectedCompany, setSelectedCompany] = useState< (typeof companies)[number] >(companies[0]); return (

{selectedCompany.name}

{selectedCompany.role}

Select organization { const company = companies.find( ({ name }) => name === companyName, ); if (company) setSelectedCompany(company); }} > {companies.map((company) => (

{company.name}

{company.role}

))} {collapsed && ( MEMBERS [{selectedCompany.members.length}]

{selectedCompany.members.map((member) => ( {member.initials} ))}

)}

MEMBERS [{selectedCompany.members.length}]

{selectedCompany.members.map((member) => ( {member.initials} ))}