media-filter-strip

Horizontal scrollable filter/effect picker — the TikTok/Instagram paradigm. Shows filter previews as circular thumbnails with names. Applies visual effects to camera preview or captured media. Used in Bytes creation flow.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface MediaFilter {
  id: string
  name: string
  previewUrl?: string
  previewColor?: string
}

interface MediaFilterStripProps extends React.ComponentProps<"div"> {
  filters: MediaFilter[]
  selectedId?: string
  onSelect?: (filterId: string) => void
}

function MediaFilterStrip({ filters, selectedId, onSelect, loading = false, className, ...props }: MediaFilterStripProps) {
  return (
    <div
      data-slot="media-filter-strip" data-portal="https://design.nyuchi.com/components/media-filter-strip"
      role="radiogroup"
      aria-label="Filters"
      className={cn("flex gap-3 overflow-x-auto pb-2 scrollbar-none", className)}
      {...props}
    >
      {filters.map(filter => (
        <button
          key={filter.id}
          role="radio"
          aria-checked={selectedId === filter.id}
          onClick={() => onSelect?.(filter.id)}
          className={cn("flex shrink-0 flex-col items-center gap-1 transition-transform",
            selectedId === filter.id && "scale-110"
          )}
        >
          <div className={cn(
            "size-16 overflow-hidden rounded-full border-2 transition-colors",
            selectedId === filter.id ? "border-[var(--color-malachite,#64FFDA)]" : "border-transparent"
          )}>
            {filter.previewUrl ? (
              <img src={filter.previewUrl} alt={filter.name} className="size-full object-cover" />
            ) : (
              <div className="size-full" style={{ backgroundColor: filter.previewColor || "#333" }} />
            )}
          </div>
          <span className={cn("text-[10px] font-medium",
            selectedId === filter.id ? "text-[var(--color-malachite,#64FFDA)]" : "text-white/60"
          )}>
            {filter.name}
          </span>
        </button>
      ))}
    </div>
  )
}

export { MediaFilterStrip }
export type { MediaFilterStripProps }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/media-filter-strip

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/media-filter-strip

Dependencies

scroll-area

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface MediaFilter {
  id: string
  name: string
  previewUrl?: string
  previewColor?: string
}

interface MediaFilterStripProps extends React.ComponentProps<"div"> {
  filters: MediaFilter[]
  selectedId?: string
  onSelect?: (filterId: string) => void
}

function MediaFilterStrip({ filters, selectedId, onSelect, loading = false, className, ...props }: MediaFilterStripProps) {
  return (
    <div
      data-slot="media-filter-strip" data-portal="https://design.nyuchi.com/components/media-filter-strip"
      role="radiogroup"
      aria-label="Filters"
      className={cn("flex gap-3 overflow-x-auto pb-2 scrollbar-none", className)}
      {...props}
    >
      {filters.map(filter => (
        <button
          key={filter.id}
          role="radio"
          aria-checked={selectedId === filter.id}
          onClick={() => onSelect?.(filter.id)}
          className={cn("flex shrink-0 flex-col items-center gap-1 transition-transform",
            selectedId === filter.id && "scale-110"
          )}
        >
          <div className={cn(
            "size-16 overflow-hidden rounded-full border-2 transition-colors",
            selectedId === filter.id ? "border-[var(--color-malachite,#64FFDA)]" : "border-transparent"
          )}>
            {filter.previewUrl ? (
              <img src={filter.previewUrl} alt={filter.name} className="size-full object-cover" />
            ) : (
              <div className="size-full" style={{ backgroundColor: filter.previewColor || "#333" }} />
            )}
          </div>
          <span className={cn("text-[10px] font-medium",
            selectedId === filter.id ? "text-[var(--color-malachite,#64FFDA)]" : "text-white/60"
          )}>
            {filter.name}
          </span>
        </button>
      ))}
    </div>
  )
}

export { MediaFilterStrip }
export type { MediaFilterStripProps }