# Beste UI
> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.
Markdown rendition of https://ui.beste.co/block/feature272. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-08-12
Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json
---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Recorded Companion Band
# Recorded Companion Band[PRO](/pricing)
A wide photographic band with a scrim, floating a live video card in the middle of it, over three hairline notes that state how the recordings are made and what ships with them.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/feature272`
## Feature272: Recorded Companion Band
A wide photographic band with a scrim, floating a live video card in the middle of it, over three hairline notes that state how the recordings are made and what ships with them.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
[Upgrade NowUpgrade Now](/pricing)
### Installation
Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).
**Radix flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r/feature272?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/feature272?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
This installs the block to `components/beste/block/feature272.tsx`, the `badge6` component used for the eyebrow, and the `media25` piece that floats in the band (installed to `components/beste/piece/media25.tsx`).
### Quick start
The installed file exports `feature272Demo` alongside the block: the exact props behind the preview above. Spread it to get a working recording band in one line.
tsxCopy
```
import { Feature272, feature272Demo } from "@/components/beste/block/feature272";
export default function WatchPage() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Feature272 } from "@/components/beste/block/feature272";
import { Media25 } from "@/components/beste/piece/media25";
export default function WatchPage() {
return (
}
notes={[
{ title: "One take, no edit", description: "Mistakes stay in." },
{ title: "Written version first", description: "The essay is always published before the recording." },
]}
/>
);
}
```
### Props
| Prop | Type | Default | Description |
| ----------- | --------- | ------- | --------------------------------------------------- |
| eyebrow | string | – | Badge6 label above the hairline rule |
| heading | string | – | Section heading under the rule |
| description | string | – | Supporting paragraph |
| image | BandImage | – | Photograph filling the band |
| media | ReactNode | – | Live asset floated in the band, media25 in the demo |
| notes | Note\[\] | \[\] | Three hairline notes under the band |
| className | string | – | Extra classes for the outer section |
tsCopy
```
type BandImage = {
src: string;
alt: string;
};
type Note = {
title: string;
description: string;
};
```
### Behavior notes
* `media` is a slot, not a fixed component. The demo fills it with `media25`, but anything you pass renders in the same place and keeps the band's own scrim behind it.
* The band only renders when `media` is passed, so the photograph never appears as an empty picture with nothing on it.
* The wrapper is `relative`. Without that the absolutely positioned image would escape and cover the whole section.
* The scrim is a flat `bg-foreground/50` between the photograph and the card, which is what keeps a light asset legible on a light picture.
* The band is a fixed `h-80`, rising to `md:h-96`, so the asset inside it stays the same size whatever the copy above does.
## More Feature blocks
[View all Feature](/blocks/feature)
[](/block/feature253)
PRO
feature253
### Wide Band With Field Facts
Cinematic image band carrying a pill label in its corner, followed by a ruled four-column row where each measured fact pairs an oversized figure with a sentence of testing context, with the outline pill CTA sitting on the heading line.
[](/block/feature268)
PRO
feature268
### Full-Bleed Workspace Band
A feature that breaks its media out of the container into a full-bleed image band floating a live view switcher, framed by a two-column header above and three numbered captions below.
[](/block/feature243)
PRO
feature243
### Compact Asset Cards
A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description.
[](/block/feature190)
PRO
feature190
### Large Icon Cards with Dividers over Media
Full-width feature cards separated by dividers with large icons and descriptions over background media
[](/block/feature265)
PRO
feature265
### Staircase Asset Trio
A feature whose three image tiles step down the page in a staircase on large screens, each floating a different live asset above a small kicker, title, and paragraph.
[](/block/feature194)
FREE
feature194
### Three Cards With Asset Media
Three feature cards that swap an icon for a real micro-asset: a bar chart, a before/after stat, and a terminal prompt. Demonstrates how registry-pieces drop into block media slots.
## Ship the interface, keep the code.
New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.
[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)
### Library
* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)
### Learn
* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)
### More
* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)
### Shadcn Blocks
* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)
© 2026, [Beste](https://beste.co). All rights reserved.