Scroll Area

A custom-styled scrollable container. Replaces native browser scrollbars with a styled, cross-platform alternative.

$cookest-ui add scroll-area

Scroll through a long list of recipes in a constrained container.

Pasta Carbonara★ 5.0

Risotto Milanese★ 4.8

Chicken Tikka Masala★ 4.5

Pad Thai★ 4.6

Beef Tacos★ 4.6

Spaghetti Bolognese★ 4.7

Ramen Tonkotsu★ 4.8

Moussaka★ 4.6

Paella Valenciana★ 4.8

Souvlaki★ 4.8

Tom Yum Soup★ 4.3

Bibimbap★ 5.0

Beef Pho★ 4.6

Shakshuka★ 4.6

Falafel Wrap★ 4.3

Miso Ramen★ 4.7

Greek Salad★ 4.3

Caprese Salad★ 4.4

Ceasar Salad★ 4.8

Nicoise Salad★ 4.5

Show step-by-step cooking instructions in a scrollable panel.

Bring a large pot of salted water to a boil.

While water heats, dice the guanciale into small lardons.

Render the guanciale in a cold pan over medium heat until crispy.

In a bowl, whisk together egg yolks and grated Pecorino Romano.

Season the egg mixture with black pepper — be generous.

Cook the spaghetti until al dente — save 1 cup of pasta water.

Remove guanciale from heat, let the pan cool slightly.

Add pasta to the guanciale pan, toss to coat in the fat.

Off the heat, pour in the egg mixture and toss rapidly.

Add pasta water a splash at a time to loosen the sauce.

The sauce should be creamy, glossy, and coat every strand.

Serve immediately with extra Pecorino and cracked pepper.

Prop	Type	Default	Description
`className`	string	—	Pass height (h-*), width, border, and rounding classes.
`type`	"auto" \| "always" \| "scroll" \| "hover"	"hover"	When the scrollbar is visible.
`scrollHideDelay`	number	600	Delay in ms before scrollbar hides after scrolling.