Carousel
Paper-styled carousel with smooth slide transitions. Follow the elevation budget: outer containers own elevation, inner images stay flat.
Basic Usage
A simple image carousel with navigation buttons and dot indicators.
Fade Transition
Smooth crossfade transition between slides using embla-carousel-fade.
Autoplay
Automatic slide progression with pause on hover.
Progress Indicator
A linear progress indicator showing current position.
Thumbnail Navigation
Use image thumbnails as slide indicators.
Multiple Items
Show multiple items at once with responsive breakpoints.
Minimal Chair
$299
Wooden Table
$499
Modern Lamp
$149
Ceramic Vase
$89
Canvas Art
$199
Drag Free
Free scrolling without snap points for a more fluid experience.
Drag to scroll through items
Best Practices
Real-world scenarios demonstrating proper elevation budget allocation. The key principle: one region should have only one "hero" — the outer container owns the elevation while inner content remains flat.
With Outer Container
When the carousel is wrapped in a Card, images inside should have no shadow, no border — only rounded corners. The container provides the elevation.
Standalone Gallery
Without an outer container, images can have their own border and shadow. Use subtle elevation for large images.
Nature
Mountain Sunrise
Nature
Ocean Waves
Nature
Forest Path
Nature
Desert Dunes
Urban
City Lights
Nature
Autumn Leaves
Testimonials
Each testimonial card is a standalone item with outlined elevation. Internal content stays flat.
“Paper Cut has transformed how we design interfaces. The attention to light and shadow creates such an elegant experience.”
“The ethereal quality of this design system perfectly matches our brand's vision. Our users love the clean, light feel.”
“Finally, a design system that feels both modern and timeless. The shadow effects are subtle yet impactful.”
Anti-patterns
Common mistakes to avoid. The primary concern is elevation budget — stacking shadows inside containers creates visual noise.
Card has shadow + image has shadow = visual noise
Card has shadow, image is flat = clean hierarchy