Meta tags:
description=A guide to composing Base UI components with your own React components.;
keywords=Base UI Composition,React Render Prop,Compose Headless Components,Custom Trigger Render,Nested Render Props,Composition Handbook,Component Composition,Render Props Pattern,Compound Components,Polymorphic Components,As Prop,Custom Elements,Wrapper Components;

Headings (most frequently used words):

composing, components, composition, custom, react, multiple, changing, the, default, rendered, element, render, function,

Text of the page (most frequently used words):
menu (24), render (15), the (14), components (10), trigger (8), react (7), #element (7), base (7), dialog (7), tooltip (7), you (6), default (6), root (6), portal (6), props (5), custom (5), composing (5), function (4), component (4), tsx (4), with (4), composition (4), and (3), state (3), switch (3), prop (3), most (3), item (3), index (3), example (3), use (3), rendered (3), multiple (3), button (3), field (3), also (2), different (2), span (2), working (2), instead (2), renders (2), case (2), positioner (2), popup (2), for (2), code (2), snippet (2), below (2), shows (2), how (2), can (2), changing (2), open (2), size (2), mybutton (2), compose (2), your (2), own (2), provider (2), toggle (2), group (2), navigation (2), checkbox (2), using, gives, complete, control, over, spreading, allows, content, based, thumb, checked, checkedicon, uncheckedicon, are, extremely, performance, sensitive, application, might, want, pass, each, appropriate, cases, rendering, recommended, only, basis, import, from, export, song, href, com, add, library, that, works, like, link, div, override, situations, where, need, nested, deeply, necessary, common, must, forward, spread, all, received, its, underlying, dom, node, ref, triggers, part, view, markdown, guide, top, npm, github, userender, mergeprops, direction, csp, utils, toolbar, toast, tabs, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, llms, txt, typescript, forms, customization, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
composition 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 composition top composing custom react components composing multiple components changing the default rendered element render function composition a guide to composing base ui components with your own react components view as markdown composing custom react components use the render prop to compose a base ui part with your own react components for example most triggers render a button by default the code snippet below shows how to use a custom button instead index tsx menu trigger render mybutton size md open menu menu trigger the custom component must forward the ref and spread all the received props on its underlying dom node composing multiple components in situations where you need to compose multiple base ui components with custom react components render props can be nested as deeply as necessary working with tooltip is a common example index tsx dialog root tooltip root tooltip trigger render dialog trigger render menu trigger render mybutton size md open menu menu trigger tooltip portal tooltip portal tooltip root dialog portal dialog portal dialog root changing the default rendered element you can also use the render prop to override the rendered element of the component for example menu item renders a div by default the code snippet below shows how to render it as an a element so that it works like a link index tsx import menu from base ui react menu export default menu root menu trigger song menu trigger menu portal menu positioner menu popup menu item render a href base ui com add to library menu item menu popup menu positioner menu portal menu root each base ui component renders the most appropriate element by default and in most cases rendering a different element is recommended only on a case by case basis render function if you are working in an extremely performance sensitive application you might want to pass a function to the render prop instead of a react element switch tsx switch thumb render props state span props state checked checkedicon uncheckedicon span using a function gives you complete control over spreading props and also allows you to render different content based on the component s state