Carousel
A neumorphic carousel component for scrolling through image cards.
TSX
import { Carousel } from "looply-comp-lib";Carousel
The Carousel component displays a horizontal scrollable set of image cards.
Usage
JSX
import { Carousel } from "looply-comp-lib";
<Carousel
card={[
{ image: "/path/to/image.jpg", text: "Card description" },
{ image: "/path/to/image2.jpg", text: "Another card" },
]}
/>Props
| Prop | Type | Description |
|---|---|---|
card | { image: string; text: string }[] | Array of card objects with image URL and text |
Features
- Outer container uses
neu-flatstyling - Individual cards use
neu-insetfor a pressed appearance - Images have rounded top corners matching the neumorphic radius
- Horizontal scroll with smooth navigation
Demo
Soft, tactile interfaces inspired by real-world surfaces.
Subtle gradients and shadows create a seamless experience.
Minimalist aesthetics meet functional design.