DS | Adila.coComponentes
Message Scroller
Componente message-scroller do design system adila.co.
Instalação
bun add @adila-sh/uiUso
O MessageScrollerProvider é obrigatório: ele detém o contexto de auto-scroll que
MessageScroller, Viewport, Content, Item e Button consomem. Dê uma altura
definida ao contêiner e habilite autoScroll no provider para acompanhar novas mensagens.
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerButton,
} from '@adila-sh/ui';
export function Example() {
return (
<div className="h-96">
<MessageScrollerProvider autoScroll>
<MessageScroller>
<MessageScrollerViewport>
<MessageScrollerContent>
<MessageScrollerItem>Primeira mensagem</MessageScrollerItem>
<MessageScrollerItem scrollAnchor>Última mensagem</MessageScrollerItem>
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton direction="end" />
</MessageScroller>
</MessageScrollerProvider>
</div>
);
}Dependências
@shadcn/reactlucide-react