Chat

Components for creating live chats.

Basic

JD
John Doe Active 2 mins ago
JD

Hey, did you see Svelte 5 just got released?

9:53 PM
JD

Yes! The runes system looks really interesting!

9:56 PM
JD

Right? Such a big change from the previous reactive system

9:58 PM
JD

Have you tried migrating any projects to it yet?

10:01 PM
JD

Just started with a small one. The migration guide is super helpful

10:03 PM
JD

Any breaking changes causing issues?

10:06 PM
JD

The new $state syntax took some getting used to, but its cleaner now

10:08 PM
JD

The performance improvements are impressive too

10:11 PM
JD

Yeah, the compiler optimizations are amazing. Much faster now

10:13 PM
JD

Looking forward to using it in my next project!

10:16 PM
JD

Installation

jsrepo add ui/chat

Usage

Acknowledgements

This component takes inspiration from jakobhoeg/shadcn-chat.

API Reference

Chat.

List

The root container for chat messages.

PropTypeDefault
ref? $bindable
HTMLDivElement null
children?
Snippet -
Chat.

Bubble

A chat bubble.

PropTypeDefault
ref? $bindable
HTMLDivElement null
children?
Snippet -
variant
enum -
Chat.

BubbleMessage

The message content within a chat bubble.

PropTypeDefault
ref? $bindable
HTMLDivElement null
children?
Snippet -
typing?
boolean false
Chat.

BubbleAvatar

The avatar shown next to a chat bubble, inherits all Avatar.Root props.