Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur dolore doloremque eaque esse, eveniet facere iusto magni maiores mollitia, quae quas reiciendis sit tempora tempore tenetur velit! Doloribus, excepturi. {" "}Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur dolore doloremque eaque esse, eveniet facere. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur, eaque et officiis quae quos vel. Aliquam consectetur consequuntur corporis hic odio odit officiis possimus provident veniam voluptatum! Accusamus, ex.

) } `,__src__:"src/demo/collapsible-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Button } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/button"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Collapsible, CollapsibleContent, CollapsibleTrigger } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/collapsible"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"CollapsibleDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Collapsible"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"CollapsibleTrigger"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"data-[state=open]:bg-[--green] mb-2"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Click here"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur dolore doloremque eaque esse, eveniet facere iusto"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" magni maiores mollitia, quae quas reiciendis sit tempora tempore tenetur velit! Doloribus, excepturi."})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"CollapsibleContent"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"inline font-semibold"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'" "'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequatur dolore doloremque eaque esse, eveniet facere."})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur, eaque et officiis quae quos vel. Aliquam"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" consectetur consequuntur corporis hic odio odit officiis possimus provident veniam voluptatum! Accusamus, ex."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @rahimstack@latest add collapsible `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"npx "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"@rahimstack@latest"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"add"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"collapsible"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"api-reference",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,l.jsxs)(o,{name:"collapsible",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/collapsible/collapsible.tsx",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`type CollapsibleTriggerProps = React.ComponentPropsWithoutRef type CollapsibleContentProps = React.ComponentPropsWithoutRef`,__src__:"src/workshop/collapsible/collapsible.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"CollapsibleTriggerProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"CollapsibleContentProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:""})]})]})})})]})]})}function N(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(p,n)})):p(n)}var _=N;function d(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(B);})(); ;return Component;

Collapsible

Installation

API Reference

Types

Anatomy