Browse components
Logo Stepper
A row of logos that steps through one at a time, with a spring focus ring sliding between them and a caption per logo.
Installation
npx shadcn@latest add @glint-ui/logo-stepperFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/logo-stepper.json
Usage
import { LogoStepper } from "@/components/ui/logo-stepper";
<LogoStepper
logos={[
{ name: "Northwind", logo: <NorthwindLogo />, caption: "68% faster builds." },
{ name: "Lumen", logo: <LumenLogo />, caption: "3.1M monthly visitors." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logos | ReactNode | — | Array of { name, logo, caption? }. |
| interval | number | 2400 | Ms each logo stays highlighted. |
| autoPlay | boolean | true | Step automatically; pauses on hover and focus. |
| accent | string | "#a3e635" | Focus ring and progress color. |
| dimInactive | boolean | true | Dim and desaturate the other logos. |
| className | string | — | Extra classes for the root element. |