Tile UI React
Source code

Components

MessageScroller

Message scroller.

Use MessageScroller to scroll a message list with auto-anchoring.

Message 1

Message 2

Message 3

Message 4

Message 5

Message 6

Message 7

Message 8

import { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@tile-ui/react';

export default function MessageScrollerDemo() {
	return (
		<MessageScrollerProvider>
			<MessageScroller style={{ maxHeight: 160 }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/message-scroller

Package usage

import { MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem } from '@tile-ui/react';
 
<MessageScroller>
	<MessageScrollerViewport>
		<MessageScrollerContent>
			<MessageScrollerItem>Message one</MessageScrollerItem>
		</MessageScrollerContent>
	</MessageScrollerViewport>
</MessageScroller>

Highlights

  • Viewport and content
  • Scroll anchor
  • Scroll buttons

Registry dependencies

ItemPurpose
message-scrollerComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

MessageScrollerItem

PropTypeDefault
scrollAnchorboolean—

MessageScrollerButton

PropTypeDefault
direction'start' | 'end'—
PreviousMessageNextNativeSelect