ChatTimestamp

Date/time separator with horizontal divider lines, used between message groups to indicate when messages were sent.

Preview

Examples

Today

Yesterday

March 24, 2026

Import

import { ChatTimestamp } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
children	`ReactNode`	—	Timestamp text (e.g. "Today", "March 24, 2026").

Examples

Basic Usage

import { ChatTimestamp } from '@velocityuikit/velocityui'

export default function Example() {
  return <ChatTimestamp>Today</ChatTimestamp>
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */