81 Pro components and page blocks

Get Pro
uibrik

Magnify Card

Pro

Preview

Customize

Magnification2.2×
Lens size76px
Highlight
Dwell0.6s

Installation

Pro

Magnify Card 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/magnify-card

Usage

import { MagnifyCard } from "@/components/uibrik/magnify-card/magnify-card";​const paragraphs = [  "Revenue rose for the third quarter in a row, led by steady growth in self-serve plans and a rise in annual renewals.",  "Churn held flat while expansion doubled. Most of that came from teams adding seats after their first month on a paid plan.",  "Next quarter we expect slower growth while new pricing rolls out, then a return to pace once the plans settle in.",  "Hiring stays focused on support and onboarding, the two places customers mention most when they upgrade, and where growth starts.",];​<MagnifyCard  query="growth"  magnification={2.2}  lensSize={76}  highlight="#fde047"  auto  dwell={0.6}  heading="Quarterly review"  paragraphs={paragraphs}  title="Search your docs"  description="Every mention, in every file."  onFind={(found, total) => {}}/>

Props

MagnifyCard
query
Type string
"growth"
Word to find. Every mention, ignoring case, is a match.
magnification
Type number
2.2
How much the lens enlarges.
lensSize
Type number
76
Lens diameter.
highlight
Type string
"#fde047"
Highlighter colour.
auto
Type boolean
true
Move the lens from match to match by itself while nobody is pointing.
dwell
Type number
0.6
Time the lens rests on each match.
heading
Type string
"Quarterly review"
Page heading.
paragraphs
Type string[]
4 sample paragraphs
Page text, one string per paragraph.
title
Type string
"Search your docs"
Heading under the page. Empty hides it.
description
Type string
"Every mention, in every file."
Line under the title.
onFind
Type (found: number, total: number) => void
–
Called as matches are found.
className
Type string
–
Classes for the card.