Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Dot Matrix Text for React

Text set on an LED dot matrix, each character lit from a 5×7 font on a grid of dim dots, standing still or running through like a ticker. For React with Base UI, when a status, a sign or a departure board should look lit.

Framework

Dot Matrix Text sets text the way a station board or a stadium sign does: each character lit from a 5×7 dot font on a grid of dim dots, the lit ones glowing softly. It's an em tall, so it follows the font size, and with scroll it runs through like a ticker, round and round.

Use it for a status readout, a departure board, a scoreboard or a retro headline. For seven-segment digits with a flicker, use LCD Text; for glowing tubes, Neon Text; for rows of text scrolling with the page, Scroll Velocity. The dots are round-capped strokes in one SVG, so a long text is still only a few elements, and the ticker is a CSS keyframe animation the install adds to your stylesheet, with no animation library. Screen readers read the text itself.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { DotMatrixText } from "@/components/ui/dot-matrix-text";
<p className="text-5xl">
  <DotMatrixText text="Ready" />
</p>

Demos

Sign

The lit dots take the text's colour, so a text-* class sets them; dimColor is the unlit grid, any CSS colour, here a faint white on a dark panel. glow={false} turns off the halo round the lit dots.

Preview width

Ticker

scroll runs the text through a window, round and round, with a blank cell between one pass and the next. Give it a width narrower than the text, here w-full in a small card; speed is how long it takes to move one character along, 600 ms by default. It stops while the pointer is over it.

Preview width

Accessibility

Screen readers read the text once, as written, from a visually hidden copy; the matrix is hidden from them. The ticker stops while the pointer is over it, and with reduced motion it stands still and can be scrolled by hand instead. Dots are small, so set the text large enough to read: a matrix an em tall needs a font size of about 24px or more.

FAQ

Which characters does it have?

The letters A to Z, the digits and common punctuation (! ? . , : ; ' " - + = / \ # % & ( ) * < > @ $ _ [ ] |). Lowercase letters show as capitals and accents are dropped, so "Café" shows CAFE. Any other character is a blank cell, the width of one character.

Can I add a character?

Yes, in the font table at the top of the component: a glyph is its character and seven rows from the top, each row one base-32 digit whose five bits are its dots from the left (v lights all five). Add it to any line of the table.

How do I make it bigger?

Set the font size: the matrix is an em tall, so text-6xl makes a larger sign and text-xl a small readout. Every dot scales with it.

How do I colour it?

The lit dots are the text's colour, so className="text-amber-400" or a theme colour sets them. dimColor sets the unlit grid; the default is the text's colour at 15%, which suits light and dark.

How wide is the ticker?

As wide as you make it: give className a width, such as w-64, or w-full in a narrow container, and the text runs through that window. Without one the window is as wide as the text, and the whole text slides round in it.

What happens with reduced motion?

The ticker stands still at the start of the text, and its window scrolls sideways by hand so the rest can still be read.

API Reference

DotMatrixText

<span> data-slot="dot-matrix-text"

PropType
textstring

The text. Letters show as capitals with their accents dropped; a character the font doesn't have shows as a blank cell.

dimColor?string

The unlit dots' colour, any CSS colour.

Default
"color-mix(in oklab, currentColor 15%, transparent)"
glow?boolean

Whether the lit dots glow. @default true.

Default
true
scroll?boolean

Whether the text runs through like a ticker, round and round. Give it a width narrower than the text, such as className="w-64".

Default
false
speed?number

How long the ticker takes to move one character along, in milliseconds. @default 600.

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.

CSS variableType
--dot-matrix-text-dimstring

The unlit dots' colour.

--dot-matrix-text-speedstring

How long the ticker takes to move one character along (600ms).

All 97 text effects