# Capitalio dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/capitalio-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/capitalio-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/capitalio-dashboard-light-4f47819f34d56341.png - Registry item: https://registry.watermelon.sh/r/capitalio-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/watermelon/capitalio-dashboard.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `@base-ui/react`, `recharts` - Registry items: `avatar`, `button`, `dropdown-menu`, `sidebar`, `utils` ## Files ### `src/components/dashboards/capitalio-dashboard/components/capitalio/analytics-page.tsx` ```tsx import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip as RechartsTooltip, XAxis, YAxis, } from 'recharts' import { analyticsDataByPeriod, type PeriodValue } from '../../data' import { Button } from '@/components/ui/button' import { ChartMarker, DashboardCard, DashboardChartTooltip, DetailHeader, DetailTag, useDashboardPeriod, } from './shared' type AnalyticsByPeriod = typeof analyticsDataByPeriod type AnalyticsData = AnalyticsByPeriod[PeriodValue] type AnalyticsPerformance = AnalyticsData['performance'] type AnalyticsMetric = AnalyticsData['metrics'][number] type AnalyticsSeries = AnalyticsData['returns']['series'][number] type ChartDataRow = { label: string [key: string]: number | string } function axisLabelsFrom(data: readonly { label: string; axisLabel?: string }[]) { return data .filter((point) => point.axisLabel) .map((point) => point.axisLabel) } function seriesNames(series: readonly { dataKey: string; label: string }[]) { return Object.fromEntries(series.map((item) => [item.dataKey, item.label])) } function seriesColors(series: readonly { dataKey: string; color: string }[]) { return Object.fromEntries(series.map((item) => [item.dataKey, item.color])) } function hoverFill(color: string) { return `color-mix(in oklab, ${color} 78%, var(--foreground))` } function valuesFor(data: readonly ChartDataRow[], series: readonly { dataKey: string }[]) { return data.flatMap((row) => series.map((item) => Number(row[item.dataKey]) || 0)) } function roundedDomain(values: readonly number[]) { const min = Math.min(...values) const max = Math.max(...values) const lower = Math.min(0, Math.floor(min / 2) * 2) const upper = Math.max(2, Math.ceil(max / 2) * 2) return [lower, upper] as const } function AnalyticsLegend({ series }: { series: readonly { label: string; color: string }[] }) { return (

{series.map((item) => (

{item.label}

))}

) } function AnalyticsPerformanceChart({ performance }: { performance: AnalyticsPerformance }) { const chartData = performance.data.map((point) => ({ label: point.label, portfolio: point.portfolio, benchmark: point.benchmark, balanced: point.balanced, })) const axisLabels = axisLabelsFrom(performance.data) return ( {performance.trend}

`${value}K`} tickLine={false} width={48} /> `${value}K`} /> } />

{axisLabels.map((label) => ( {label} ))}

) } function AnalyticsMetricChart({ metric }: { metric: AnalyticsMetric }) { if (metric.type === 'bars') { const chartData = metric.data.map((point) => ({ label: point.label, value: point.value, })) return ( `${value}%`} /> } /> ) } const chartData = metric.data.map((point) => ({ label: point.label, x: point.x, value: 44 - point.y, })) const xDomain = [chartData[0]?.x ?? 0, chartData[chartData.length - 1]?.x ?? 0] return ( } /> ) } function AnalyticsMetricCard({ metric }: { metric: AnalyticsMetric }) { return (

{metric.title}

{metric.value}

{metric.description}

) } function ReturnsChart({ data, series, }: { data: AnalyticsData['returns']['data'] series: readonly AnalyticsSeries[] }) { const chartData = data.map((row) => ({ ...row })) const [yMin, yMax] = roundedDomain(valuesFor(chartData, series)) return ( `${value}%`} tickLine={false} width={40} /> `${value}%`} /> } /> {series.map((item) => ( ))} ) } function IncomeChart({ income }: { income: AnalyticsData['income'] }) { const chartData = income.data.map((row) => ({ ...row })) const stacks = chartData.map((row) => income.series.reduce((total, item) => total + (Number(row[item.dataKey]) || 0), 0), ) const yMax = Math.max(5, Math.ceil(Math.max(...stacks))) return ( `${value}.0K`} tickLine={false} width={48} /> `$${value}K`} /> } /> {income.series.map((item, index) => ( ))} ) } function AnalyticsPanel({ title, subtitle, status, series, children, }: { title: string subtitle: string status: string series: readonly { label: string; color: string }[] children: React.ReactNode }) { return ( {status}

{children}

) } export function AnalyticsPage() { const period = useDashboardPeriod() const analytics = analyticsDataByPeriod[period] return (

{analytics.metrics.map((metric) => ( ))}

) } ``` ### `src/components/dashboards/capitalio-dashboard/components/capitalio/dashboard-page.tsx` ```tsx import { Area, AreaChart as RechartsAreaChart, Bar, BarChart, Pie, PieChart, ResponsiveContainer, Tooltip as RechartsTooltip, XAxis, YAxis, } from 'recharts' import { dashboardBottomByPeriod, dashboardDetailByPeriod, dashboardSummaryCardsByPeriod, type PeriodValue, } from '../../data' import { DashboardAnalyticsUpIcon, Dashboard3dScaleIcon, DashboardArrowUpIcon, DashboardArrowUpRightIcon, DashboardMoneyBagIcon, DashboardPieChartIcon, DashboardReloadHorizontalIcon, DashboardShieldIcon, DashboardTaxesIcon, } from './icons' import { Button } from '@/components/ui/button' import { ChartMarker, DashboardCard, DashboardChartTooltip, DetailHeader, DetailTag, toneColor, useDashboardPeriod, } from './shared' import { cn } from '@/lib/utils' const cardIcons = { wallet: DashboardMoneyBagIcon, trend: DashboardAnalyticsUpIcon, pie: DashboardPieChartIcon, shield: DashboardShieldIcon, } as const const insightIcons = { scale: Dashboard3dScaleIcon, taxes: DashboardTaxesIcon, reload: DashboardReloadHorizontalIcon, } as const type SummaryCardsByPeriod = typeof dashboardSummaryCardsByPeriod type SummaryCard = SummaryCardsByPeriod[PeriodValue][number] type DetailByPeriod = typeof dashboardDetailByPeriod type DashboardDetail = DetailByPeriod[PeriodValue] type BottomByPeriod = typeof dashboardBottomByPeriod type DashboardBottom = BottomByPeriod[PeriodValue] type HoldingRow = DashboardBottom['holdings']['rows'][number] type InsightItem = DashboardBottom['insights']['items'][number] type ChartPoint = { label: string x: number y: number } type ReturnBarShapeProps = { x?: number y?: number width?: number height?: number payload?: { isActive?: boolean } } function createChartData(points: readonly ChartPoint[], baseline: number) { return points.map((point) => ({ name: point.label, x: point.x, value: baseline - point.y, })) } function getEveryOtherLabels(points: readonly { label: string }[]) { return points .filter((_, index) => index % 2 === 0) .map((point) => point.label) } function IconBadge({ card }: { card: SummaryCard }) { const Icon = cardIcons[card.icon] return (

) } function AxisLabels({ labels }: { labels: readonly string[] }) { return (

{labels.map((label, index) => ( {label} ))}

) } function LineChart({ card }: { card: Extract }) { const chartData = createChartData(card.chart.points, 58) const axisLabels = getEveryOtherLabels(card.chart.points) const xDomain = [chartData[0]?.x ?? 0, chartData[chartData.length - 1]?.x ?? 0] return (

} />

) } function AreaChart({ card }: { card: Extract }) { const chartData = createChartData(card.chart.points, 48) const axisLabels = getEveryOtherLabels(card.chart.points) const xDomain = [chartData[0]?.x ?? 0, chartData[chartData.length - 1]?.x ?? 0] return (

} />

) } function ReturnChart({ card }: { card: Extract }) { const chartData = card.bars.map((bar, index) => ({ name: bar.label, value: bar.value, isActive: index === card.bars.length - 1, })) const axisLabels = card.bars .filter((_, index) => index % 2 === 0) .map((bar) => bar.label) return (

{card.target.gained} {card.target.goal}

} /> ( )} dataKey="value" fill="var(--chart-1)" isAnimationActive shape={(props: ReturnBarShapeProps) => ( )} />

) } function AllocationChart({ card }: { card: Extract }) { const chartData = [ Object.fromEntries(card.allocations.map((allocation) => [allocation.label, allocation.share])), ] const patternIds = card.allocations.map((allocation, index) => ( `${card.id}-${index}-${allocation.label.toLowerCase().replaceAll(/[^a-z0-9]+/g, '-')}-pattern` )) return (

{card.allocations.map((allocation, index) => ( ))} {card.allocations.map((allocation, index) => ( ))}

{card.allocations.map((allocation) => (

{allocation.label} {allocation.value}

))}

) } function SummaryVisualization({ card }: { card: SummaryCard }) { if (card.id === 'asset-classes') { return } if (card.id === 'portfolio-return') { return } if (card.id === 'risk-score') { return } return } function SummaryCard({ card }: { card: SummaryCard }) { return (

{card.title}

{card.value} {'suffix' in card ? ( {card.suffix} ) : null}

{'change' in card ? (

{card.change.tone === 'positive' ? ( ) : null} {card.change.value} {card.change.label}

) : null} {'target' in card ? (

{card.target.current}{' '} {card.target.label}

) : null}

) } function PerformanceChart({ performance }: { performance: DashboardDetail['performance'] }) { const chartData = performance.data.map((point) => ({ name: point.label, portfolio: point.portfolio, benchmark: point.benchmark, })) const axisLabels = performance.data .filter((point) => 'axisLabel' in point) .map((point) => point.axisLabel) return (

`${value}K`} tickLine={false} width={48} /> `${value}K`} /> } />

{axisLabels.map((label) => ( {label} ))}

) } function PerformancePanel({ performance }: { performance: DashboardDetail['performance'] }) { return ( {performance.trend}

{performance.legend.map((item) => (

{item.label}

))}

{performance.metrics.map((metric) => (

{metric.label}

{metric.value}

{metric.change}

))}

) } function AllocationDonut({ allocation }: { allocation: DashboardDetail['allocation'] }) { const chartData = allocation.items.map((item) => ({ name: item.label, value: item.percent, fill: item.color, })) return (

`${value}%`} /> } />

{allocation.centerValue}

{allocation.centerLabel}

) } function AllocationPanel({ allocation }: { allocation: DashboardDetail['allocation'] }) { return ( {allocation.status}

{allocation.items.map((item) => (

{item.label}

{item.value} {item.percent}%

))}

) } function DashboardDetailSection({ detail }: { detail: DashboardDetail }) { return (

) } function HoldingAsset({ row }: { row: HoldingRow }) { return (

{row.asset}

{row.type}

) } function HoldingsTable({ holdings }: { holdings: DashboardBottom['holdings'] }) { return (

{holdings.columns[0]}

{holdings.columns[1]}

{holdings.columns[2]}

{holdings.columns[3]}

{holdings.columns[4]}

{holdings.columns[5]}

{holdings.rows.map((row) => (

{row.no}

{row.value}

{row.allocation}

{row.return}

{row.day}

))}

{holdings.rows.map((row) => (

{row.no}

Value

{row.value}

Allocation

{row.allocation}

Return

{row.return}

24H

{row.day}

))}

) } function InsightIcon({ item }: { item: InsightItem }) { const Icon = insightIcons[item.icon] return (

) } function SmartInsightsPanel({ insights }: { insights: DashboardBottom['insights'] }) { return ( {insights.status}

{insights.items.map((item, index) => (

0 && 'border-t border-border pt-6')} >

{item.title}

{item.description}

))}

) } function DashboardBottomSection({ bottom }: { bottom: DashboardBottom }) { return (

) } export function DashboardPage() { const period = useDashboardPeriod() const dashboardSummaryCards = dashboardSummaryCardsByPeriod[period] const dashboardDetail = dashboardDetailByPeriod[period] const dashboardBottom = dashboardBottomByPeriod[period] return (

{dashboardSummaryCards.map((card) => ( ))}

) } ``` ### `src/components/dashboards/capitalio-dashboard/components/capitalio/icons.tsx` ```tsx import type { SVGProps } from 'react' import { cn } from '@/lib/utils' type IconProps = SVGProps function Icon({ className, ...props }: IconProps) { return ( ) } export function HomeIcon({ className, ...props }: IconProps) { return ( ) } export function ClockIcon({ className, ...props }: IconProps) { return ( ) } export function WarningIcon({ className, ...props }: IconProps) { return ( ) } export function FileIcon({ className, ...props }: IconProps) { return ( ) } export function ShieldCheckIcon({ className, ...props }: IconProps) { return ( ) } export function PlayCircleIcon({ className, ...props }: IconProps) { return ( ) } export function FolderIcon({ className, ...props }: IconProps) { return ( ) } export function LinkIcon({ className, ...props }: IconProps) { return ( ) } export function UsersIcon({ className, ...props }: IconProps) { return ( ) } export function GearIcon({ className, ...props }: IconProps) { return ( ) } export function QuestionIcon({ className, ...props }: IconProps) { return ( ) } type ToggleIconProps = IconProps & { pressed?: boolean } export function ToggleIcon({ className, pressed = false, ...props }: ToggleIconProps) { return ( ) } export function UserIcon({ className, ...props }: IconProps) { return ( ) } export function SearchIcon({ className, ...props }: IconProps) { return ( ) } export function CommandIcon({ className, ...props }: IconProps) { return ( ) } export function BellIcon({ className, ...props }: IconProps) { return ( ) } export function CaretDownIcon({ className, ...props }: IconProps) { return ( ) } export function CloseIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarCollapseIcon({ className, ...props }: IconProps) { return ( ) } function SmallIcon({ className, ...props }: IconProps) { return ( ) } export function PlayIcon({ className, ...props }: IconProps) { return ( ) } export function PauseIcon({ className, ...props }: IconProps) { return ( ) } export function ArrowUpRightIcon({ className, ...props }: IconProps) { return ( ) } export function SealCheckIcon({ className, ...props }: IconProps) { return ( ) } export function ArrowsCounterClockwiseIcon({ className, ...props }: IconProps) { return ( ) } export function SpinnerGapIcon({ className, ...props }: IconProps) { return ( ) } export function FadersHorizontalIcon({ className, ...props }: IconProps) { return ( ) } export function FileArrowUpIcon({ className, ...props }: IconProps) { return ( ) } export function CheckCircleIcon({ className, ...props }: IconProps) { return ( ) } export function TimelineCheckIcon({ className, ...props }: IconProps) { return ( ) } export function StatusWarningIcon({ className, ...props }: IconProps) { return ( ) } // --- Inline sidebar icons (converted from Figma SVG exports) --- export function SidebarHomeActiveIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarHomeMutedIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarNetWorthIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarAnalyticsIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarFolderIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarLinkIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarAiIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarRealEstateIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarFixedIncomeIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarSettingsIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarNotificationsIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarLogoutIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarChevronIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardMoneyBagIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardAnalyticsUpIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardPieChartIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardShieldIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardArrowUpIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardArrowUpRightIcon({ className, ...props }: IconProps) { return ( ) } export function Dashboard3dScaleIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardTaxesIcon({ className, ...props }: IconProps) { return ( ) } export function DashboardReloadHorizontalIcon({ className, ...props }: IconProps) { return ( ) } export function TopbarCalendarIcon({ className, ...props }: IconProps) { return ( ) } export function TopbarChevronIcon({ className, ...props }: IconProps) { return ( ) } export function TopbarExportIcon({ className, ...props }: IconProps) { return ( ) } ``` ### `src/components/dashboards/capitalio-dashboard/components/capitalio/logo.tsx` ```tsx import type { SVGProps } from 'react' import { cn } from '@/lib/utils' export function CapitalioLogo({ className, ...props }: SVGProps) { return ( ) } ``` ### `src/components/dashboards/capitalio-dashboard/components/capitalio/navigation.tsx` ```tsx import { createContext, useContext, useMemo, useState, type AnchorHTMLAttributes, type MouseEvent, type ReactNode, } from 'react' import { defaultDashboardPeriod, type PeriodValue } from '../../data' type DashboardNavigation = { pathname: string navigate: (pathname: string) => void period: PeriodValue setPeriod: (period: PeriodValue) => void } const DashboardNavigationContext = createContext( null, ) export function DashboardNavigationProvider({ children, }: { children: ReactNode }) { const [pathname, setPathname] = useState('/') const [period, setPeriod] = useState(defaultDashboardPeriod) const value = useMemo( () => ({ pathname, navigate: setPathname, period, setPeriod }), [pathname, period], ) return ( {children} ) } export function useDashboardNavigation() { const context = useContext(DashboardNavigationContext) if (!context) { throw new Error( 'useDashboardNavigation must be used within DashboardNavigationProvider', ) } return context } export function DashboardLink({ href, onClick, ...props }: AnchorHTMLAttributes & { href: string }) { const { navigate } = useDashboardNavigation() function handleClick(event: MouseEvent) { onClick?.(event) if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) { return } event.preventDefault() navigate(href) } return } ``` ### `src/components/dashboards/capitalio-dashboard/components/capitalio/shared.tsx` ```tsx import { dashboardPeriods, defaultDashboardPeriod } from '../../data' import { cn } from '@/lib/utils' import { useDashboardNavigation } from './navigation' type DashboardTooltipPayload = { name?: string value?: number | string color?: string dataKey?: string | number payload?: { name?: string fill?: string } } type DashboardChartTooltipProps = { active?: boolean label?: string | number payload?: readonly DashboardTooltipPayload[] names?: Record colors?: Record valueFormatter?: (value: number | string, dataKey: string) => React.ReactNode } export function useDashboardPeriod() { const { period } = useDashboardNavigation() return dashboardPeriods.some((periodOption) => periodOption.value === period) ? period : defaultDashboardPeriod } export function toneColor(tone: 'positive' | 'negative' | 'neutral') { if (tone === 'positive') { return 'var(--chart-4)' } if (tone === 'negative') { return 'var(--destructive)' } return 'var(--foreground)' } export function DashboardCard({ children, className, }: { children: React.ReactNode className?: string }) { return (

{children}

) } export function DetailHeader({ title, subtitle, children, }: { title: string subtitle?: string children?: React.ReactNode }) { return (