Card railmedia

Horizontal snap scroller of cards with desktop arrow buttons that hide at the ends and a labelled keyboard-focusable region.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/card-rail

의존 아이템button locale style

Default

Room 1

Room 2

Room 3

Room 4

Room 5

Room 6

Room 7

Room 8

card-rail-demo.tsx

import { CardRail, CardRailItem } from "@/components/ui/card-rail";
export default function CardRailDemo() {  return (    <CardRail label="Featured rooms">      {Array.from({ length: 8 }, (_, i) => (        <CardRailItem key={i} className="w-56">          <div className="flex h-32 items-center justify-center rounded-lg border bg-card text-card-foreground">Room {i + 1}</div>        </CardRailItem>      ))}    </CardRail>  );}