Four asymmetric feature cards, each holding a small working piece of the product: a spend limit slider with a meter that turns amber and red, policy switches that rewrite a sentence, a card that frosts over when frozen, and receipts you can match.
Ledgerline for finance teams
Every card below is the real product. Drag the limit, flip a rule, freeze the card, match a receipt.
The bar turns amber at 75% and red at 90%, and the team lead hears about it before the card declines.
2 of 3 rules on. Large purchases wait for two approvals.
Rules read like sentences, so finance and the team agree on them.
Lost card? Freeze it and unfreeze when it turns up.
Forward a photo and Ledgerline matches it by amount and merchant. You just confirm.
npx shadcn@latest add https://hyperblur.dev/r/features-mini-ui.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-mini-ui.tsx.
import { FeaturesMiniUi } from "@/components/hyperblur/features-mini-ui"
<FeaturesMiniUi spent={3180} defaultLimit={5000} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Ledgerline for finance teams" | Label above the heading. |
| title | string | "Controls you can feel, not settings you forget" | Section heading. |
| subtitle | string | "Every card below is the real product..." | Paragraph under the heading. |
| spent | number | 3180 | Amount already spent, shown against the limit. |
| defaultLimit | number | 5000 | Starting monthly limit for the slider (2,000 to 12,000). |
| transactions | { merchant: string; amount: number; date: string }[] | 3 transactions | Rows in the receipt matching card. |
| cardholder | string | "Priya Raman" | Name printed on the virtual card. |
| currency | string | "USD" | ISO currency for Intl formatting. |
| locale | string | "en-US" | Locale for Intl formatting. |
| accent | string | "#34d399" | Accent for switches, meter and matched rows. |
| onLimitChange | (value: number) => void | Called when the limit slider moves. | |
| onFreezeChange | (frozen: boolean) => void | Called when the card is frozen or unfrozen. | |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |