Marquee

Component

Preview

Preview solid

Usage

import { Marquee } from "@/components/ui/marquee"

export function MarqueeDemo() {
return (
  <Marquee gap={24}>
    <div class="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 1</div>
    <div class="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 2</div>
    <div class="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 3</div>
    <div class="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 4</div>
    <div class="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 5</div>
  </Marquee>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/marquee.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/marquee.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/marquee.json

Manual

components/ui/marquee.tsx

import { Marquee as ArkMarquee } from "@ark-ui/solid/marquee"
import { type ComponentProps, type JSX, splitProps } from "solid-js"
import { cn } from "@/lib/utils"

export interface MarqueeProps
  extends Omit<ComponentProps<typeof ArkMarquee.Root>, "children" | "speed" | "autoFill" | "reverse">
{
  speed?: number
  direction?: "left" | "right"
  children?: JSX.Element
}

export function Marquee(props: MarqueeProps) {
  const [local, rest] = splitProps(props, ["class", "speed", "direction", "children"])

  const speed = () => local.speed ?? 50
  const direction = () => local.direction ?? "left"

  return (
    <ArkMarquee.Root
      class={cn("overflow-hidden", local.class)}
      autoFill
      speed={speed()}
      reverse={direction() === "right"}
      {...rest}
    >
      <ArkMarquee.Viewport>
        <ArkMarquee.Content>{local.children}</ArkMarquee.Content>
      </ArkMarquee.Viewport>
    </ArkMarquee.Root>
  )
}