Skiper Marquee

Use the CLI to add component to your directory

  npx shadcn@latest add "http://skiper-ui.com/registry/skiper-marquee.json"

Copy

Update tailwind.config.ts

/** @type {import('tailwindcss').Config} */
 
module.exports = {
 
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};

Copy