Delta Components

Docs

Highlighter

A text highlighter component for landing pages with customizable highlight colors. Inspired by Klack landing page.

Klack Sound

Preview

Code

Open in

Make your idea stand out.

Overview

The Highlighter component adds eye-catching highlight styles to text, making it perfect for landing pages, marketing content, and call-to-action elements. It supports multiple styles, colors, and thicknesses with dark mode support.

Text Prop Required

The component requires the text prop instead of children to ensure proper highlight overlay positioning. Using children would cause the highlight to render behind the text content.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/highlighter.json

Usage

import { Highlighter } from "@/registry/landing-page/highlighter"
 
export function Component() {
  return (
    <h1 className="text-3xl font-bold">
      Make your landing page <Highlighter text="stand out" /> with highlighted
      text.
    </h1>
  )
}

Variants

<h2>Default style: <Highlighter text="Default" /></h2>
<h2>Success style: <Highlighter text="Success" variant="success" /></h2>
<h2>Info style: <Highlighter text="Info" variant="info" /></h2>
<h2>Warning style: <Highlighter text="Warning" variant="warning" /></h2>
<h2>Destructive style: <Highlighter text="Destructive" variant="destructive" /></h2>

Thickness

<p>Thin highlight: <Highlighter text="Thin" thickness="thin" /></p>
<p>Default highlight: <Highlighter text="Default" /></p>
<p>Thick highlight: <Highlighter text="Thick" thickness="thick" /></p>

Custom Colors

<p>
  <Highlighter
    text="Custom color highlight"
    shadowColor="rgba(59, 130, 246, 0.5)"
    darkShadowColor="rgba(59, 130, 246, 0.4)"
  />
</p>

API Reference

Props

Prop	Type	Default	Description
`variant`	`"default" \| "success" \| "info" \| "warning" \| "destructive"`	`"default"`	The highlight style variant
`thickness`	`"thin" \| "default" \| "thick"`	`"default"`	The thickness of the highlight
`shadowColor`	`string`	`undefined`	Custom highlight color (overrides variant)
`darkShadowColor`	`string`	`undefined`	Custom highlight color for dark mode
`animate`	`boolean`	`false`	Whether to animate the highlight on scroll
`asChild`	`boolean`	`false`	Whether to merge props onto child element
`text`	`string`	-	Text content to highlight (required)
`className`	`string`	`""`	Additional CSS classes