Navigation
Menus that hold their place.
Announcement bar, grouped menu, and an app tab bar.
Snap carousel
A scroll-snap card rail with pointer, keyboard, and dot navigation.
Slide 1 of 4
Conversion
A shorter path to yes.
A validated email capture and a plan picker with native radios.
Detail
Small moments, kept quiet.
A spotlight tour and a like action that can be taken back.
Stage
A hero with one job.
Copy, action, proof, and a media slot that does not compete.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type HTMLAttributes,8 type KeyboardEvent,9 type ReactNode,10} from "react";11import { ChevronLeft, ChevronRight } from "lucide-react";12 13export type SnapCarouselSlide = {14 id: string;15 /** Accessible name for this slide. */16 label: string;17 content: ReactNode;18};19 20export type SnapCarouselProps = Omit<21 HTMLAttributes<HTMLElement>,22 "children" | "onChange"23> & {24 slides: SnapCarouselSlide[];25 /** Accessible name for the carousel. */26 label?: string;27 index?: number;28 defaultIndex?: number;