Add Mark component for semantic text highlighting

[jalexw]

Summary

Introduces a new Mark component for semantic text highlighting, along with a companion HighlightedText component for auto-highlighting search terms. The component supports multiple visual styles (solid, soft, underline, outline), color variants, sizes, and optional animations.

Changes

• New Mark component (src/components/ui/mark/mark.tsx)

  • Renders as semantic <mark> element (or <span> if needed)
  • Four distinct visual styles: solid (highlighter feel), soft (subtle tint), underline (bottom border), and outline (border only)
  • Eight color variants: default, primary, secondary, info, success, warning, destructive, accent
  • Three size presets: sm, default, lg
  • Optional rounded corners and CSS-based fade-in animation
  • Full dark mode support with explicit color choices

• New HighlightedText component (src/components/ui/mark/mark.tsx)

  • Auto-wraps matches of a search term inside longer text with <Mark> elements
  • Accepts string, RegExp, or array of strings as match patterns
  • Supports case-sensitive and whole-word matching options
  • Memoized regex building and segment computation for performance
  • Defensive guards against zero-width regex matches

• Variant definitions (src/components/ui/mark/mark-variants.ts)

  • Exported type-safe variant IDs for use in controls and iteration

• Comprehensive Storybook stories (src/components/ui/mark/Mark.stories.tsx)

  • Individual stories for each style and variant combination
  • Size and rounded corner examples
  • Animated reveal demonstration
  • Heading integration example
  • Interactive search highlight example with case/whole-word toggles
  • Multi-token and RegExp pattern examples
  • Interactive variant × style matrix

• Public API exports (src/components/ui/mark/index.ts and src/components/ui/index.ts)

  • Exported Mark, HighlightedText, variant types, and CVA utilities
  • Updated main package index to include mark exports

• Version bump (package.json)

  • Bumped from 0.71.1 to 0.72.1

Implementation Details

• Uses class-variance-authority for variant management with compound variants for style × color combinations
• Leverages useMemo in HighlightedText to prevent unnecessary regex rebuilds
• Supports React 19 ref-as-prop pattern via ref parameter
• Includes data-slot and data-variant attributes for testing and styling hooks
• Inherits font size from parent element, making it suitable for use in headings and various text contexts

https://claude.ai/code/session_019pT5j22ZTko2muB44ohBd1

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	Jun 8, 2026 3:10pm