Components
Top pages
Most visited pages with share of traffic and a quick sort.
A ranked list of a site's most visited pages. Each row shows its rank, title and path, a share bar
against the busiest page, the view count and the percent change (green from 0, red below). The
running total rolls up, and the Views / Change sort switch slides the rows into their new order.
Preview
Top pages0 views, last 30 days
1Pricing /pricing18,420+24%
2Home /15,210+3%
3Components /components9,870+41%
4Agent docs /docs/agent6,340−8%
5Soft UI, the post /blog/soft-ui4,120+112%
6Changelog /changelog2,210−14%
Usage
<!-- include core.css + top-pages.css -->
<div class="dm-tpx dm-panel">
<div class="dm-tpx-h">
<div><b>Top pages</b><span class="dm-muted dm-tpx-sub"><span class="dm-num dm-tpx-tot">0</span> views, last 30 days</span></div>
<div class="dm-seg2 dm-tpx-sg" role="group" aria-label="Sort">
<button aria-pressed="true" data-v="v">Views</button>
<button aria-pressed="false" data-v="c">Change</button>
</div>
</div>
<div class="dm-tpx-list"><!-- rows rendered from your pages --></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
pages | TopPagesPage[] | The page rows. Each has path, title, views and change. |
title | string | Header text. Defaults to Top pages. |
period | string | After the total, like last 30 days. |
site | string | Put in front of each path in the row tips, like designme.dev. |
sort | views | change | How the rows are ordered. Leave it out to let the switch change it. |
defaultSort | views | change | The order before the switch is touched. Defaults to views. |
onSortChange | (sort) => void | Fires when the sort switch changes. |
page.path | string | The page's path, like /pricing. Also the row's key. |
page.title | string | Its name, like Pricing. |
page.views | number | Views over the period; the share bar is against the busiest page. |
page.change | number | Change in percent, like 24 or -8. Green from 0, red below. |
page.tip | string | Shown on hover. Defaults to site + path. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a surface with the shared shadow; the share bars use the accent mark token, the change chips
the ok / bad tints, and the ranks the mono font — all from the theme tokens, so the list reads
the same against either background. In Soft the card and the sort switch are rounder.