Hex UIv1

MessageList

Auto-scrolling viewport for a chat stream. Pins to the bottom during streaming unless the user scrolls up to read history.

What's the diff between Tabs and Tag?
Tabs is a navigation primitive — one panel visible at a time. Tag is a chip used inside other surfaces (filter bars, multi-select pickers).
Got it — when would I use Tag instead of Badge?
Use Tag when the chip is dismissable (it ships with onRemove + a close button). Use Badge for read-only status pills.
4 turns

Installation

pnpm
pnpm dlx @hex-core/cli add message-list

API Reference

PropTypeDefaultDescription
autoScroll
booleantruePin to bottom on content change (when the user is already near the bottom).
childrenrequired
ReactNode—Sequence of <Message> elements.
className
string—Additional CSS classes (e.g. height, padding).

AI Guidance

When to use

Wrap a list of <Message> components when you want auto-scroll-on-stream behavior. Always set an explicit height (h-*, max-h-*) on the className so the viewport actually scrolls.

When not to use

Don't use for static FAQs or non-streaming layouts (use a normal Stack). Don't use as a generic scroll container — its bottom-pin behavior is opinionated.

Common mistakes

  • Forgetting to set a height — the viewport won't scroll without `h-*` or `max-h-*`
  • Disabling autoScroll while still expecting bottom-pin behavior — they're the same flag
  • Putting non-Message children inside — a divider or banner breaks the role=log semantics

Accessibility

Renders as `role="log"` with `aria-live="polite"` and `aria-relevant="additions"` so assistive tech announces new turns. If you replace turns wholesale (e.g. on regenerate), pass `aria-relevant="additions removals"` as a prop — props spread onto the underlying div and override the default.

Token budget: 240

Verified against @hex-core/components@1.12.0

Edit this page on GitHub