@cdr-kit/react-ui/Components/VaultCard
<VaultCard>
Marketplace card with a CSS pointer-tracking spotlight on hover. Renders the condition badge, title, description, optional data type, creator, and price.
import { VaultCard } from "@cdr-kit/react-ui"
Live preview
Subscriptionuuid 4200
ETH/USD alpha signal
Hourly directional signal, threshold-encrypted. Subscribers decrypt the latest window.
0xc183…96E25 IP / 30d
import { VaultCard, IpPrice } from "@cdr-kit/react-ui";
<VaultCard
uuid={4200}
condition="subscription"
title="ETH/USD alpha signal"
description="Hourly directional signal, threshold-encrypted."
dataType="signal"
creatorName="0xc183…96E2"
price={<IpPrice wei={5n * 10n ** 18n} period="/ 30d" />}
href="/vault/4200"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| uuidrequired | number | — | The CDR vault id (rendered in the corner). |
| conditionrequired | ConditionKind | — | Drives the colored ConditionBadge in the card header. |
| titlerequired | string | — | Card heading. |
| descriptionrequired | string | — | 2-line clamped body description. |
| dataType | string | — | Small chip in the meta row (e.g. "signal", "dataset"). |
| creatorName | string | — | Truncated address or display name in the footer. |
| price | ReactNode | — | Right-aligned footer price slot — pair with <IpPrice />. |
| href | string | — | Render the card as an <a> linking to the vault detail page. |