ScrollArea
ScrollArea is a component that allows you to create scrollable areas.
tsx
'use client'
import { ScrollArea } from '@nerdfish/ui'
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
export function ScrollAreaExample() {
return (
<ScrollArea className="shadow-outline rounded-container h-72 w-48 border">
<div className="p-md">
<h4 className="mb-md text-sm font-medium leading-none">Tags</h4>
{tags.map((tag) => (
<div className="text-sm" key={tag}>
{tag}
</div>
))}
</div>
</ScrollArea>
)
}
Usage
tsx
import { ScrollArea } from '@nerdfish/ui'
tsx
<ScrollArea className="rounded-container p-md h-[200px] w-[350px] border">
Cake is a delicious dessert that is enjoyed by people all over the world. It
is typically made from a mixture of flour, sugar, eggs, and butter or oil, and
can be flavored with a variety of ingredients such as vanilla, chocolate,
fruit, or spices. Cakes can be baked in many different shapes and sizes, from
small cupcakes to large multi-layered creations. They are often decorated with
frosting, icing, or other toppings, and can be served for special occasions
such as birthdays, weddings, or holidays, or simply enjoyed as a treat any day
of the week.
</ScrollArea>