> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BintzGavin/helios/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

<CardGroup cols={2}>
  <Card title="Using components" icon="download" href="/components/using-components">
    Learn how to add and use components in your project
  </Card>

  <Card title="Creating components" icon="code" href="/components/creating-components">
    Publish your own components to a registry
  </Card>
</CardGroup>