DAvatar
User avatar component with image or initials support.
Basic Usage
import DAvatar from '@dynamic-framework/ui-react';
function App() {
return (
<DAvatar
name="John Doe"
image="https://example.com/avatar.jpg"
/>
);
}
User name (used for initials if no image provided)
Avatar size - ‘xs’, ‘sm’, ‘lg’, ‘xl’, or ‘xxl’
If true, displays full name instead of extracted initials
Examples
With Image
Initials
Sizes
Custom Display
<DAvatar
name="Jane Smith"
image="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane"
/>
<DAvatar name="John Doe" />
// Displays: JD
<DAvatar name="Alice Johnson" />
// Displays: AJ
<DAvatar name="User" size="xs" />
<DAvatar name="User" size="sm" />
<DAvatar name="User" />
<DAvatar name="User" size="lg" />
<DAvatar name="User" size="xl" />
<DAvatar name="User" size="xxl" />
<DAvatar
name="AB"
useNameAsInitials
/>
// Displays: AB (as-is)
TypeScript Interface
type Props =
& BaseProps
& {
id?: string;
size?: AvatarSize;
image?: string;
name?: string;
useNameAsInitials?: boolean;
};
Basic Usage
import DBadge from '@dynamic-framework/ui-react';
function App() {
return (
<DBadge text="New" color="primary" />
);
}
color
ComponentColor
default:"primary"
Badge color
Examples
Colors
Soft Variants
Rounded
With Icons
Sizes
<DBadge text="Primary" color="primary" />
<DBadge text="Success" color="success" />
<DBadge text="Danger" color="danger" />
<DBadge text="Warning" color="warning" />
<DBadge text="Info" color="info" />
<DBadge text="Primary" color="primary" soft />
<DBadge text="Success" color="success" soft />
<DBadge text="Danger" color="danger" soft />
<DBadge text="99+" color="danger" rounded />
<DBadge text="New" color="primary" rounded />
<DBadge text="Verified" color="success" iconStart="CheckCircle" />
<DBadge text="Alert" color="danger" iconEnd="AlertCircle" />
<DBadge text="Small" size="sm" />
<DBadge text="Default" />
<DBadge text="Large" size="lg" />
DCurrencyText
Formatted currency display using the useFormatCurrency hook.
Basic Usage
import DCurrencyText from '@dynamic-framework/ui-react';
function App() {
return (
<DCurrencyText value={1234.56} />
);
}
Numeric value to format as currency
Example
// Displays formatted currency based on locale settings
<DCurrencyText value={1234.56} />
// Output: $1,234.56 (example for USD)
<DCurrencyText
value={9999.99}
className="text-success fw-bold"
/>
TypeScript Interface
type Props = BaseProps & {
value: number;
};
DCreditCard
Credit card display component with brand logos and customization.
Basic Usage
import DCreditCard from '@dynamic-framework/ui-react';
function App() {
return (
<DCreditCard
brand="visa"
number="**** **** **** 1234"
name="John Doe"
/>
);
}
Card brand - ‘visa’ or ‘mastercard’
Card number (typically masked)
holderText
string
default:"Card Holder"
Label for cardholder name
Custom logo image URL (overrides brand logo)
Examples
Visa
Mastercard
Custom Logo
Without Chip
<DCreditCard
brand="visa"
number="**** **** **** 4532"
name="Jane Smith"
/>
<DCreditCard
brand="mastercard"
number="**** **** **** 8901"
name="John Doe"
/>
<DCreditCard
number="**** **** **** 5678"
name="Alice Johnson"
logoImage="https://example.com/custom-logo.png"
/>
<DCreditCard
brand="visa"
number="**** **** **** 1234"
name="Bob Wilson"
isChipVisible={false}
/>
TypeScript Interface
type CardBrand = 'visa' | 'mastercard';
type Props = {
className?: string;
brand?: CardBrand;
isChipVisible?: boolean;
name?: string;
number?: string;
holderText?: string;
isVertical?: boolean;
logoImage?: string;
};
DVoucher
Voucher/receipt component with share and download functionality.
Basic Usage
import DVoucher from '@dynamic-framework/ui-react';
function App() {
return (
<DVoucher
title="Payment Successful"
message="Your transaction has been completed"
amount="$1,234.56"
>
<div>
<p><strong>Transaction ID:</strong> TXN-12345</p>
<p><strong>Date:</strong> March 3, 2026</p>
</div>
</DVoucher>
);
}
Amount to display prominently
Additional details below amount
icon
false | null | string | Partial<ComponentProps<typeof DIcon>>
Icon configuration (defaults to success checkmark)
onError
(err: Error) => Promise<void> | void
Error handler for share/download failures
Examples
Payment Receipt
Transfer Confirmation
Without Icon
<DVoucher
title="Payment Successful"
message="Your payment has been processed"
amount="$250.00"
amountDetails={
<small className="text-muted">Includes $10.00 processing fee</small>
}
>
<div>
<p><strong>Payment Method:</strong> Visa ****1234</p>
<p><strong>Reference:</strong> PAY-ABC-123</p>
<p><strong>Date:</strong> March 3, 2026</p>
</div>
</DVoucher>
<DVoucher
title="Transfer Complete"
message="Money sent successfully"
amount="$1,000.00"
icon={{ icon: 'ArrowRightCircle', color: 'primary' }}
>
<div>
<p><strong>To:</strong> John Doe</p>
<p><strong>Account:</strong> ****5678</p>
<p><strong>Time:</strong> 14:30 PM</p>
</div>
</DVoucher>
<DVoucher
title="Receipt"
message="Transaction details"
icon={false}
>
<div>
<p>Transaction information here</p>
</div>
</DVoucher>
TypeScript Interface
type Props = PropsWithChildren<{
amount?: string;
amountDetails?: ReactNode;
icon?: false | null | string | Partial<ComponentProps<typeof DIcon>>;
className?: string;
message: string;
title: string;
downloadText?: string;
shareText?: string;
onError?: (err: Error) => Promise<void> | void;
}>;
DTimeline
Timeline component for displaying sequential events.
Basic Usage
import DTimeline from '@dynamic-framework/ui-react';
function App() {
const items = [
{
title: 'Order Placed',
description: 'Your order has been received',
time: '10:00 AM',
status: 'success' as const,
icon: 'check-circle'
},
{
title: 'Processing',
description: 'Order is being prepared',
time: '10:30 AM',
status: 'info' as const,
icon: 'clock'
},
];
return <DTimeline items={items} />;
}
DTimelineItem Interface
Bootstrap icon name (without ‘bi-’ prefix)
status
'success' | 'warning' | 'danger' | 'info'
Status color variant
Custom content for the item
Examples
Order Tracking
Transaction History
const orderTimeline = [
{
title: 'Order Placed',
description: 'Order #12345 received',
time: 'March 1, 10:00 AM',
status: 'success',
icon: 'check-circle'
},
{
title: 'Payment Confirmed',
description: 'Payment processed successfully',
time: 'March 1, 10:05 AM',
status: 'success',
icon: 'credit-card'
},
{
title: 'Preparing',
description: 'Your order is being prepared',
time: 'March 1, 11:00 AM',
status: 'info',
icon: 'box'
},
{
title: 'Shipped',
description: 'Package dispatched',
time: 'March 2, 09:00 AM',
status: 'warning',
icon: 'truck'
},
];
<DTimeline items={orderTimeline} />
const transactions = [
{
title: 'Payment Received',
description: 'From: Alice Johnson',
time: '2 hours ago',
status: 'success',
icon: 'arrow-down-circle',
children: <p className="mb-0 text-success">+$500.00</p>
},
{
title: 'Payment Sent',
description: 'To: Bob Wilson',
time: '5 hours ago',
status: 'info',
icon: 'arrow-up-circle',
children: <p className="mb-0 text-danger">-$200.00</p>
},
];
<DTimeline items={transactions} />
TypeScript Interface
export type DTimelineItem = {
title: string;
description?: string;
time?: string;
icon?: string;
status?: 'success' | 'warning' | 'danger' | 'info';
children?: React.ReactNode;
};
type Props = BaseProps & {
items: DTimelineItem[];
};