A drop-in replacement for the native HTML5 video element, with a beautifully customizable UI.

• ui: @repo/ui — internal workspace containing the LoomixPlayer React component source. Published publicly as the loomix npm package and via the shadcn registry served from apps/web/registry.

• web: official demo website and documentation (apps/web), deployed at loomix.harshsingh.me.

# via the shadcn CLI (recommended, copies the source into your project)
npx shadcn@latest add https://loomix.harshsingh.me/r/loomix-player.json

# or as a traditional npm package
npm install loomix
# or
pnpm add loomix
# or
bun add loomix

Requirements: Node 20+ and Bun.

git clone https://github.com/haaarshsingh/loomix
cd loomix
bun install

# develop demo app and packages
bun run dev

# build all packages/apps
bun run build

# type-check and lint
bun run check-types
bun run lint

Scripts are powered by Turborepo and run across workspaces. See package.json and turbo.json for details.

import { LoomixPlayer } from "@/components/ui/loomix-player";

export default function Demo() {
  return (
    <LoomixPlayer
      src="/video.webm"
      youtubeUrl="https://youtu.be/dQw4w9WgXcQ"
      className="aspect-video w-full max-w-4xl"
    />
  );
}

Built by Harsh Singh