ComponentsCore

Show More

Truncate long text with an animated Show More / Show Less toggle.

Example

Installation

Button

A button lets users perform an action or trigger an event using mouse, touch, or keyboard input. It's a key interactive element in most user interfaces.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/show-more.tsx
npx @libravelui@latest add show-more

Anatomy

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…

Edit on GitHub

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.