[{"data":1,"prerenderedAt":558},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Fshow-more":66,"surround-\u002Fdocs\u002Fcomponents\u002Fshow-more":555},[4],{"title":5,"path":6,"stem":7,"children":8,"page":14},"Docs","\u002Fdocs","docs",[9,16,20,60],{"title":10,"path":11,"stem":12,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",null,false,"page",{"title":17,"path":18,"stem":19,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",{"title":21,"path":22,"stem":23,"children":24,"navigation":13,"new":14,"soon":14,"hide":14,"type":59},"Components","\u002Fdocs\u002Fcomponents","docs\u002F03.components",[25,31,35,39,43,47,51,55],{"title":26,"path":27,"stem":28,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002F03.components\u002F01.autocomplete",true,"component",{"title":32,"path":33,"stem":34,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Show More","\u002Fdocs\u002Fcomponents\u002Fshow-more","docs\u002F03.components\u002F02.show-more",{"title":36,"path":37,"stem":38,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002F03.components\u002F03.typography",{"title":40,"path":41,"stem":42,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002F03.components\u002Fcode-block",{"title":44,"path":45,"stem":46,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Snippet","\u002Fdocs\u002Fcomponents\u002Fcode-snippet","docs\u002F03.components\u002Fcode-snippet",{"title":48,"path":49,"stem":50,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Guided Tour","\u002Fdocs\u002Fcomponents\u002Fguided-tour","docs\u002F03.components\u002Fguided-tour",{"title":52,"path":53,"stem":54,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Meter","\u002Fdocs\u002Fcomponents\u002Fmeter","docs\u002F03.components\u002Fmeter",{"title":56,"path":57,"stem":58,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Star Rating","\u002Fdocs\u002Fcomponents\u002Fstar-rating","docs\u002F03.components\u002Fstar-rating","group",{"title":61,"path":62,"stem":63,"children":64,"navigation":13,"new":14,"soon":29,"hide":29,"type":59},"Animations","\u002Fdocs\u002Fanimation","docs\u002F04.animation\u002Findex",[65],{"title":61,"path":62,"stem":63,"navigation":13,"new":14,"soon":29,"hide":29,"type":15,"children":-1},{"id":67,"title":32,"body":68,"component":29,"description":545,"extension":546,"hide":14,"lastUpdated":547,"links":548,"meta":551,"navigation":13,"new":29,"path":33,"rawbody":552,"seo":553,"soon":14,"stem":34,"__hash__":554},"content\u002Fdocs\u002F03.components\u002F02.show-more.md",{"type":69,"value":70,"toc":527},"minimark",[71,76,89,93,153,157,162,173,181,185,192,198,202,205,211,215,218,254,258,262,269,447,451,458,494,497,507,510,516,519],[72,73],"component-preview",{"description":74,"name":75},"A component for truncating and revealing content.","ShowMoreDemo",[77,78,79,80,84,85,88],"p",{},"The ",[81,82,83],"code",{},"ShowMore"," component allows you to keep your interface clean by truncating long content and giving users the choice to expand it. It features height-based animations via ",[81,86,87],{},"motion-v"," and an optional fade effect for a premium feel.",[90,91,17],"h2",{"id":92},"installation",[94,95,96,112,125],"code-tabs",{},[97,98,99,106],"doc-tabs-list",{},[100,101,103],"doc-tabs-trigger",{"value":102},"cli",[77,104,105],{},"CLI",[100,107,109],{"value":108},"manual",[77,110,111],{},"Manual",[113,114,115],"doc-tabs-content",{"value":102},[116,117,123],"pre",{"className":118,"code":120,"language":121,"meta":122},[119],"language-bash","npx sulaf@latest add show-more\n","bash","",[81,124,120],{"__ignoreMap":122},[113,126,127],{"value":108},[128,129,130,136,142,148],"steps",{},[131,132,133],"step",{},[77,134,135],{},"Install the following dependencies:",[116,137,140],{"className":138,"code":139,"language":121,"meta":122},[119],"npm install reka-ui motion-v @vueuse\u002Fcore\n",[81,141,139],{"__ignoreMap":122},[131,143,144],{},[145,146],"manual-install",{"folder":147},"show-more",[131,149,150],{},[77,151,152],{},"Update the import paths to match your project setup.",[90,154,156],{"id":155},"usage","Usage",[158,159,161],"h3",{"id":160},"basic-usage","Basic Usage",[77,163,164,165,168,169,172],{},"Wrap your content in ",[81,166,167],{},"ShowMoreContent"," and use ",[81,170,171],{},"ShowMoreButton"," to toggle the state.",[116,174,179],{"className":175,"code":177,"language":178,"meta":122},[176],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ShowMore, ShowMoreItem, ShowMoreButton, ShowMoreContent } from '@\u002Fcomponents\u002Fui\u002Fshow-more'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShowMore :threshold=\"3\">\n    \u003CShowMoreItem value=\"item-1\">\n      \u003CShowMoreContent>\n        \u003C!-- Your long content here -->\n      \u003C\u002FShowMoreContent>\n      \u003CShowMoreButton>Show More\u003C\u002FShowMoreButton>\n    \u003C\u002FShowMoreItem>\n  \u003C\u002FShowMore>\n\u003C\u002Ftemplate>\n","vue",[81,180,177],{"__ignoreMap":122},[158,182,184],{"id":183},"fade-effect","Fade Effect",[77,186,187,188,191],{},"Add the ",[81,189,190],{},"fade"," prop to the root component to apply a gradient mask to the bottom of the collapsed content.",[116,193,196],{"className":194,"code":195,"language":178,"meta":122},[176],"\u003CShowMore fade :threshold=\"3\">\n  \u003C!-- ... -->\n\u003C\u002FShowMore>\n",[81,197,195],{"__ignoreMap":122},[158,199,201],{"id":200},"custom-animation","Custom Animation",[77,203,204],{},"You can customize the expansion duration and easing function.",[116,206,209],{"className":207,"code":208,"language":178,"meta":122},[176],"\u003CShowMore \n  :animation=\"{\n    duration: 0.5,\n    ease: 'backOut'\n  }\"\n>\n  \u003C!-- ... -->\n\u003C\u002FShowMore>\n",[81,210,208],{"__ignoreMap":122},[90,212,214],{"id":213},"showmore-vs-accordion","ShowMore vs. Accordion",[77,216,217],{},"While both components handle content expansion, they serve different architectural purposes:",[219,220,221,237],"ul",{},[222,223,224,228,229,232,233,236],"li",{},[225,226,227],"strong",{},"Accordion",": A structural component where you manually define which part is the ",[225,230,231],{},"trigger"," (always visible) and which part is the ",[225,234,235],{},"content"," (collapsed). It's best for FAQ-style lists or structured menus.",[222,238,239,241,242,245,246,249,250,253],{},[225,240,83],{},": A high-level abstraction built on top of Accordion that handles ",[225,243,244],{},"automatic truncation",". You provide the full content, and the component calculates how much to reveal based on a ",[81,247,248],{},"threshold"," (lines or characters). It also supports built-in ",[225,251,252],{},"fade-out"," masks and conditional toggles.",[90,255,257],{"id":256},"api-reference","API Reference",[158,259,261],{"id":260},"showmore-root","ShowMore (Root)",[77,263,264,265,268],{},"The root component extends Reka UI's ",[81,266,267],{},"AccordionRoot"," and defines the core truncation logic.",[270,271,272,292],"table",{},[273,274,275],"thead",{},[276,277,278,283,286,289],"tr",{},[279,280,282],"th",{"align":281},"left","Prop",[279,284,285],{"align":281},"Type",[279,287,288],{"align":281},"Default",[279,290,291],{"align":281},"Description",[293,294,295,315,335,354,373,391,409,429],"tbody",{},[276,296,297,302,307,312],{},[298,299,300],"td",{"align":281},[81,301,248],{},[298,303,304],{"align":281},[81,305,306],{},"number",[298,308,309],{"align":281},[81,310,311],{},"3",[298,313,314],{"align":281},"The number of lines or characters to show before truncating.",[276,316,317,322,327,332],{},[298,318,319],{"align":281},[81,320,321],{},"truncationType",[298,323,324],{"align":281},[81,325,326],{},"'lines' | 'chars'",[298,328,329],{"align":281},[81,330,331],{},"'lines'",[298,333,334],{"align":281},"The method used to determine where to truncate.",[276,336,337,341,346,351],{},[298,338,339],{"align":281},[81,340,190],{},[298,342,343],{"align":281},[81,344,345],{},"boolean",[298,347,348],{"align":281},[81,349,350],{},"false",[298,352,353],{"align":281},"Whether to apply a fade-out effect when collapsed.",[276,355,356,361,365,370],{},[298,357,358],{"align":281},[81,359,360],{},"forceMount",[298,362,363],{"align":281},[81,364,345],{},[298,366,367],{"align":281},[81,368,369],{},"true",[298,371,372],{"align":281},"Keeps content in the DOM for precise height measurements.",[276,374,375,380,384,388],{},[298,376,377],{"align":281},[81,378,379],{},"showToggle",[298,381,382],{"align":281},[81,383,345],{},[298,385,386],{"align":281},[81,387,369],{},[298,389,390],{"align":281},"Whether to display the toggle button functionality.",[276,392,393,398,402,406],{},[298,394,395],{"align":281},[81,396,397],{},"v-model:open",[298,399,400],{"align":281},[81,401,345],{},[298,403,404],{"align":281},[81,405,350],{},[298,407,408],{"align":281},"Reactive boolean state for two-way expansion control.",[276,410,411,416,421,426],{},[298,412,413],{"align":281},[81,414,415],{},"lineHeight",[298,417,418],{"align":281},[81,419,420],{},"string",[298,422,423],{"align":281},[81,424,425],{},"'1.5rem'",[298,427,428],{"align":281},"CSS line-height used for height calculations.",[276,430,431,436,441,444],{},[298,432,433],{"align":281},[81,434,435],{},"animation",[298,437,438],{"align":281},[81,439,440],{},"ShowMoreAnimation",[298,442,443],{"align":281},"See below",[298,445,446],{"align":281},"Motion configuration for expansion.",[158,448,450],{"id":449},"showmoreitem","ShowMoreItem",[77,452,453,454,457],{},"A simple wrapper that provides context for a single content block. Extends ",[81,455,456],{},"AccordionItem",".",[270,459,460,472],{},[273,461,462],{},[276,463,464,466,468,470],{},[279,465,282],{"align":281},[279,467,285],{"align":281},[279,469,288],{"align":281},[279,471,291],{"align":281},[293,473,474],{},[276,475,476,481,485,488],{},[298,477,478],{"align":281},[81,479,480],{},"value",[298,482,483],{"align":281},[81,484,420],{},[298,486,487],{"align":281},"-",[298,489,490,493],{"align":281},[225,491,492],{},"Required",". A unique identifier for the item.",[158,495,171],{"id":496},"showmorebutton",[77,498,499,500,503,504,457],{},"The trigger component. It automatically handles the ",[81,501,502],{},"aria-expanded"," state. Extends ",[81,505,506],{},"AccordionTrigger",[158,508,167],{"id":509},"showmorecontent",[77,511,512,513,457],{},"The animated container that performs the truncation. Extends ",[81,514,515],{},"AccordionContent",[158,517,440],{"id":518},"showmoreanimation",[116,520,525],{"className":521,"code":523,"language":524,"meta":122},[522],"language-typescript","type ShowMoreAnimation = {\n  duration?: number \u002F\u002F Duration in seconds\n  ease?: Easing     \u002F\u002F Easing function (e.g., 'easeInOut', 'backOut')\n}\n","typescript",[81,526,523],{"__ignoreMap":122},{"title":122,"searchDepth":528,"depth":528,"links":529},2,[530,531,537,538],{"id":92,"depth":528,"text":17},{"id":155,"depth":528,"text":156,"children":532},[533,535,536],{"id":160,"depth":534,"text":161},3,{"id":183,"depth":534,"text":184},{"id":200,"depth":534,"text":201},{"id":213,"depth":528,"text":214},{"id":256,"depth":528,"text":257,"children":539},[540,541,542,543,544],{"id":260,"depth":534,"text":261},{"id":449,"depth":534,"text":450},{"id":496,"depth":534,"text":171},{"id":509,"depth":534,"text":167},{"id":518,"depth":534,"text":440},"A component for truncating and revealing content with smooth motion and fade effects.","md","2026-04-14T18:14:16.944Z",{"doc":549,"api":550},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Faccordion","https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Faccordion#api-reference",{},"---\ntitle: Show More\ndescription: A component for truncating and revealing content with smooth motion and fade effects.\nnew: true\ncomponent: true\nlinks:\n  doc: https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Faccordion\n  api: https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Faccordion#api-reference\n---\n\n::component-preview\n---\nname: ShowMoreDemo\ndescription: A component for truncating and revealing content.\n---\n::\n\nThe `ShowMore` component allows you to keep your interface clean by truncating long content and giving users the choice to expand it. It features height-based animations via `motion-v` and an optional fade effect for a premium feel.\n\n## Installation\n\n::code-tabs\n\n  ::doc-tabs-list\n\n    ::doc-tabs-trigger{value=\"cli\"}\n    CLI\n    ::\n\n    ::doc-tabs-trigger{value=\"manual\"}\n    Manual\n    ::\n\n  ::\n\n  ::doc-tabs-content{value=\"cli\"}\n  ```bash\n  npx sulaf@latest add show-more\n  ```\n  ::\n\n  ::doc-tabs-content{value=\"manual\"}\n\n    ::steps\n\n      ::step\n      Install the following dependencies:\n      ::\n\n      ```bash\n      npm install reka-ui motion-v @vueuse\u002Fcore\n      ```\n\n      ::step\n        ::manual-install{folder=\"show-more\"}\n        ::\n      ::\n\n      ::step\n      Update the import paths to match your project setup.\n      ::\n\n    ::\n\n  ::\n\n::\n\n## Usage\n\n### Basic Usage\n\nWrap your content in `ShowMoreContent` and use `ShowMoreButton` to toggle the state.\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShowMore, ShowMoreItem, ShowMoreButton, ShowMoreContent } from '@\u002Fcomponents\u002Fui\u002Fshow-more'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShowMore :threshold=\"3\">\n    \u003CShowMoreItem value=\"item-1\">\n      \u003CShowMoreContent>\n        \u003C!-- Your long content here -->\n      \u003C\u002FShowMoreContent>\n      \u003CShowMoreButton>Show More\u003C\u002FShowMoreButton>\n    \u003C\u002FShowMoreItem>\n  \u003C\u002FShowMore>\n\u003C\u002Ftemplate>\n```\n\n### Fade Effect\n\nAdd the `fade` prop to the root component to apply a gradient mask to the bottom of the collapsed content.\n\n```vue\n\u003CShowMore fade :threshold=\"3\">\n  \u003C!-- ... -->\n\u003C\u002FShowMore>\n```\n\n### Custom Animation\n\nYou can customize the expansion duration and easing function.\n\n```vue\n\u003CShowMore \n  :animation=\"{\n    duration: 0.5,\n    ease: 'backOut'\n  }\"\n>\n  \u003C!-- ... -->\n\u003C\u002FShowMore>\n```\n\n## ShowMore vs. Accordion\n\nWhile both components handle content expansion, they serve different architectural purposes:\n\n- **Accordion**: A structural component where you manually define which part is the **trigger** (always visible) and which part is the **content** (collapsed). It's best for FAQ-style lists or structured menus.\n- **ShowMore**: A high-level abstraction built on top of Accordion that handles **automatic truncation**. You provide the full content, and the component calculates how much to reveal based on a `threshold` (lines or characters). It also supports built-in **fade-out** masks and conditional toggles.\n\n## API Reference\n\n### ShowMore (Root)\n\nThe root component extends Reka UI's `AccordionRoot` and defines the core truncation logic.\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `threshold` | `number` | `3` | The number of lines or characters to show before truncating. |\n| `truncationType` | `'lines' \\| 'chars'` | `'lines'` | The method used to determine where to truncate. |\n| `fade` | `boolean` | `false` | Whether to apply a fade-out effect when collapsed. |\n| `forceMount` | `boolean` | `true` | Keeps content in the DOM for precise height measurements. |\n| `showToggle` | `boolean` | `true` | Whether to display the toggle button functionality. |\n| `v-model:open` | `boolean` | `false` | Reactive boolean state for two-way expansion control. |\n| `lineHeight` | `string` | `'1.5rem'` | CSS line-height used for height calculations. |\n| `animation` | `ShowMoreAnimation` | See below | Motion configuration for expansion. |\n\n### ShowMoreItem\n\nA simple wrapper that provides context for a single content block. Extends `AccordionItem`.\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `value` | `string` | - | **Required**. A unique identifier for the item. |\n\n### ShowMoreButton\n\nThe trigger component. It automatically handles the `aria-expanded` state. Extends `AccordionTrigger`.\n\n### ShowMoreContent\n\nThe animated container that performs the truncation. Extends `AccordionContent`.\n\n### ShowMoreAnimation\n\n```typescript\ntype ShowMoreAnimation = {\n  duration?: number \u002F\u002F Duration in seconds\n  ease?: Easing     \u002F\u002F Easing function (e.g., 'easeInOut', 'backOut')\n}\n```",{"title":32,"description":545},"nxKBGXumiu_s7RmO3USxIyMgtrJjAWEETEO_LmDvyqE",[556,557],{"title":26,"path":27,"stem":28,"children":-1},{"title":36,"path":37,"stem":38,"children":-1},1776190579459]