Support Dashboard
A complete, production-ready Helpdesk and Support Dashboard interface.
It now features a dual-layout system:
- Chat View: A highly detailed 3-pane layout for resolving individual customer tickets. Features a sortable inbox, a responsive chat thread, and a collapsible metadata pane.
- Table View: A macro-level Ticket System layout. Automatically calculates top-level metrics (Total, Open, High Priority) based on the exact same data object, and displays an elegant, sortable list view.
Both layouts read the same
data object — swapping layout re-presents the identical tickets, so you can route /inbox to the table and /inbox/[id] to the chat view without duplicating state. Every preview is live: open a ticket, reply to it, or create a new one.Ticket workspace
A 3-pane drill-down: inbox, conversation thread and a collapsible properties pane.
- Pass
data - holding the tickets, SLA limits, filters and header strings.
layout"chat"- is the default drill-down view.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Support Dashboard
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs these for you. Run them yourself only if you are adding Support Dashboard to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
select and ui-liquid-glass are components, not packages — the shadcn CLI installs them as source files.
Examples
Table view
- Set
layout"table" - to re-present the same tickets as a sortable list under metric cards — those are computed from
data.tickets, not passed in.
Glass
- Set
variant"glass" - for translucent panes with backdrop blur.
color- here is a fixed set — unlike the other blocks it takes no hex, and unrecognised values fall back to
indigo.
Liquid glass
- Set
variant"liquid-glass" - for an interactive multi-layered liquid glass stack with dynamic SVG displacement waves, specular edge highlights, and high-contrast styling.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | SupportData | Required | The core data object containing tickets, SLA limits, filters, and
header strings. |
layout | "chat" | "table" | "chat" | Determines the overarching UI structure. chat creates a
3-pane drill-down view, while table creates a macro-level
list with metric cards. |
variant | "default" | "minimal" | "glass" | "liquid-glass" | "default" | Applies distinct visual themes to the borders, backgrounds, and drop
shadows of the dashboard components. liquid-glass wraps in an animated liquid SVG frosted stack, while glass provides translucent styling. |
color | "primary" | "indigo" | "rose" | "emerald" | "zinc" | "indigo" | Applies global accent colors to active states, send buttons, and
metric highlights. This is a fixed set — unlike the other blocks it
does not accept a hex string, and unrecognised values fall back to
"indigo". |
bgImage | string | Cloudinary landscape URL | Custom scenic backdrop image URL for liquid-glass and glass variants. |