About
An expandable text/content block that collapses long content behind a fading mask and a "Show More" / "Show Less" toggle button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Show More to your project and fits it to your theme.
Code
How Show More is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { ShowMore } from "@/components/ui/show-more";
export default function ShowMoreDemo() {
return (
<div className="flex flex-col gap-2 max-w-md mx-auto p-6">
<ShowMore
maskColor={{
default: "from-sidebar",
dark: "from-sidebar",
}}
moreContent={
<div className="text-base space-y-3 mt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
}
>
<p className="text-base">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus
quisquam assumenda eligendi provident magni error voluptatibus
obcaecati ab qui necessitatibus.
</p>
</ShowMore>
</div>
);
}