# Button to Card
URL: https://remocn.dev/docs/product-scenes/button-to-card

A button expands into a store card row with product images, prices and status

- Install: `npx shadcn@latest add @remocn/button-to-card`
- Vibe: premium
- Natural length: 162f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/button-to-card
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ButtonToCard } from "@/components/remocn/button-to-card";

const ButtonToCardScene = () => (
  <ButtonToCard
    buttonLabel="Add a product"
    name="Linen throw"
    price="$72.00"
    storeName="Hearth & Co"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ButtonToCard"
    component={ButtonToCardScene}
    durationInFrames={162}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A pill button presses and morphs into a product form that types the name and price. A cursor drags an image into the media slot, saves, and the card shrinks into a row of product tiles with a store header and a Live status. Pass `buttonLabel`, `name`, `price`, `others` (the other tiles), `storeName`, and your own `images`, because the default images use `staticFile(...)` paths that only exist in the Remocn repo. The `theme` prop ships dark and light.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light card and background styling. |
| `accent` | `string` | `"#f2552c"` | Accent color for the button and status highlights. |
| `buttonLabel` | `string` | `"Add an item"` | Text on the starting pill button. |
| `name` | `string` | `"Ceramic pitcher"` | Name typed into the new product card. |
| `price` | `string` | `"$48.00"` | Price typed into the new product card, with currency symbol. |
| `images` | `string[]` | — | Product image URLs: the new item's image first, then the others. |
| `others` | `{ name: string; price: string }[]` | — | Other products shown beside the new one, as name and price pairs. |
| `storeName` | `string` | `"Studio Goods"` | Store name shown in the header and catalogue title. |
| `ground` | `GshPresetId` | — | Preset id for the shader background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader background parameters. |

## Use when
- A storefront-builder launch beat showing how an Add item button becomes a finished product listing.
- A catalogue or inventory tool demo where a new item is created, given an image and goes live.
- A hero morph where a single pill button transforms into a full row of product cards.

## Don't use when
- You want the product grid to grow into a full admin app with sidebar — use `grid-to-app`.
- The beat is a shopper adding to a cart rather than a merchant adding a product — use `cart-add`.