║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { ScrollButtonBasic } from "./scroll-button-basic" import { ScrollButtonCustom } from "./scroll-button-custom" import { ScrollButtonWithChat } from "./scroll-button-with-chat"

export const metadata = generateMetadata( "Scroll Button", "A floating button that appears when the user scrolls up and lets them return to the bottom of the chat." )

Scroll Button

A minimal floating button that appears when the user scrolls up, allowing them to jump back to the bottom of the chat.

Usage

The ScrollButton only works inside ChatContainerRoot, which uses use-stick-to-bottom under the hood.
It will not work with a plain div or custom scroll container.

Examples

Basic Scroll Button

A simple implementation of the scroll button that appears when scrolling up and disappears when at the bottom of the container.

<ComponentCodePreview component={<ScrollButtonBasic />} filePath="app/docs/scroll-button/scroll-button-basic.tsx" classNameComponentContainer="p-0" />

Custom Scroll Button

Customize the appearance and behavior of the scroll button with different variants, sizes, and threshold values.

<ComponentCodePreview component={<ScrollButtonCustom />} filePath="app/docs/scroll-button/scroll-button-custom.tsx" classNameComponentContainer="p-0" />

With Chat Container

The ScrollButton works perfectly with ChatContainer for chat interfaces, providing an easy way for users to navigate long conversations.

<ComponentCodePreview component={<ScrollButtonWithChat />} filePath="app/docs/scroll-button/scroll-button-with-chat.tsx" classNameComponentContainer="p-0" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

<CodeBlock code={npx shadcn add "https://prompt-kit.com/c/scroll-button.json"} language="bash" />

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/scroll-button.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

ScrollButton

| Prop | Type | Default | Description | | :----------- | :---------------------------------------------- | :-------- | :--------------------------------------------------- | | scrollRef | React.RefObject<HTMLElement> | | Reference to the element to scroll to | | containerRef | React.RefObject<HTMLElement> | | Reference to the scrollable container | | className | string | | Additional CSS classes | | threshold | number | 50 | Distance from bottom (in px) to show/hide the button | | variant | "default" | "outline" | "ghost" | etc. | "outline" | Button variant from your UI button component | | size | "default" | "sm" | "lg" | etc. | "sm" | Button size from your UI button component | | ...props | React.ButtonHTMLAttributes<HTMLButtonElement> | | All other button props |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║