Show More
Truncate long text with an animated Show More / Show Less toggle.
Example
Installation
Button. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add show-moreAnatomy
import { ShowMoreText } from "@/components/ui/core/show-more";<ShowMoreText text="Lorem ipsum dolor sit amet." maxLength={100} />Another Examples
Custom Style and Label
You can apply your own styles and labels, allowing each item to match your design preferences or branding.
Serif Font
You can use a serif font to give the text a more classic or elegant appearance, enhancing readability and style.
Props
Loading types…
Heading
A semantic heading component that renders the appropriate HTML heading level with consistent typography and styling.
Avatar
An image element used to represent a user or entity, typically displayed as a circular or square thumbnail. Can fall back to initials or an icon when no image is provided.