MessageScroller

import { For, createSignal } from 'solid-js';
import { Button, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from '@tile-ui/solid';

export default function MessageScrollerDemo() {
	const [mounted, setMounted] = createSignal(true);
	const [messages, setMessages] = createSignal(Array.from({ length: 12 }, (_, index) => `Message ${index + 1}`));

Use MessageScrollerProvider around the viewport, content, items, controls, and hooks that share scroll state.

Registry install

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

Package usage

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

<MessageScrollerProvider>
	<MessageScroller>
		<MessageScrollerViewport>
			<MessageScrollerContent>
				<MessageScrollerItem scrollAnchor>Message one</MessageScrollerItem>
			</MessageScrollerContent>
		</MessageScrollerViewport>
		<MessageScrollerButton />
	</MessageScroller>
</MessageScrollerProvider>

Highlights

• Provider-owned viewport observation
• Start and end controls
• Scrollable and visibility hooks

Registry dependencies

Item	Purpose
message-scroller	Component source and module styles
core	Framework-agnostic logic helpers
utils	Shared utility helpers
styles	Shared SCSS tokens and globals

API reference

MessageScrollerItem

Prop	Type	Default
scrollAnchor	boolean	—

MessageScrollerButton

Prop	Type	Default
direction	'start' | 'end'	—

MessageScrollerProvider

No custom props.

MessageScroller

No custom props.

MessageScrollerViewport

No custom props.

MessageScrollerContent

No custom props.

useMessageScroller

Prop	Type	Default
return	MessageScrollerContextValue	—

useMessageScrollerScrollable

Prop	Type	Default
return	{ scrollable: Accessor<boolean>; isScrollable: Accessor<boolean> }	—

useMessageScrollerVisibility

Prop	Type	Default
direction	'start' | 'end'	—
return	MessageScrollerVisibilityAccessors	—

Related docs

• Message
• Bubble
• ScrollArea