# 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/logos14. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-07-29
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. [Logos](/blocks/logos)
5. /
6. Logo Marquee Panel
# Logo Marquee Panel[PRO](/pricing)
Soft panel carrying a centered statement over an endlessly scrolling logo track with gradient edge fades that pauses on hover, closed by a ruled row of three studio figures.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/logos14`
## Logos14: Logo Marquee Panel
Soft panel carrying a centered statement over an endlessly scrolling logo track. Gradient fades dissolve both edges into the panel, the animation pauses when the pointer is over it, and a ruled row of three figures closes the block.
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/logos14?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/logos14?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
This installs the block to `components/beste/block/logos14.tsx` plus the `badge7` component it uses for the eyebrow.
### Quick start
The installed file exports `logos14Demo` alongside the block: the exact props behind the preview above. Spread it to get a working logo marquee in one line.
tsxCopy
```
import { Logos14, logos14Demo } from "@/components/beste/block/logos14";
export default function Page() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Logos14 } from "@/components/beste/block/logos14";
export default function Page() {
return (
);
}
```
### Props
| Prop | Type | Default | Description |
| --------- | ----------------- | ------- | ------------------------------------- |
| badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
| heading | string | – | Centered statement above the marquee |
| items | Logo\[\] | \[\] | Logos in the scrolling track |
| stats | MarqueeStat\[\] | \[\] | Ruled figures under the marquee |
| className | string | – | Extra classes for the outer |
tsCopy
```
type Logo = {
src: string;
alt: string;
};
type MarqueeStat = {
title: string;
value: string;
};
```
### Behavior notes
* The track renders `[...items, ...items]` inside a `w-max` flex row and translates from `0` to `-50%`, so the second copy is exactly under the first when the animation restarts and the loop has no visible seam.
* The keyframe is declared in a scoped `