Delta Components

Docs

Highlighter

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

20 views

5 downloads

Based onKlack Sound

Demo

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 over the text content.

Installation

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

Usage

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

Variants

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

Thickness

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

Custom Colors

1<p>
2  <Highlighter
3    text="Custom color highlight"
4    shadowColor="rgba(59, 130, 246, 0.5)"
5    darkShadowColor="rgba(59, 130, 246, 0.4)"
6  />
7</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