---
title: Component library
description: Actor families and effects, distributed as a shadcn registry that copies their source into your repo.
---

The runtime has no bar chart. Actor families such as charts, terminals and desktops are
distributed as a [shadcn](https://ui.shadcn.com) registry at
`https://docs.motion.actor/r/motionactor`. Installing an item copies its actor, view,
renderer, demo and the shared files they use into your repository, where you own and edit
them like any other file.

Nothing installed from it is special. A `BarChart` is a class that extends `LayoutActor`,
with signals, commands and a renderer, and everything under [Reactivity](/docs/reactivity) and
[Runtime](/docs/runtime) applies to it.

## Families

| Family | Covers |
| --- | --- |
| `ui` | Interface widgets, text treatments, feedback and utility surfaces |
| `scene3d` | 3D scenes, objects and cameras |
| `charts` | Animated charts and shared charting primitives |
| `handdrawn` | Marker annotations, such as arrows, rings and titles, that redraw every few frames |
| `code` | Code editors, terminals, file trees and developer UI |
| `diagrams` | Network graphs, state machines and explanatory diagrams |
| `layout` | Containers for arranging other actors |
| `media` | Designed image and video surfaces and the `Television` set |
| `input` | Input devices, command palettes and keyboard interactions |
| `overlays` | Callouts, spotlights and other overlays that direct attention |
| `simple-maps` | Geographic actors with addressable regions, backed by React Simple Maps |
| `browser` | Browser windows and panels |
| `calendar` | Calendar layouts and date views |
| `desktop` | The [`Desktop`](/docs/examples/desktop) and its windows |
| `documents` | Document viewers, annotations and page surfaces |
| `globe` | 3D globes |
| `sports` | Sports graphics built from data, with each part an addressable child |
| `timelines` | Timelines and chronologies |

`Image`, `Video` and the audio actors themselves are in the runtime's `@motionactor/media`;
the `media` family builds designed surfaces on top of them.

## Effects

An effect attaches to an actor and changes how it is drawn. The effect groups follow
the backend that runs them:

| Group | Runs |
| --- | --- |
| `fx-canvas` | WebGL and canvas 2D passes over an actor's rasterized DOM |
| `fx-dom` | Filters, transforms, clips and overlays applied to an actor's element, without rasterizing |
| `fx-three` | Postprocessing passes and material patches on a Three scene |
| `fx-pixi` | Pixi filters, each wrapping a `pixi-filters` class |

[Effects](/docs/rendering/effects) covers how an effect attaches to an actor.

## The item document

Each item is a shadcn registry item with extra fields:

```json title="/r/motionactor/charts-bar-chart.json"
{
  "name": "charts-bar-chart",
  "type": "registry:block",
  "entry": "src/components/motionactor/charts/barChart/index.ts",
  "family": "charts",
  "kind": "primitive",
  "intent": {
    "jobs": ["prove", "compare"],
    "useWhen": "A claim compares a handful of named things and the size of the gap is the argument…",
    "avoidWhen": "Only one figure matters, or there are more categories than a viewer can read…",
    "pairsWith": ["fx-canvas/bar-shine", "handdrawn/callout-circle"],
    "energy": "measured"
  },
  "controls": { "fields": [/* … */], "commands": [], "targets": [] },
  "renderers": [{ "export": "barChartRenderer", "actor": "BarChart", "backend": "dom" }]
}
```

| Field | Holds |
| --- | --- |
| `kind` | `"primitive"` for an actor you spawn, `"effect"` for one you attach |
| `family` | The family or effect group |
| `entry` | The module to import once the files are in your repository |
| `intent` | The jobs it does, when to use it and when not to, what it pairs with, and its energy: calm, measured, energetic or frantic |
| `controls` | Every field path with its kind, type and default, plus the actor's commands and animation targets. An editor builds its controls from this |
| `renderers` | Each renderer the item exports, with the actor class it draws and its backend |

`useWhen` and `avoidWhen` are written for choosing between components: they argue when a
visual makes the point, and leave what it draws to the description.