Core

Funnel Chart

A funnel chart visualizes a sequential process, helping users see how values decrease from one stage to the next.

Example

Usage

Features

  • Ideal for conversion and pipeline views.
  • Supports custom labels for each stage.
  • Uses the shared LibravelUI chart tooltip.
  • Can be colored from the default chart palette or per-stage overrides.
  • Keeps the chart surface consistent with the rest of the system.

Installation

Copy the shared chart utilities and the chart component you need into your project.

components/ui/core/charts/chart-shell.tsx
components/ui/core/charts/chart-tooltip.tsx
components/ui/core/charts/funnel-chart.tsx
npx libravelui@latest add funnel-chart

Anatomy

import { FunnelChart } from "@/components/ui/core/charts/funnel-chart";
<FunnelChart
  data={data}
  dataKey="value"
  nameKey="stage"
/>

Props

Loading types…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs