Component registry

A Shadcn-style component registry for Helios video components

The Helios component registry is a collection of reusable video components that you can copy into your projects. Inspired by Shadcn/ui, components are distributed as source code that you own and control.

Philosophy

The registry follows a copy-paste architecture:

• Components are copied directly into your codebase
• You own the code and can modify it freely
• No opaque dependencies or black boxes
• Framework-specific implementations (React, Vue, Svelte, Solid, Vanilla)

Available components

The registry includes components for common video use cases:

• Timer - Display video timecode (MM:SS:FF format)
• Progress bar - Visualize playback progress
• Watermark - Overlay text or image logos
• use-video-frame - React hook for frame synchronization

How it works

1. Initialize your project with helios init
2. Browse available components with helios components
3. Add components with helios add <component-name>
4. Components are copied to your src/components/helios directory
5. Dependencies are automatically installed
6. Modify the code to fit your needs

Remote registries

You can configure a custom registry URL in helios.config.json:

{
  "version": "1.0.0",
  "registry": "https://example.com/registry/index.json",
  "directories": {
    "components": "src/components/helios",
    "lib": "src/lib"
  },
  "framework": "react"
}

The CLI will fetch components from the remote registry. If unavailable, it falls back to the built-in local registry.

Next steps

Using components

Learn how to add and use components in your project

Creating components

Publish your own components to a registry