Highlight
A shadcn-style text highlighting utility built with Ark UI primitives.
Ark CN keeps locale-aware formatting and RTL-aware layouts close to the component source, so docs previews stay honest.
import { Highlight } from "@/components/ui/highlight";
const TEXT =
"Ark CN keeps locale-aware formatting and RTL-aware layouts close to the component source, so docs previews stay honest.";
const HighlightDemo = () => (
<div className="max-w-xl rounded-xl border border-border bg-card p-5 text-sm leading-7">
<Highlight text={TEXT} query={["ark", "locale", "rtl"]} />
</div>
);
export default HighlightDemo;
Installation
npx shadcn@latest add @ark-cn/highlightInstall the dependency required by this utility:
npm install @ark-ui/reactCopy the utility source into your app:
TSXcomponents/ui/highlight.tsx
"use client";
import {
type HighlightChunk,
Highlight as HighlightPrimitive,
type HighlightProps as HighlightPrimitiveProps,
type UseHighlightProps,
useHighlight,
} from "@ark-ui/react/highlight";
import { cn } from "@/lib/utils";
export type HighlightProps = HighlightPrimitiveProps;
export const Highlight = ({ className, ...props }: HighlightProps) => (
<HighlightPrimitive
className={cn(
"rounded-sm bg-warning/15 px-0.5 text-foreground dark:bg-warning/20",
className,
)}
data-slot="highlight"
{...props}
/>
);
export type { HighlightChunk, UseHighlightProps };
export { useHighlight };
Update import aliases to match your project setup.
Usage
import { Highlight } from "@/components/ui/highlight"Examples
Default
Ark CN keeps locale-aware formatting and RTL-aware layouts close to the component source, so docs previews stay honest.
import { Highlight } from "@/components/ui/highlight";
const TEXT =
"Ark CN keeps locale-aware formatting and RTL-aware layouts close to the component source, so docs previews stay honest.";
const HighlightDemo = () => (
<div className="max-w-xl rounded-xl border border-border bg-card p-5 text-sm leading-7">
<Highlight text={TEXT} query={["ark", "locale", "rtl"]} />
</div>
);
export default HighlightDemo;
API reference
This utility mirrors Ark UI's Highlight and applies a lightweight default mark style so highlighted matches remain visible in docs and app surfaces.
See the ARK UI documentation for the full API.