81 Pro components and page blocks

Get Pro
uibrik

Security Scan

Pro

Preview

Customize

Column
Accent
Speed1.0×

Installation

Pro

Security Scan 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/security-scan

Usage

import { SecurityScan } from "@/components/uibrik/security-scan/security-scan";​const checks = [  {    label: "Encryption",    result: "AES-256",    icon: <IconLock size={17} stroke={1.75} />,    doneIcon: <IconLockFilled size={17} />,  },  {    label: "Two-factor auth",    result: "Enabled",    icon: <IconDeviceMobile size={17} stroke={1.75} />,    doneIcon: <IconDeviceMobileFilled size={17} />,  },  // …2 more];​<SecurityScan  layout="column"  accent="#10b981"  speed={1}  scanningLabel="Scanning…"  doneLabel="All systems secure"  checks={checks}  surface/>

Props

SecurityScan
layout
Type "column" | "row"
"column"
Shield above the checks, or beside them. Row falls back to a column when the card is narrow.
accent
Type string
"#10b981"
Shield and pass colour.
speed
Type number
1
Playback speed.
scanningLabel
Type string
"Scanning…"
Heading while checks run.
doneLabel
Type string
"All systems secure"
Heading once every check has passed.
checks
Type { label; result?; icon? }[]
Encryption, Two-factor auth, Backups, Firewall
The checks, run in order. `result` shows once it passes.
surface
Type boolean
true
Its own softly tinted, rounded background. Off, it's transparent and fills its parent.
className
Type string
–
Classes for the wrapper. It fills its parent's height.