Loading...
Installation
npx @gentleduck/cli add scroll-area
npx @gentleduck/cli add scroll-area
global.css
/* Add this block of css to your project. */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
/* Replace this with your own custom scrollbar thumb color */
background: var(--border);
border-radius: 5px;
}global.css
/* Add this block of css to your project. */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
/* Replace this with your own custom scrollbar thumb color */
background: var(--border);
border-radius: 5px;
}Usage
import { ScrollArea } from "@/components/ui/scroll-area"import { ScrollArea } from "@/components/ui/scroll-area"<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop.
</ScrollArea><ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop.
</ScrollArea>Examples
Horizontal Scrolling
Loading...
API Reference
ScrollArea
viewportClassName(string, optional): Additional CSS classes to apply to the scroll viewport container....props(React.HTMLAttributes<HTMLDivElement>): Other native props forwarded to the outer container<div>.
