Search for a command to run...
An expandable content component that shows a "Show More" button when content exceeds a specified length or number of lines.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quisquam assumenda eligendi provident magni error voluptatibus obcaecati ab qui necessitatibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quisquam assumenda eligendi provident magni error voluptatibus obcaecati ab qui necessitatibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quisquam assumenda eligendi provident magni error voluptatibus obcaecati ab qui necessitatibus.
import { ShowMore } from "@/registry/optics/show-more";<ShowMore maxLines={3}> <p className="text-base font-normal"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quisquam assumenda eligendi provident magni error voluptatibus obcaecati ab qui necessitatibus. </p></ShowMore><ShowMore maxLength={100}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ShowMore><ShowMore maxLines={2} maskColor={{ default: "from-sidebar", dark: "from-sidebar", }}> <p>Content with custom mask color</p></ShowMore>import { ShowMore } from "@/registry/optics/show-more";<ShowMore maxLines={3}> <p className="text-base font-normal"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quisquam assumenda eligendi provident magni error voluptatibus obcaecati ab qui necessitatibus. </p></ShowMore><ShowMore maxLength={100}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ShowMore><ShowMore maxLines={2} maskColor={{ default: "from-sidebar", dark: "from-sidebar", }}> <p>Content with custom mask color</p></ShowMore>