PatternAvailable
Message Scroller
A scroll container for conversations with a return-to-latest control.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/message-scroller.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerButton,
} from '@/components/ui/message-scroller';
export default function Demo() {
return (
<MessageScrollerProvider>
<MessageScroller className="h-64 w-full max-w-md rounded-lg border-2 border-ink bg-card">
<MessageScrollerViewport>
<MessageScrollerContent>
{Array.from({ length: 12 }, (_, index) => (
<MessageScrollerItem key={index}>
<p className="m-3 rounded-md border-2 border-ink bg-muted p-3 bl-type-small">
Component update {index + 1}
</p>
</MessageScrollerItem>
))}
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| MessageScrollerProvider | provider | required | Wrap Root, Viewport, Content and Button in the shared scroll provider. |
| className | string | ? | Extends the root visual styles without changing its semantics. |
| children | ReactNode | ? | Compose the exported subcomponents as shown in the runnable example. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Do not force-scroll users away from content they are reading. Keep the return-to-latest control labelled.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.