The Tab

A receipt of dotted-leader lines prices every item the same, then lands a total line.

Installation

$ pnpm dlx shadcn@latest add @remocn/the-tab

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TheTab } from "@/components/remocn/the-tab";
 
const TheTabScene = () => <TheTab items={[{ item: "Every component" }, { item: "Every template" }]} price="$0" total="one Sunday morning." />;
 
export const RemotionRoot = () => (
  <Composition
    id="TheTab"
    component={TheTabScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

A receipt builds line by line, each item joined to its price by a dotted leader; a rule draws under the list and the total lands word by word in the accent color. Pass items (each { item, price? }), price as the default per-line price, and totalLabel with total. The row pacing stretches to the composition length, so give it about 170 frames. It ships light and dark through theme.

Props8

Prop	Type	Default
items	TheTabItem[]DEFAULT_ITEMS Receipt rows; each has an item name and an optional price.
price	string"$0" Default price shown on rows without their own.
totalLabel	string"Total" Label for the total line.
total	string"one Sunday morning." Total text that lands word by word.
accent	string— Color of the total; defaults to the theme accent.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

itemsTheTabItem[]
Receipt rows; each has an item name and an optional price.
DefaultDEFAULT_ITEMS
pricestring
Default price shown on rows without their own.
Default"$0"
totalLabelstring
Label for the total line.
Default"Total"
totalstring
Total text that lands word by word.
Default"one Sunday morning."
accentstring
Color of the total; defaults to the theme accent.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"