# Black Box CTA
> A closing call to action on a night band with the product as a glass box: a wireframe with a lit core turning inside. Its faces open in turn to walk through the trial, each with a hairline label, and any of them opens under the pointer.
A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/black-box-cta).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/black-box-cta
- Screenshot: https://shadcn.exchange/shot/keyframeui/black-box-cta/light.png
- Registry item: https://keyframeui.com/r/black-box-cta.json
- Categories: blocks, cta-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/black-box-cta.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- Registry items: `https://keyframeui.com/r/black-box.json`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/black-box-cta
## Files
### `registry/blocks/black-box-cta.tsx`
```tsx
"use client";
import * as React from "react";
import { BlackBox, type BlackBoxFace } from "@/components/ui/black-box";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the
* colors, the copy, the buttons and the three faces, which walk
* through the trial. The band is night in both color schemes,
* so the box is always glass: a wireframe with a lit core.
* ─────────────────────────────────────────────────────────── */
const NIGHT = { paper: "#07080c", ink: "#f4f5f7", accent: "#7088ff" };
const HEADLINE = ["Open the box", "on your own books."];
const SUBLINE = "Connect a bank feed and watch Basalt close last month. It takes about ten minutes, and the books are yours to keep.";
const PRIMARY_CTA = { label: "Start free", href: "#start" };
const SECONDARY_CTA = { label: "Book a walkthrough", href: "#demo" };
const FINE_PRINT = "Read-only access · SOC 2 Type II · Cancel any time";
const FACES: BlackBoxFace[] = [
{
id: "connect",
label: "Connect",
detail: "Read-only bank and card feeds, in about ten minutes.",
icon: (
),
},
{
id: "close",
label: "Close",
detail: "Last month, reconciled while you watch.",
icon: (
),
},
{
id: "keep",
label: "Keep",
detail: "The closed books are yours, even if you leave.",
icon: (
),
},
];
/* ── Section ─────────────────────────────────────────────── */
export function BlackBoxCta() {
return (
{/* A low wash of the box's light, behind everything. */}