Stats band
Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.
Logo marquee
A quiet, continuously moving row of brand marks with a pause control.
npx shadcn@latest add @silicon-ui/logo-marqueeInstallation
With the shadcn CLI
npx shadcn@latest add @silicon-ui/logo-marqueeManually
Install the dependencies.
npm install lucide-react motionCopy these files into your project. Shared files are skipped if you already have them.
components/silicon-ui/blocks/logo-marquee/logo-marquee.tsxcomponents/silicon-ui/blocks/logo-marquee/logo-marquee.module.csscomponents/silicon-ui/button/button.tsxsharedcomponents/silicon-ui/button/button.module.cssshared
Install the foundation once per app for the design and motion tokens:
npx shadcn@latest add @silicon-ui/silicon-foundation
Usage
Source codetsx
API reference
| Prop | Type | Default |
|---|---|---|
title | string | "Good work moves between tools" |
description | string | "From the first idea to the final handoff, a familiar set of tools stays close to the work." |
brands | LogoMarqueeBrand[] | exampleBrands |
tone`color` shows each mark in its official colors; `mono` draws every mark in the text color. | LogoMarqueeTone
| "color" |