Thread Preview Card
Thread preview card with status badges, online indicators, and hover effects. Features gradient overlays and smooth animations on interaction.
Refresh preview
Share Component
Copy CLI command
Props
| Property | Type | Default | Description |
|---|---|---|---|
| avatarUrl | string | "https://api.dicebear.com/7.x/bottts/svg?seed=gpt" | URL of the avatar image. |
| name | string | "Support Bot" | Name displayed in the preview card. |
| message | string | "Your ticket #4928 has been resolved. Click here to view details." | Preview message text. |
| status | 'new' | 'unread' | 'read' | 'new' | Status of the thread. |
| timestamp | string | "2 min ago" | Timestamp text displayed in the card. |
| online | boolean | true | Whether the user is online. |
| hoverEffect | boolean | true | Whether to enable hover animations. |
| onClick | () => void | undefined | Callback function called when the card is clicked. |
| className | string | undefined | Additional CSS classes for custom styling. |
| accentColor | string | "#3b82f6" | Accent color for status badges and hover effects (hex, rgb, or hsl). |
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.