Carousel
A cycling slideshow of content items. Supports keyboard navigation, touch gestures, and multiple visible items.
Recipe Cards
A horizontally scrollable carousel of recipe cards.
Pasta Carbonara
Italian · 25 min
★ 4.9
Risotto Milanese
Italian · 40 min
★ 4.8
Pad Thai
Thai · 30 min
★ 4.7
Beef Tacos
Mexican · 20 min
★ 4.6
Salmon Sushi
Japanese · 45 min
★ 4.9
Chicken Tikka
Indian · 50 min
★ 4.7
Full-Width Slides
One item visible at a time — great for recipe step-by-step walkthroughs.
Render the Guanciale
Add diced guanciale to a cold pan. Slowly render over medium heat until golden and crispy, about 8–10 minutes.
Cook the Pasta
Bring a large pot of salted water to a rolling boil. Cook spaghetti until 1 minute before al dente. Reserve 1 cup of pasta water.
Make the Sauce
Whisk egg yolks and grated Pecorino Romano in a bowl. Season generously with freshly cracked black pepper.
Combine
Remove guanciale from heat. Add pasta, toss to coat. Off heat, pour in the egg mixture and toss rapidly, adding pasta water to achieve a glossy, creamy sauce.
| Prop | Type | Default | Description |
|---|---|---|---|
opts | EmblaOptionsType | — | Embla Carousel options (align, loop, dragFree, etc.) |
CarouselItem | ReactNode | — | A single slide. Use basis-* classes for partial slides. |
CarouselPrevious / CarouselNext | — | — | Navigation arrow buttons. |
orientation | "horizontal" | "vertical" | "horizontal" | Scroll direction of the carousel. |