Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Traffic Sources Dashboard Block for Svelte

Six channels re-attributed under last click, first click or linear: one stacked share bar and a table of conversions, share, conversion rate and bounce rate, with the biggest mover named in a sentence.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Credit the right channel for each sale with this traffic sources dashboard for Svelte with Ark UI. A Segment Group in the header picks the attribution model: last click, first click or linear. Six channels, Organic search, Paid, Referral, Direct, Social and Email, re-derive from it inside a hairline frame with a plus mark on each corner. One stacked bar shows each channel's share of the same 1,860 conversions, and a table gives conversions with the change from last click, share, conversion rate against the channel's visits, and bounce rate. A polite line names the channel that moves most, such as "Direct loses 69% under first click, the biggest move against last click." It's built from Segment Group and Guides. For marketing and growth reviews.

FAQ

How do I fill it with my channels?

Edit CHANNELS: a name, its visits, a bounce rate and conversions, one count for each model in the order of MODELS (last click, first click, linear). Each model should sum to the same total, since attribution only moves credit between channels. Shares, rates, changes and the sentence are worked out from those counts.

What do the three models mean?

Last click gives each conversion to the final touch before it, first click to the touch that found the visitor, and linear splits it evenly across the touches. The line under the table says which is on, and last click is the baseline the others are read against.

How is the conversion rate worked out?

It's the channel's credited conversions divided by its visits, so it moves with the model while the visits and bounce rate stay put.

What stays local, and how do I wire it for real?

Everything: the counts are typed and nothing is tracked. Feed each model's counts from your attribution reports for the same period, and keep the period in the header sentence.

How does it look on a phone?

The control spans the width, and the table keeps channel, conversions with the change, and conversion rate, with share and bounce dropped. The stacked bar above carries the shares.

All 200 dashboard blocks