Product components · @jengacore/rule-chip

RuleChip

Mulisa: mono rule code + the condition in plain language.

Mulisa

925831

78High risk

Why it fired · 2

VEL-014More than 12 transfers from one MSISDN in 10 min
PAY-021First transfer to payee above 2,000,000 SLSH

Install

terminal

npx shadcn@latest add @jengacore/rule-chip

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/rule-chip.json

Registry dependencies

@jengacore/theme

Source

components/jc/rule-chip.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

/** Mulisa rule: mono rule code + the condition in plain language. Always show both. */
export function RuleChip({ code, condition, className }: { code: string; condition?: string; className?: string }) {
  return (
    <span
      data-slot="rule-chip"
      title={condition}
      className={cn("inline-flex h-[22px] max-w-full shrink-0 items-center gap-1.5 overflow-hidden rounded-sm border border-border bg-card px-1.5 text-xs whitespace-nowrap contrast:border-input", className)}
    >
      <span className="font-mono text-[11px] font-medium">{code}</span>
      {condition ? <span className="truncate text-muted-foreground">{condition}</span> : null}
    </span>
  )
}