> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heliosrender.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`:

```json theme={null}
{
  "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

> [card] [Using components](https://docs.heliosrender.com/components/using-components.md)
>
> Learn how to add and use components in your project

> [card] [Creating components](https://docs.heliosrender.com/components/creating-components.md)
>
> Publish your own components to a registry


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.