page templates

<tc-block-dashboard>

An app shell with sidebar navigation, a top bar, and a content region fed by slots — drop in tc-stat, tc-table, and tc-card to build an admin screen.

import "@ra9/tan-compose-kit/blocks/dashboard"

Props

Name	Type	Default	Description
`brand`	`string`	`"Acme"`	Brand wordmark at the top of the sidebar.
`title`	`string`	`"Dashboard"`	Page title in the top bar.
`nav`	`Array<{ id, label, icon? }> (json)`	`[4 defaults]`	Sidebar entries. `icon` is optional and rendered as a glyph/emoji.
`active`	`string`	`first nav id`	Id of the active nav entry. Reflects to the host attribute.
`userName`	`string`	`"Alex Rivera"`	Name shown in the sidebar footer.
`userRole`	`string`	`"Administrator"`	Role shown under the name.

Events

Event	Detail	When
`tc-block-dashboard-nav`	`{ id, item, previous }`	Fires when a nav entry is activated (click or keyboard).

Slots

Slot	Description
`(default)`	Main content region — drop any kit component or HTML here.
`topbar`	Right-hand actions in the top bar (buttons, search, …).
`sidebar-bottom`	Replaces the user footer in the sidebar.

CSS variables

Variable	Default	Description
`--tc-block-side-bg`	`var(--tc-color-surface, #ffffff)`	Sidebar background.
`--tc-block-side-fg`	`var(--tc-color-ink, #14171f)`	Sidebar text color.
`--tc-block-side-soft`	`var(--tc-color-ink-soft, #4a5061)`	Inactive nav / secondary text color.
`--tc-block-side-active-bg`	`var(--tc-color-accent-soft, #efe2cf)`	Active nav background.
`--tc-block-surface`	`var(--tc-color-surface, #ffffff)`	Top bar background.
`--tc-block-rule`	`var(--tc-color-rule, #ece5d3)`	Border color.
`--tc-block-font`	`var(--tc-font-sans, …)`	Font family.

Examples

<tc-block-dashboard> provides the chrome — sidebar, top bar, content region — while your content stays in the light DOM. It renders the user's avatar with tc-avatar and switches nav through its active prop.

Basic usage

<tc-block-dashboard title="Customers"></tc-block-dashboard>

import "@ra9/tan-compose-kit/blocks/dashboard"; const shell = document.querySelector("tc-block-dashboard"); shell.nav = [ { id: "overview", label: "Overview", icon: "◉" }, { id: "customers", label: "Customers", icon: "◈" }, { id: "billing", label: "Billing", icon: "◫" }, ]; shell.addEventListener("tc-block-dashboard-nav", (e) => { // swap the slotted content for e.detail.id });

Slotting content

<tc-block-dashboard title="Overview" user-name="Ada" user-role="Owner"> <tc-grid min="220px" gap="3"> <tc-stat label="Revenue" prefix="$" value="48,210" trend="up"></tc-stat> <tc-stat label="Users" value="12,884" trend="up"></tc-stat> </tc-grid> <tc-button slot="topbar" variant="primary">New</tc-button> </tc-block-dashboard>

The blocks demo previews all five page templates with a switcher, including this one — with stats and a card slotted into the content region.

← All components