shadcn.io is not affiliated with official shadcn/ui
Chrome Text gives a word the finish of a chrome bar: light from above, a dark horizon just under the middle of the letters, the ground lit again below, the way polished metal reflects its surroundings. Now and then a band of light sweeps across the letters, then rests. It comes polished, brushed with a fine grain, or blackened to gunmetal.
Use it for a headline that should feel solid and premium: an awards page, a product launch, a hardware brand. For a coloured finish, use Gradient Text; for glossy plastic that catches the pointer, Gloss Text; for holographic foil, Foil Text; for letters pressed into the page, Emboss Text. It's CSS only: the reflection and the band are backgrounds clipped to the letters, and a keyframe animation the install adds to your stylesheet moves the band, with no animation library. The metal is deeper on a light page and brighter on a dark one, and with reduced motion it holds still.
Installation
Usage
import { ChromeText } from "@/components/ui/chrome-text";<h2>
<ChromeText text="Built to last" />
</h2>Demos
Variants
variant is the finish: polished, the default, is mirror chrome; brushed adds fine hairlines at uneven gaps, like machined aluminium; blackened is darker gunmetal with bright edges, for a light page: on a dark one it sinks into the background.
Shimmer
duration is one sweep of the light and the rest after it, 6000 ms by default; the sweep takes the first two fifths. shimmer={false} holds the metal still, for a label where a moving light would distract.
Accessibility
The text stays real text, read by screen readers and selectable. The metal's tones are darker on a light page so the letters keep their contrast; in forced-colors mode, where backgrounds are removed, the text falls back to the system's text colour. The sweep pauses while the pointer is over the text, and with reduced motion it doesn't run.
FAQ
How is the chrome made?
With two backgrounds clipped to the letters: a vertical gradient that goes from the sky's tone through a dark horizon to the ground's, as a curved chrome bar reflects them, and a narrow band of light three times the text's width that the animation slides across. The depth under the letters is a hairline drop shadow.
Does it work on text that wraps?
Yes. Each line gets its own reflection, with the horizon through its own middle, and its own sweep of light, so a two-line headline reads as two chrome bars rather than one tall one.
Why does it look darker on a light page?
Bright chrome on a white page would disappear: its lightest tones are the page's colour. On a light page the sky and ground it reflects are deeper, so the letters keep their edge; on a dark page they're brighter. Set --chrome-text-sky and --chrome-text-ground for your own surfaces.
How is it different from Gloss Text?
Chrome is neutral metal with a horizon and a light that sweeps on its own. Gloss is one bright colour, like candy or plastic, with a highlight that follows the pointer.
API Reference
ChromeText
<span> data-slot="chrome-text"
textstring
The text.
duration?number
One sweep of the light across the text and the rest after it, in milliseconds.
- Default
6000
shimmer?boolean
A band of light that sweeps across the letters now and then; false
holds the metal still.
- Default
true
variant?"polished" | "brushed" | "blackened"
The finish: polished mirror chrome, brushed with a fine machined
grain, or blackened gunmetal.
- Type
"polished" | "brushed" | "blackened"- Default
"polished"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--chrome-text-durationstring
One sweep of the light and the rest after it (6s).
--chrome-text-groundstring
The dark the metal reflects.
--chrome-text-shinestring
The band of light's colour.
--chrome-text-skystring
The light the metal reflects.
Related
Gradient Text
DecorativeA coloured finish that flows
- Pro
Gloss Text
DecorativeGlossy plastic that catches the pointer
- Pro
Foil Text
DecorativeHolographic foil that tilts
- Pro
Handcrafted
Emboss Text
DecorativeLetters pressed into the page
Shimmering Text
DecorativeA band of light without the metal
- Pro
Neon Text
DecorativeLight from a tube, not a reflection