nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
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.
View the full component source code below.
"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 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/media-filter-stripFetch this component's metadata and source code from the registry API.
/api/v1/ui/media-filter-strip