Text highlighter
The text highlighter component is a powerful tool that allows you to highlight specific text within a given text string. It is designed to be used in various scenarios, such as displaying search results, code snippets, or any other text-based content.
Preview
Welcome to Sera UI
Sera UI is an open-source React component library designed for building modern, responsive, and customizable user interfaces with ease. It leverages Tailwind CSS for styling and focuses on simplicity, accessibility, and developer experience.
Sera UI offers a collection of pre-built components like buttons, cards, modals, inputs, and advanced UI patterns, enabling faster development without sacrificing design quality. Ideal for both personal projects and production-grade apps, it emphasizes clean design and modular architecture.
Developers can Gradient highlight easily to match brand requirements. With active community support and detailed documentation, Sera UI aims to streamline frontend development efficiently.
How to Use
Basic Usage
Trigger Types
The component supports different trigger types for animations:
Highlight Directions
Control the direction of the highlight animation:
Custom Colors
Animation Transitions
Customize the animation timing and easing:
InView Options
Configure when the highlight triggers based on viewport intersection:
Different HTML Elements
Use different HTML elements as the container: