Compositions
Data Story
Data storytelling composition template.
CompositionreelsAdvanced
Install
npx remotion-ui@latest add data-storyTurn metrics, chart data, and process context into a complete explainer.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add data-storyImport after install
@/compositions/data-story- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: barData, metrics, steps, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { DataStory } from "@/compositions/data-story";
<DataStory barData={barData} metrics={metrics} steps={steps} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| barData* | ChartDatum[] | — | Bar chart data. |
| metrics* | MetricTickerItem[] | — | Metric cards. |
| steps* | TimelineStep[] | — | Context steps. |