Content & Dashboard

Chart Card Shell

Dashboard card chrome with title, sub, a legend built from a series prop, and a default slot for any host-supplied chart.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add chart-card-shell

Built for astro.

Full docs for Chart Card Shell →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.1

Chart Card Shell

Traffic by source

Last 30 days

Organic
Direct

Chart slot — pass your chart component as the default slot

Props

Name	Type	Required	Default
title	string	No	'Traffic by source'
sub	string	No	'Last 30 days'
series	SeriesItem[]	No	[ { label: 'Organic', color: 'rgb(var(--vx-primary-600, 79 70 229))' }, { label: 'Direct', color: 'rgb(var(--vx-secondary-400, 163 163 163))' }, ]
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6	Yes
height	number	No	240
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/chart-card-shell/ChartCardShell.astro

Using the Chart Card Shell component

Install it with velocityx add chart-card-shell. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Chart Card Shell

Traffic by source

Props

File this creates

Using the Chart Card Shell component

Related components