Skip to main content
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

Build docs developers (and LLMs) love

Get started for freeTalk to us