Component

Marquee Strip

A full-width label and tag strip for showcasing tech stacks, concept tags, or partner logos — supports a static flex-wrap layout or a continuously scrolling marquee animation.

Static strip

Default mode — items wrap naturally after the label. No CSS animation required.

Built withReactTypeScriptTailwind CSSTurborepopnpm

Scrolling

Pass scroll to enable continuous marquee animation. Items are duplicated once internally for a seamless loop. You must add the @keyframes marquee definition to your global CSS.

ReactTypeScriptTailwind CSSTurborepopnpmVitestPlaywrightStorybookReactTypeScriptTailwind CSSTurborepopnpmVitestPlaywrightStorybook

tsx

/* Add to your global CSS for scroll mode */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

Long concept tags

Static mode handles long or many tags gracefully by wrapping them.

ConceptsDesign SystemsHeadless ArchitectureAccessibility FirstFramework AgnosticZero Lock-inTree ShakeableSSR ReadyType SafeComposableThemeable

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { MarqueeStrip } from '@refraction-ui/react'

// Static strip with a label
export function TechStack() {
  return (
    <MarqueeStrip
      label="Built with"
      items={['React', 'TypeScript', 'Tailwind CSS', 'Turborepo']}
    />
  )
}

// Scrolling strip (add @keyframes marquee to your global CSS)
export function ScrollingStrip() {
  return (
    <MarqueeStrip
      scroll
      items={['React', 'TypeScript', 'Tailwind CSS', 'Vitest', 'Storybook']}
    />
  )
}

Props

Prop	Type	Default	Description
`label`	`string`	--	Eyebrow label shown before the items (static mode only).
`items`	`string[]`	--	List of text items to display in the strip.
`scroll`	`boolean`	`false`	When true, items scroll continuously using a CSS marquee animation. Requires a `@keyframes marquee` definition in your global CSS.
`className`	`string`	--	Additional CSS classes to apply to the container.