ComponentsCharts
Funnel Chart
A horizontal funnel drawn as one smooth tapering band split into coloured stages, with each stage's share of the first and a tile per stage.
"use client";
import { FunnelChart } from "@/components/miyuki-ui/funnel-chart";
const stages = [
{ name: "Link opened", value: 197 },
{ name: "Started", value: 110 },
{ name: "Completed", value: 77 },
{ name: "Subscribed", value: 38 },
];
export default function FunnelChartDemo() {
return (
<FunnelChart className="w-full max-w-[440px]" label="Sign-up funnel" value="197" delta={0.052} stages={stages} />
);
}Install
npx shadcn@latest add @miyuki-ui/funnel-chartThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
FunnelChart
Prop
Type
Elevation Profile
The shape of a route from the side: altitude against distance, tinted by steepness, with flagged waypoints, a scrubber and total ascent and descent.
Funnel Pills
Funnel stages as horizontal pills that shorten down the list, each with an icon, its count and its share of the first stage.