Server Component · 0 KB client JS

Highlight

Wraps matches of a query in styled <mark> elements: search-result emphasis in prose.

Astralis paints every component with semantic tokens, so one brand color and a dark-mode class restyle the whole library.

import { Highlight, Text, Box } from "astralis-ui";

export function HighlightDemo() {
  return (
    <Box maxW="md">
      <Text>
        <Highlight query="semantic tokens">
          Astralis paints every component with semantic tokens, so one brand
          color and a dark-mode class restyle the whole library.
        </Highlight>
      </Text>
    </Box>
  );
}

Semantic tokens restyle every component. Swap the tokens, not the components.

Text

variant

ignoreCase

import { Highlight } from "astralis-ui";

<Highlight
  query="tokens"
>
  Semantic tokens restyle every component. Swap the tokens, not the components.
</Highlight>

Import#

import { Highlight } from "astralis-ui";

Usage#

Give it a plain string as children plus a query (string or array), and each match becomes a real <mark>: semantic emphasis that screen readers can announce. Matching is case-insensitive by default.

Multiple queries: eight planets, hundreds of moons.

The solid variant fills the mark with the full yellow.

Set ignoreCase to false and only exact CASE matches (not case) light up.

import { Highlight, Text, VStack } from "astralis-ui";

export function HighlightVariants() {
  return (
    <VStack gap="3" alignItems="start" maxW="md">
      <Text>
        <Highlight query={["planets", "moons"]}>
          Multiple queries: eight planets, hundreds of moons.
        </Highlight>
      </Text>
      <Text>
        <Highlight query="solid" variant="solid">
          The solid variant fills the mark with the full yellow.
        </Highlight>
      </Text>
      <Text>
        <Highlight query="CASE" ignoreCase={false}>
          Set ignoreCase to false and only exact CASE matches (not case) light up.
        </Highlight>
      </Text>
    </VStack>
  );
}

Props#

Prop	Type	Default	Description
`children`	`string`	None	The plain text to scan. Required.
`query`	`string \| string[]`	None	The substring or substrings to wrap in mark elements. Required.
`variant`	`"subtle" \| "solid"`	`"subtle"`	Tinted or fully filled marks.
`ignoreCase`	`boolean`	`true`	Match regardless of letter case.
`markClassName`	`string`	None	Extra class for each mark element.