Read More Content Expander

A card whose long description is truncated to a short preview and expands to reveal the full text through a collapsible "Read more" toggle with a fade overlay.

CnippetbyCnippet

import Pattern from "@/components/ui/read-more-content-expander";

export default function Default() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6">
      <Pattern />
    </div>
  );
}

Dependencies

lucide-react

Source

ui.cnippet.dev

Published

8/19/2026

Similar components

Explore more

Part of Cnippet — browse the full library on 21st.dev.

Card components1780 Collapsible components269

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Read More Content Expander

Dependencies

Tags

Source

Published

Similar components

Explore more