Meta tags:
description=A high-quality, unstyled React collapsible component that displays a panel controlled by a button.;
keywords=React Collapsible,Collapsible Component,Expandable Panel,Toggle Panel Button,Disclosure Widget,Show/Hide Content,Accordion Item,Accessible Disclosure,Headless React Components,Collapsible Trigger Panel,Base UI;

Headings (most frequently used words):

collapsible, root, trigger, panel, propshide, statehide, anatomy, api, reference, changeeventreasonhide, changeeventdetailshide,

Text of the page (most frequently used words):
the (68), #collapsible (62), panel (43), state (27), type (24), undefined (23), component (22), boolean (21), function (21), element (21), open (20), description (19), style (18), name (16), props (15), trigger (15), root (15), react (14), whether (13), when (13), reactelement (12), render (12), that (11), classname (11), div (11), present (10), data (10), hide (9), css (9), returns (9), false (9), default (9), cssproperties (9), string (9), event (9), prop (8), with (7), transitionstatus (6), applied (6), based (6), class (6), from (6), button (6), styles (6), disabled (5), export (5), width (5), height (5), closed (5), allows (5), base (5), import (5), should (4), ignore (4), user (4), interaction (4), currently (4), animating (4), attribute (4), and (4), renders (4), htmlprops (3), accepts (3), you (3), replace (3), html (3), different (3), tag (3), compose (3), another (3), hiddenuntilfound (3), keepmounted (3), object (3), contents (3), table (3), void (3), defaultopen (3), anatomy (3), svg (3), index (3), field (3), menu (3), variable (2), out (2), ending (2), starting (2), dom (2), hidden (2), search (2), true (2), nativebutton (2), indicates (2), propagate (2), reason (2), press (2), none (2), changeeventdetails (2), onopenchange (2), use (2), instead (2), controlled (2), parts (2), api (2), reference (2), recovery (2), keys (2), caretrighticon (2), return (2), module (2), stackblitz (2), modules (2), view (2), provider (2), toggle (2), group (2), navigation (2), dialog (2), checkbox (2), transition, status, collapsiblepanelstate, collapsiblepanelprops, keep, while, this, ignored, used, overrides, uses, without, removing, until, found, browser, built, page, find, expand, collapsibletriggerstate, collapsibletriggerprops, native, replacing, via, set, rendered, not, for, example, opens, closes, triggered, applicable, ispropagationallowed, allowed, iscanceled, has, been, canceled, allowpropagation, cases, where, will, stop, propagation, cancel, cancels, handling, mouseevent, pointerevent, touchevent, keyboardevent, collapsiblerootchangeeventdetails, collapsiblerootchangeeventreason, changeeventreason, collapsiblerootstate, collapsiblerootprops, eventdetails, handler, called, opened, uncontrolled, initially, groups, all, assemble, its, show, code, icon, content, alien, bean, pasta, wild, irish, burrito, horse, battery, staple, componentprops, viewbox, fill, currentcolor, display, block, path, 12v4l4, examplecollapsible, tsx, source, markdown, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, input, form, fieldset, drawer, context, combobox, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, skip,

Text of the page (random words):
collapsible base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 collapsible top anatomy api reference root trigger panel collapsible a collapsible panel controlled by a button view as markdown view source recovery keys index tsx index module css css modules stackblitz css modules stackblitz import as react from react import collapsible from base ui react collapsible import styles from index module css export default function examplecollapsible return collapsible root classname styles collapsible collapsible trigger classname styles trigger recovery keys caretrighticon classname styles icon collapsible trigger collapsible panel classname styles panel div classname styles content div alien bean pasta div div wild irish burrito div div horse battery staple div div collapsible panel collapsible root export function caretrighticon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m6 12v4l4 5 4z svg show code anatomy import the component and assemble its parts anatomy import collapsible from base ui react collapsible collapsible root collapsible trigger collapsible panel collapsible root api reference root groups all parts of the collapsible renders a div element component props table prop type default defaultopen boolean false name defaultopen description whether the collapsible panel is initially open to render a controlled collapsible use the open prop instead type boolean undefined default false open boolean name open description whether the collapsible panel is currently open to render an uncontrolled collapsible use the defaultopen prop instead type boolean undefined onopenchange function name onopenchange description event handler called when the panel is opened or closed type open boolean eventdetails collapsible root changeeventdetails void undefined disabled boolean false name disabled description whether the component should ignore user interaction type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state collapsible root state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state collapsible root state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state collapsible root state reactelement undefined collapsible root props hide re export of root props as collapsiblerootprops collapsible root state hide type collapsiblerootstate whether the collapsible panel is currently open open boolean whether the component should ignore user interaction disabled boolean transitionstatus transitionstatus collapsible root changeeventreason hide type collapsiblerootchangeeventreason trigger press none collapsible root changeeventdetails hide type collapsiblerootchangeeventdetails reason trigger press event mouseevent pointerevent touchevent keyboardevent reason none event event cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined trigger a button that opens and closes the collapsible panel renders a button element component props table prop type default nativebutton boolean true name nativebutton description whether the component renders a native button element when replacing it via the render prop set to false if the rendered element is not a button for example div type boolean undefined default true classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state collapsible trigger state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state collapsible trigger state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state collapsible trigger state reactelement undefined attribute data panel open present when the collapsible panel is open attribute description data panel open present when the collapsible panel is open collapsible trigger props hide re export of trigger props as collapsibletriggerprops collapsible trigger state hide type collapsibletriggerstate whether the collapsible panel is currently open open boolean whether the component should ignore user interaction disabled boolean transitionstatus transitionstatus panel a panel with the collapsible contents renders a div element component props table prop type default hiddenuntilfound boolean false name hiddenuntilfound description allows the browser s built in page search to find and expand the panel contents overrides the keepmounted prop and uses hidden until found to hide the element without removing it from the dom type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state collapsible panel state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state collapsible panel state react cssproperties undefined undefined keepmounted boolean false name keepmounted description whether to keep the element in the dom while the panel is hidden this prop is ignored when hiddenuntilfound is used type boolean undefined default false render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state collapsible panel state reactelement undefined attribute data open present when the collapsible panel is open data closed present when the collapsible panel is closed data starting style present when the panel is animating in data ending style present when the panel is animating out attribute description data open present when the collapsible panel is open data closed present when the collapsible panel is closed data starting style present when the panel is animating in data ending style present when the panel is animating out css variable collapsible panel height the collapsible panel s height collapsible panel width the collapsible panel s width css variable description collapsible panel height the collapsible panel s height collapsible panel width the collapsible panel s width collapsible panel props hide re export of panel props as collapsiblepanelprops collapsible panel state hide type collapsiblepanelstate the transition status of the component transitionstatus transitionstatus whether the collapsible panel is currently open open boolean whether the component should ignore user interaction disabled boolean