Skip to content

Component 053Carousels

Classic Microcars

An editorial tour of three classic microcars, with sliding cutouts, condensed typography, and an inset photographic archive.

  • React
  • Tailwind CSS
  • TypeScript
Browse the cars with the timeline, arrow keys, or a swipe.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save classic-microcars.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import ClassicMicrocars from "@/components/ui/classic-microcars";

export default function Page() {
  return <ClassicMicrocars />;
}

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

An editorial automotive archive

BMW Isetta, Fiat Cinquecento, and Messerschmitt cutouts slide over matching taupe, lavender, and sage backdrops, with tall vector typography behind them.

Discover the details

An inset photographic archive opens inside the scene, with three reference photographs, gallery pagination, and accessible closing controls.

Made to reuse

Typed vehicle data, optional autoplay, swipe and keyboard navigation, focus management, and embedded artwork in copied source.

Keep exploring

More from the lab.

View all components
Carousels / 049

Chrome Profile Carousel

Four personal browser worlds turn in 3D, with portraits, saved places, products, and bookmarks layered over matching colors.

Carousels / 041

Character Deck Slider

A white character card stacks anime portraits into a vertical deck: the active card blooms into color while neighbors fade to grayscale above and below.