ScrollArea

ScrollArea is a component that allows you to create scrollable areas.

Tags

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
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>