81 Pro components and page blocks

Get Pro
uibrik

Threat Shield

Pro

Preview

Customize

Accent
Threat
Rate1.1/s

Installation

Pro

Threat Shield 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/threat-shield

Usage

import { ThreatShield } from "@/components/uibrik/threat-shield/threat-shield";​<ThreatShield  accent="#10b981"  threat="#ef4444"  rate={1.1}  status="Protected"  label="Threats blocked"  counter  startCount={1284}  surface/>

Props

ThreatShield
accent
Type string
"#10b981"
Shield and field colour.
threat
Type string
"#ef4444"
Incoming threats' colour.
rate
Type number
1.1
Threats per second, roughly.
status
Type string
"Protected"
Status in the pill at the top. Empty hides it.
label
Type string
"Threats blocked"
Label beside the count.
counter
Type boolean
true
The blocked count at the bottom.
startCount
Type number
1284
Number the blocked count starts from.
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.