shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Regex Text for React

Q: How do I pass the pattern?

As a string, the way new RegExp takes it, with the flags apart in flags. In a JavaScript string a backslash is doubled, so \b\w+\b is written "\\b\\w+\\b"; a constant declared once keeps it readable.

Q: Can a pattern freeze the page?

A pattern prone to catastrophic backtracking, such as (a+)+$ on a long text, is as slow here as anywhere else in JavaScript, since the browser's own engine runs it. Regex Text doesn't guard against it: keep patterns from untrusted people short, or check them before you pass them.

Q: How do I make the highlight stop?

loop={false} walks the matches once and rests on the last one. duration is how long it stays on each match, 1000 ms by default; a single match, or none, never walks.

Q: What colour are the marks?

Your theme's --info, light on every match and strong on the one the highlight is on, light and dark. Pass highlightColor for any other CSS colour; the install adds --info to your theme if it doesn't have one.

Text with every match of a regular expression marked, and a highlight that walks from one match to the next. For React with Base UI, when a pattern should show what it finds.

Regex Text runs a regular expression over a text and marks every match, then walks a stronger highlight from one match to the next, like a search cursor stepping through the results. It holds on each match for a moment before it moves on, round and round, and stops while the pointer is over it.

Use it in a regex tool, a tutorial on patterns, the docs of a validator, or a log where the errors should stand out. To mark what someone types into a search box, use Search Highlight Text; for code with every token coloured, Syntax Text. The walk is CSS alone: one registered number runs from the first match to the last through a keyframe animation the install adds to your stylesheet, and each mark works out from it how near the highlight is, with no animation library. With reduced motion every match is marked alike.

PreviewCode

/\b[45]\d{2}\b/g

GET  /api/users        200
POST /api/orders       422
GET  /api/users/42     404
GET  /api/health       200
POST /api/login        500

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 Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { RegexText } from "@/components/ui/regex-text";

<RegexText pattern="[45]\d\d" text="GET /users 200 · POST /orders 422" />

Demos

Flags

flags are the regular expression's flags, such as i to ignore case; g is always added, since every match is marked. The same pattern without and with i:

PreviewCode

Live

pattern can change as someone types it. A pattern that doesn't compile yet, half way through a group, shows the text plain until it does; it never throws.

PreviewCode

Accessibility

The text stays real text, read once by screen readers, with each match in a <mark> that some of them announce as highlighted. The moving highlight is only a stronger tint, so nothing changes for a screen reader as it walks. It stops while the pointer is over the text, and with reduced motion it doesn't walk at all: every match keeps the same light tint. In forced-colors mode the marks take the system's highlight colours.

FAQ

How do I pass the pattern?

As a string, the way new RegExp takes it, with the flags apart in flags. In a JavaScript string a backslash is doubled, so \b\w+\b is written "\\b\\w+\\b"; a constant declared once keeps it readable.

What if the pattern is invalid?

The text shows plain, with no marks, and nothing throws: a pattern that fails to compile, or bad flags, is caught. Matches of nothing at all, such as a* between letters, are skipped.

Can a pattern freeze the page?

A pattern prone to catastrophic backtracking, such as (a+)+$ on a long text, is as slow here as anywhere else in JavaScript, since the browser's own engine runs it. Regex Text doesn't guard against it: keep patterns from untrusted people short, or check them before you pass them.

How do I make the highlight stop?

loop={false} walks the matches once and rests on the last one. duration is how long it stays on each match, 1000 ms by default; a single match, or none, never walks.

What colour are the marks?

Your theme's --info, light on every match and strong on the one the highlight is on, light and dark. Pass highlightColor for any other CSS colour; the install adds --info to your theme if it doesn't have one.

Does it need a monospace font?

No. It marks the text in whatever font it's in; a monospace font suits code and logs, and whitespace-pre-wrap keeps their spacing and line breaks.

What happens with reduced motion?

The highlight doesn't walk: every match is marked with the same light tint, all the time.

API Reference

RegexText

<span> data-slot="regex-text"

PropType

patternstring

The regular expression, as a string ("\\b\\w{5}\\b"). One that doesn't compile shows the text plain.

textstring

The text to search.

duration?number

How long the highlight stays on each match, in milliseconds. @default 1000.

flags?string

The regular expression's flags, such as i to ignore case; g is always added. @default "g".

Default: "g"

highlightColor?string

The marks' colour, any CSS colour; the match in turn takes it strong, the others faint.

Default: "var(--info)"

loop?boolean

Whether the highlight walks the matches forever, or once, resting on the last.

Default: true

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

--regex-text-colorstring

The marks' colour.

--regex-text-durationstring

How long the highlight stays on each match (1000ms).

0 matches
Every component ships as source you own: copy it into your project, change its markup, restyle it with your theme, keep its motion or drop it. Each component reads in under a minute, with its types, its defaults and a demo.
Pro
Search Highlight Text
Interactive
Mark what someone types in a search

// Greet someone by name
export const greet = (name: string) => `Hello, ${name}!`;

const message = greet("world");
console.log(message, 42);

Pro

Syntax Text

Entrance

Code with every token coloured

Make it unmistakably yours.
Highlight Text
Decorative
Draw one phrase of your own copy

 export async function getUser(id: string) {-Removed:   return db.user.findUnique({ where: { id } });+Added:   return db.user.findUniqueOrThrow({ where: { id } }); } -Removed: const cache = new Map();+Added: const cache = new LRUCache({ max: 500 });

Pro

Diff Text

Entrance

Show what changed in a few lines

09:41:00[INFO]Compiling routes…
09:41:01[INFO]GET /api/users 200 in 18ms
09:41:02[OK]Build succeeded in 1.2s
09:41:03[INFO]Hot module replaced 3 files
09:41:04[WARN]Unused export legacyHandler in lib/api.ts
09:41:06[INFO]GET /api/posts 200 in 24ms
Pro
Log Stream Text
Motion
A live log where errors stand out

{
  "name": "acme-ui",
  "version": "2.4.0",
  "components": [
    "button",
    "dialog",
    "tooltip"
  ],
  "stable": true,
  "license": null
}

Pro

JSON Text

Entrance

A data object written out

All 97 text effects

Installation

Usage

Demos

Flags

Live

Accessibility

FAQ

How do I pass the pattern?

What if the pattern is invalid?

Can a pattern freeze the page?

How do I make the highlight stop?

What colour are the marks?

Does it need a monospace font?

What happens with reduced motion?

API Reference

RegexText

Related

Search Highlight Text

Syntax Text

Highlight Text

Diff Text

Log Stream Text

JSON Text