81 Pro components and page blocks

Get Pro
uibrik

Subscriber Funnel

Pro

Preview

Customize

Count2480
Interval1.8s
Duration1.2s
Cards3
Height420px

Installation

Pro

Subscriber Funnel is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/subscriber-funnel

Usage

import { SubscriberFunnel } from "@/components/uibrik/subscriber-funnel/subscriber-funnel";​<SubscriberFunnel  title="Subscribers"  count={2480}  label="subscribed"  interval={1.8}  duration={1.2}  cards={3}  height={420}  icon={<IconMailFilled size={26} />}  // subscribers={[{ name: "…", avatar: "…" }]}/>

Props

SubscriberFunnel
title
Type string
"Subscribers"
Heading on the shell, next to the count.
count
Type number
2480
Count to start from. Leave it out to hide the count.
label
Type string
"subscribed"
Muted text after each name on the cards.
interval
Type number
1.8
Seconds between drops.
duration
Type number
1.2
Seconds a fall takes.
cards
Type number
3
Cards shown under the mark.
height
Type number
420
Height of the scene. The width fills the container.
subscribers
Type { name: string; avatar: string }[]
13 sample people
People who drop in, in turn. Avatars are image URLs.
icon
Type ReactNode
<IconMailFilled />
Your mark, at the neck of the funnel.
className
Type string
–
Classes for the shell. It is w-full max-w-xl by default.