// ui/logo-cloud/logo-cloud.tsx import { cn } from "@paubha/registry/lib/cn"; import type * as React from "react"; export interface LogoCloudProps extends React.ComponentPropsWithRef<"div"> { /** Optional eyebrow above the logos. */ label?: React.ReactNode; } /** * Social-proof logo strip · decorative logos as children · label is plain text · * no interactive role of its own */ export function LogoCloud({ ref, className, label, children, ...props }: LogoCloudProps) { return (

{label != null ? (

{label}

) : null}

{children}

); } LogoCloud.displayName = "LogoCloud"; export interface LogoCloudItemProps extends React.ComponentPropsWithRef<"span"> { /** Accessible name when the child mark is decorative. */ name: string; /** Optional 24px mark before the wordmark (Figma showMark / mark slot). Decorative. */ mark?: React.ReactNode; } /** Text or mark stand-in for a brand logo. */ export function LogoCloudItem({ ref, className, name, mark, children, ...props }: LogoCloudItemProps) { return ( {mark != null ? ( ) : null} {children ?? name} ); } LogoCloudItem.displayName = "LogoCloudItem"; // lib/cn.ts import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; // Our named type-scale utilities (text-ui-*, text-body-*, text-display-*) are custom // Tailwind v4 @theme tokens tailwind-merge doesn't know about out of the box. Without // this, it falls back to treating them as arbitrary text-color classes and silently // drops them whenever a real text-fg-* color class is merged in alongside. Every // component that pairs a type-scale class with a color class (the documented, required // pattern) loses its font-size/line-height/letter-spacing at runtime. const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [ { text: [ "ui-xs", "ui-sm", "ui-md", "ui-lg", "body-sm", "body-md", "body-lg", "display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl", ], }, ], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

Logo Cloud

Installation

Usage

On this page