// Data Display

Marquee

Scrolls items in a horizontal container.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/marquee

// Usage

1import { Marquee, MarqueeContent, MarqueeItem, MarqueeEdge } from "@/components/ui/marquee";
2
3<Marquee />

// Code

1"use client";
2
3import { Marquee as ArkMarquee } from "@ark-ui/react/marquee";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7interface MarqueeProps
8  extends Omit<React.ComponentProps<typeof ArkMarquee.Root>, "side"> {
9  /**
10   *
11   * @default "horizontal"
12   */
13  orientation?: "horizontal" | "vertical";
14  /**
15   * Whether to show the edges of the marquee
16   *
17   * @default true
18   */
19  showEdges?: boolean;
20}
21
22export const Marquee = (props: MarqueeProps) => {
23  const {
24    speed = 50,
25    showEdges = true,
26    spacing = "16px",
27    orientation = "horizontal",
28    className,

// Dependencies

@ark-ui/react