Globally available system components and variables

System components

You can render the following globally available system components from anywhere.

Emoji

The <Emoji> component renders an emoji, which may be a custom emoji.

Props

Name	Type	Description
emoji Required	`string`	String representation of the emoji; either the Unicode representation of the emoji itself or, in case of a custom emoji, the custom emoji name including colons at the start and end, like `:lol:`.

Usage example

This component is typically used when showing emoji reactions, such as:


1<Emoji emoji="{{ reaction.emoji }}" />

Icon

The <Icon> component renders a built-in icon.

Props

Name	Type	Description
type Required	`"attach" \| "chevronLeft" \| "chevronUp" \| "chevronDown" \| "close" \| "emoji" \| "locationPin" \| "more" \| "plus" \| "search" \| "send" \| "spinner" \| "play" \| "pause" \| "updown" \| "addEmoji" \| "microphone" \| "mic" \| "stop" \| "download" \| "location" \| "email" \| "movie" \| "image" \| "attachment" \| "horizontalDots" \| "verticalDots" \| "reply" \| "back" \| "up"`	The type of icon to display
class	`string`	Class name for the icon's svg element
alt	`string`	Text to be read out by screen readers to represent this icon. If no alt text is given, then the icon gets hidden from screen readers.

Usage example


1<Icon type="close" class="close-icon" alt="close" />

TimeAgo

The <TimeAgo> system component renders a timestamp as an expression relative to the current time, for example "5m" when it's five minutes ago, or "1d" when it's one day ago. The timestamp updates automatically as time progresses.

Props

Name	Type	Description
timestamp Required	`number`	The timestamp for which to render the component
class	`string`	Class attribute for the `<span>` that the timestamp is rendered into

Usage example

This subcomponent is usually used to show the time a message was sent. This example demonstrates how you can show the timestamp for the most recent message in the ConversationListItem component.


1<TimeAgo class="timestamp" timestamp="{{lastMessage.timestamp}}" />

Absolute time

To show the actual date and time that a message was sent, rather than the relative time, you shouldn't use TimeAgo. Instead, use the timestamp directly, formatted with the LiquidJS date filter. For example:


1// Output timestamp in format: 2025-03-25 15:57
2{{ timestamp | date: "%Y-%m-%d %H:%M" }}

By default, this uses UTC times. You can adjust this by specifying a timezone.

Variables

You can use the following globally available variables in every component.

Strings

The strings variable is an object containing localized interface text. You'll see strings variables used in various places in themes.

Theme

Holds information about the current theme. The custom field here is especially useful to allow passing data to themes when creating a widget. The theme variable has the following type:


1var theme: {
2    name: string,
3    custom {
4        [key: string]: JSONSerializable
5    }
6}

The JSONSerializable type indicates anything that can be serialized and deserialized from standard JSON.