# 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 CTA Section block from KeyframeUI: a whole landing-page section built around the Black Box component, free to install as source with the shadcn CLI. Built with React, Tailwind CSS and Motion.
- Live preview: https://keyframeui.com/blocks/cta-sections/black-box-cta
- Category: CTA Sections
- Built with: [Black Box](https://keyframeui.com/components/black-box.md)
- npm dependencies: motion, clsx, tailwind-merge
## Installation
Register the @keyframeui registry in `components.json` once per project:
```json
{
"registries": {
"@keyframeui": "https://keyframeui.com/r/{name}.json"
}
}
```
Then add the block. It lands in `components/black-box-cta.tsx`, and the CLI also adds the components it's built with (`components/ui/black-box.tsx`) and `lib/utils.ts`, and installs the npm dependencies:
```bash
npx shadcn@latest add @keyframeui/black-box-cta
```
Or install by URL, without registering the namespace:
```bash
npx shadcn@latest add https://keyframeui.com/r/black-box-cta.json
```
## Usage
Put it where the section goes. The copy, links and data sit in constants at the top of the file; edit them there.
```tsx
import { BlackBoxCta } from "@/components/black-box-cta";
export default function Page() {
return ;
}
```
## Source
```tsx title="components/black-box-cta.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. */}