Fading logo field
Logo grid that fades and blurs toward the edges.
Usage
import { LogoCloudFade } from '@/components/blocks/logo-cloud-01'
<LogoCloudFade />
// Fade out on both sides with a wider, shorter field
<LogoCloudFade columns={10} rows={3} fade="sides" />
// Bring your own logos (24x24 SVG paths)
<LogoCloudFade
label="Our customers"
logos={[
{ name: 'Acme', color: '#2563EB', paths: 'M12 2 2 22h20z' },
{ name: 'Globex', paths: 'M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20' },
]}
/>
Install
pnpm dlx shadcn@latest add @pastaui-pro/logo-cloud-01npx shadcn@latest add @pastaui-pro/logo-cloud-01yarn dlx shadcn@latest add @pastaui-pro/logo-cloud-01bunx --bun shadcn@latest add @pastaui-pro/logo-cloud-01Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logos | BrandLogo[] | = 32 built-in app logos | Logos to show, each with a name, 24x24 SVG paths and optional light and dark brand colors. Logos repeat to fill the grid. |
| columns | number | = 8 | Number of logo columns. |
| rows | number | = 4 | Number of logo rows. |
| fade | 'bottom-right' | 'right' | 'bottom' | 'sides' | 'none' | = 'bottom-right' | Which edges fade and blur away. |
| label | string | = 'Supported apps' | Accessible label for the logo list. |
| className | string | = — | Additional classes for the section. |
| style | CSSProperties | = — | Inline styles, handy for overriding the --pp-* color variables. |