{"components":[{"title":"Accordion","subtitle":"A set of collapsible panels with headings.","href":"https://base-ui.com/react/components/accordion","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Accordion } from '@base-ui/react/accordion';\n\nexport default function ExampleAccordion() {\n  return (\n    <Accordion.Root className=\"flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white\">\n      <Accordion.Item>\n        <Accordion.Header>\n          <Accordion.Trigger className=\"group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800\">\n            What is Base UI?\n            <PlusIcon className=\"shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45\" />\n          </Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Panel className=\"h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0\">\n          <div className=\"px-3 py-2\">\n            Base UI is a library of high-quality unstyled React components for design systems and\n            web apps.\n          </div>\n        </Accordion.Panel>\n      </Accordion.Item>\n\n      <Accordion.Item className=\"border-t border-neutral-950 dark:border-white\">\n        <Accordion.Header>\n          <Accordion.Trigger className=\"group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800\">\n            How do I get started?\n            <PlusIcon className=\"shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45\" />\n          </Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Panel className=\"h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0\">\n          <div className=\"px-3 py-2\">\n            Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,\n            you’ll feel at home.\n          </div>\n        </Accordion.Panel>\n      </Accordion.Item>\n\n      <Accordion.Item className=\"border-t border-neutral-950 dark:border-white\">\n        <Accordion.Header>\n          <Accordion.Trigger className=\"group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800\">\n            Can I use it for my project?\n            <PlusIcon className=\"shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45\" />\n          </Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Panel className=\"h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0\">\n          <div className=\"px-3 py-2\">Of course! Base UI is free and open source.</div>\n        </Accordion.Panel>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n}\n\nfunction PlusIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M1.5 8h13M8 14.5v-13\" />\n    </svg>\n  );\n}","api":[]},{"title":"Alert Dialog","subtitle":"A dialog that requires a user response to proceed.","href":"https://base-ui.com/react/components/alert-dialog","example":"/* index.tsx */\nimport { AlertDialog } from '@base-ui/react/alert-dialog';\n\nconst buttonClasses =\n  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';\n\nconst dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;\n\nexport default function ExampleAlertDialog() {\n  return (\n    <AlertDialog.Root>\n      <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>\n      <AlertDialog.Portal>\n        <AlertDialog.Backdrop className=\"fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute\" />\n        <AlertDialog.Popup className=\"fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0\">\n          <div className=\"flex flex-col gap-1\">\n            <AlertDialog.Title className=\"text-base font-bold\">Discard draft?</AlertDialog.Title>\n            <AlertDialog.Description className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n              You can’t undo this action.\n            </AlertDialog.Description>\n          </div>\n          <div className=\"flex justify-end gap-3\">\n            <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>\n            <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>\n          </div>\n        </AlertDialog.Popup>\n      </AlertDialog.Portal>\n    </AlertDialog.Root>\n  );\n}","api":[]},{"title":"Autocomplete","subtitle":"An input that suggests options as you type.","href":"https://base-ui.com/react/components/autocomplete","example":"/* index.tsx */\n'use client';\nimport { Autocomplete } from '@base-ui/react/autocomplete';\n\nexport default function ExampleAutocomplete() {\n  return (\n    <Autocomplete.Root items={tags}>\n      <label className=\"flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white\">\n        Search tags\n        <Autocomplete.Input\n          placeholder=\"e.g. feature\"\n          className=\"h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white\"\n        />\n      </label>\n\n      <Autocomplete.Portal>\n        <Autocomplete.Positioner className=\"outline-hidden\" sideOffset={4}>\n          <Autocomplete.Popup className=\"w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <Autocomplete.Empty>\n              <div className=\"py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400\">\n                No tags found.\n              </div>\n            </Autocomplete.Empty>\n            <Autocomplete.List className=\"outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0\">\n              {(tag: Tag) => (\n                <Autocomplete.Item\n                  key={tag.id}\n                  className=\"flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                  value={tag}\n                >\n                  {tag.value}\n                </Autocomplete.Item>\n              )}\n            </Autocomplete.List>\n          </Autocomplete.Popup>\n        </Autocomplete.Positioner>\n      </Autocomplete.Portal>\n    </Autocomplete.Root>\n  );\n}\n\ninterface Tag {\n  id: string;\n  value: string;\n}\n\nconst tags: Tag[] = [\n  { id: 't1', value: 'feature' },\n  { id: 't2', value: 'fix' },\n  { id: 't3', value: 'bug' },\n  { id: 't4', value: 'docs' },\n  { id: 't5', value: 'internal' },\n  { id: 't6', value: 'mobile' },\n  { id: 'c-accordion', value: 'component: accordion' },\n  { id: 'c-alert-dialog', value: 'component: alert dialog' },\n  { id: 'c-autocomplete', value: 'component: autocomplete' },\n  { id: 'c-avatar', value: 'component: avatar' },\n  { id: 'c-checkbox', value: 'component: checkbox' },\n  { id: 'c-checkbox-group', value: 'component: checkbox group' },\n  { id: 'c-collapsible', value: 'component: collapsible' },\n  { id: 'c-combobox', value: 'component: combobox' },\n  { id: 'c-context-menu', value: 'component: context menu' },\n  { id: 'c-dialog', value: 'component: dialog' },\n  { id: 'c-field', value: 'component: field' },\n  { id: 'c-fieldset', value: 'component: fieldset' },\n  { id: 'c-filterable-menu', value: 'component: filterable menu' },\n  { id: 'c-form', value: 'component: form' },\n  { id: 'c-input', value: 'component: input' },\n  { id: 'c-menu', value: 'component: menu' },\n  { id: 'c-menubar', value: 'component: menubar' },\n  { id: 'c-meter', value: 'component: meter' },\n  { id: 'c-navigation-menu', value: 'component: navigation menu' },\n  { id: 'c-number-field', value: 'component: number field' },\n  { id: 'c-popover', value: 'component: popover' },\n  { id: 'c-preview-card', value: 'component: preview card' },\n  { id: 'c-progress', value: 'component: progress' },\n  { id: 'c-radio', value: 'component: radio' },\n  { id: 'c-scroll-area', value: 'component: scroll area' },\n  { id: 'c-select', value: 'component: select' },\n  { id: 'c-separator', value: 'component: separator' },\n  { id: 'c-slider', value: 'component: slider' },\n  { id: 'c-switch', value: 'component: switch' },\n  { id: 'c-tabs', value: 'component: tabs' },\n  { id: 'c-toast', value: 'component: toast' },\n  { id: 'c-toggle', value: 'component: toggle' },\n  { id: 'c-toggle-group', value: 'component: toggle group' },\n  { id: 'c-toolbar', value: 'component: toolbar' },\n  { id: 'c-tooltip', value: 'component: tooltip' },\n];","api":[]},{"title":"Avatar","subtitle":"An easily stylable avatar component.","href":"https://base-ui.com/react/components/avatar","example":"/* index.tsx */\nimport { Avatar } from '@base-ui/react/avatar';\n\nexport default function ExampleAvatar() {\n  return (\n    <div className=\"flex gap-4\">\n      <Avatar.Root className=\"inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white\">\n        <Avatar.Image\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          width=\"48\"\n          height=\"48\"\n          className=\"size-full object-cover\"\n        />\n        <Avatar.Fallback delay={600} className=\"flex size-full items-center justify-center text-sm\">\n          LT\n        </Avatar.Fallback>\n      </Avatar.Root>\n      <Avatar.Root className=\"inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white\">\n        LT\n      </Avatar.Root>\n    </div>\n  );\n}","api":[]},{"title":"Button","subtitle":"A button component that can be rendered as another tag or focusable when disabled.","href":"https://base-ui.com/react/components/button","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Button } from '@base-ui/react/button';\n\nexport default function ExampleButton() {\n  return (\n    <Button className=\"flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400\">\n      Submit\n    </Button>\n  );\n}","api":[]},{"title":"Checkbox","subtitle":"An easily stylable checkbox component.","href":"https://base-ui.com/react/components/checkbox","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Checkbox } from '@base-ui/react/checkbox';\n\nexport default function ExampleCheckbox() {\n  return (\n    <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n      <Checkbox.Root\n        defaultChecked\n        className=\"flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      >\n        <Checkbox.Indicator className=\"flex data-unchecked:hidden\">\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox.Root>\n      Enable notifications\n    </label>\n  );\n}\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m2.5 8.5 4 4 7-9\" />\n    </svg>\n  );\n}","api":[]},{"title":"Checkbox Group","subtitle":"Provides shared state to a series of checkboxes.","href":"https://base-ui.com/react/components/checkbox-group","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Checkbox } from '@base-ui/react/checkbox';\nimport { CheckboxGroup } from '@base-ui/react/checkbox-group';\n\nexport default function ExampleCheckboxGroup() {\n  const id = React.useId();\n  return (\n    <CheckboxGroup\n      aria-labelledby={id}\n      defaultValue={['fuji-apple']}\n      className=\"flex flex-col items-start gap-1 text-neutral-950 dark:text-white\"\n    >\n      <div className=\"text-sm font-bold\" id={id}>\n        Apples\n      </div>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Checkbox.Root\n          name=\"apple\"\n          value=\"fuji-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Checkbox.Indicator className=\"flex data-unchecked:hidden\">\n            <CheckIcon />\n          </Checkbox.Indicator>\n        </Checkbox.Root>\n        Fuji\n      </label>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Checkbox.Root\n          name=\"apple\"\n          value=\"gala-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Checkbox.Indicator className=\"flex data-unchecked:hidden\">\n            <CheckIcon />\n          </Checkbox.Indicator>\n        </Checkbox.Root>\n        Gala\n      </label>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Checkbox.Root\n          name=\"apple\"\n          value=\"granny-smith-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Checkbox.Indicator className=\"flex data-unchecked:hidden\">\n            <CheckIcon />\n          </Checkbox.Indicator>\n        </Checkbox.Root>\n        Granny Smith\n      </label>\n    </CheckboxGroup>\n  );\n}\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m2.5 8.5 4 4 7-9\" />\n    </svg>\n  );\n}","api":[]},{"title":"Collapsible","subtitle":"A collapsible panel controlled by a button.","href":"https://base-ui.com/react/components/collapsible","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Collapsible } from '@base-ui/react/collapsible';\n\nexport default function ExampleCollapsible() {\n  return (\n    <Collapsible.Root className=\"flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white\">\n      <Collapsible.Trigger className=\"group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400\">\n        Recovery keys\n        <CaretRightIcon className=\"transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-90\" />\n      </Collapsible.Trigger>\n      <Collapsible.Panel className=\"flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0\">\n        <div className=\"flex flex-col gap-2 px-3.5 py-2\">\n          <div>alien-bean-pasta</div>\n          <div>wild-irish-burrito</div>\n          <div>horse-battery-staple</div>\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n}\n\nexport function CaretRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M6 12V4l4.5 4z\" />\n    </svg>\n  );\n}","api":[]},{"title":"Combobox","subtitle":"An input combined with a list of predefined items to select.","href":"https://base-ui.com/react/components/combobox","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Combobox } from '@base-ui/react/combobox';\n\nexport default function ExampleCombobox() {\n  const id = React.useId();\n  return (\n    <Combobox.Root items={fruits}>\n      <div className=\"relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white\">\n        <label htmlFor={id}>Choose a fruit</label>\n        <Combobox.InputGroup className=\"relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]\">\n          <Combobox.Input\n            placeholder=\"e.g. Apple\"\n            id={id}\n            className=\"h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white\"\n          />\n          <div className=\"absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400\">\n            <Combobox.Clear\n              className=\"combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white\"\n              aria-label=\"Clear selection\"\n            >\n              <XIcon />\n            </Combobox.Clear>\n            <Combobox.Trigger\n              className=\"flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white\"\n              aria-label=\"Open popup\"\n            >\n              <CaretDownIcon />\n            </Combobox.Trigger>\n          </div>\n        </Combobox.InputGroup>\n      </div>\n\n      <Combobox.Portal>\n        <Combobox.Positioner className=\"outline-none\" sideOffset={4}>\n          <Combobox.Popup className=\"w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <Combobox.Empty>\n              <div className=\"py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400\">\n                No fruits found.\n              </div>\n            </Combobox.Empty>\n            <Combobox.List className=\"max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0\">\n              {(item: Fruit) => (\n                <Combobox.Item\n                  key={item.value}\n                  value={item}\n                  className=\"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                >\n                  <Combobox.ItemIndicator className=\"col-start-1\">\n                    <CheckIcon />\n                  </Combobox.ItemIndicator>\n                  <span className=\"col-start-2\">{item.label}</span>\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n}\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m2.5 8.5 4 4 7-9\" />\n    </svg>\n  );\n}\n\nfunction XIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m4.5 4.5 7 7m-7 0 7-7\" />\n    </svg>\n  );\n}\n\nfunction CaretDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M12 6H4l4 4.5z\" />\n    </svg>\n  );\n}\n\ninterface Fruit {\n  label: string;\n  value: string;\n}\n\nconst fruits: Fruit[] = [\n  { label: 'Apple', value: 'apple' },\n  { label: 'Banana', value: 'banana' },\n  { label: 'Orange', value: 'orange' },\n  { label: 'Pineapple', value: 'pineapple' },\n  { label: 'Grape', value: 'grape' },\n  { label: 'Mango', value: 'mango' },\n  { label: 'Strawberry', value: 'strawberry' },\n  { label: 'Blueberry', value: 'blueberry' },\n  { label: 'Raspberry', value: 'raspberry' },\n  { label: 'Blackberry', value: 'blackberry' },\n  { label: 'Cherry', value: 'cherry' },\n  { label: 'Peach', value: 'peach' },\n  { label: 'Pear', value: 'pear' },\n  { label: 'Plum', value: 'plum' },\n  { label: 'Kiwi', value: 'kiwi' },\n  { label: 'Watermelon', value: 'watermelon' },\n  { label: 'Cantaloupe', value: 'cantaloupe' },\n  { label: 'Honeydew', value: 'honeydew' },\n  { label: 'Papaya', value: 'papaya' },\n  { label: 'Guava', value: 'guava' },\n  { label: 'Lychee', value: 'lychee' },\n  { label: 'Pomegranate', value: 'pomegranate' },\n  { label: 'Apricot', value: 'apricot' },\n  { label: 'Grapefruit', value: 'grapefruit' },\n  { label: 'Passionfruit', value: 'passionfruit' },\n];","api":[]},{"title":"Context Menu","subtitle":"A menu that appears at the pointer on right click or long press.","href":"https://base-ui.com/react/components/context-menu","example":"/* index.tsx */\nimport { ContextMenu } from '@base-ui/react/context-menu';\n\nexport default function ExampleMenu() {\n  return (\n    <ContextMenu.Root>\n      <ContextMenu.Trigger className=\"flex aspect-5/3 w-full max-w-64 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none text-sm dark:border-white dark:bg-neutral-950 dark:text-white\">\n        Right click here\n      </ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Positioner className=\"outline-hidden\">\n          <ContextMenu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>\n            <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>\n            <ContextMenu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n            <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>\n            <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>\n            <ContextMenu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n            <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>\n            <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n}\n\nconst itemClass =\n  \"flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400\";","api":[]},{"title":"Dialog","subtitle":"A popup that opens on top of the entire page.","href":"https://base-ui.com/react/components/dialog","example":"/* index.tsx */\nimport { Dialog } from '@base-ui/react/dialog';\n\nexport default function ExampleDialog() {\n  return (\n    <Dialog.Root>\n      <Dialog.Trigger className=\"flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n        View notifications\n      </Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Backdrop className=\"fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute\" />\n        <Dialog.Popup className=\"fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0\">\n          <div className=\"flex flex-col gap-1\">\n            <Dialog.Title className=\"text-base font-bold\">Notifications</Dialog.Title>\n            <Dialog.Description className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n              You are all caught up. Good job!\n            </Dialog.Description>\n          </div>\n          <div className=\"flex justify-end gap-3\">\n            <Dialog.Close className=\"flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n              Close\n            </Dialog.Close>\n          </div>\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}","api":[]},{"title":"Drawer","subtitle":"A panel that slides in from the edge of the screen.","href":"https://base-ui.com/react/components/drawer","example":"/* index.tsx */\nimport { Drawer } from '@base-ui/react/drawer';\n\nexport default function ExampleDrawer() {\n  return (\n    <Drawer.Root swipeDirection=\"right\">\n      <Drawer.Trigger className=\"flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n        Open drawer\n      </Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Backdrop className=\"[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute\" />\n        <Drawer.Viewport className=\"[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)\">\n          <Drawer.Popup className=\"[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <Drawer.Content className=\"mx-auto w-full max-w-[32rem]\">\n              <Drawer.Title className=\"mb-1 text-base font-bold\">Drawer</Drawer.Title>\n              <Drawer.Description className=\"mb-6 text-sm text-neutral-600 dark:text-neutral-400\">\n                This is a drawer that slides in from the side. You can swipe to dismiss it.\n              </Drawer.Description>\n              <div className=\"flex justify-end gap-3\">\n                <Drawer.Close className=\"flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n                  Close\n                </Drawer.Close>\n              </div>\n            </Drawer.Content>\n          </Drawer.Popup>\n        </Drawer.Viewport>\n      </Drawer.Portal>\n    </Drawer.Root>\n  );\n}","api":[]},{"title":"Field","subtitle":"A component that provides labeling and validation for form controls.","href":"https://base-ui.com/react/components/field","example":"/* index.tsx */\nimport { Field } from '@base-ui/react/field';\n\nexport default function ExampleField() {\n  return (\n    <Field.Root className=\"flex w-full max-w-64 flex-col items-start gap-1\">\n      <Field.Label className=\"text-sm font-bold text-neutral-950 dark:text-white\">Name</Field.Label>\n      <Field.Control\n        required\n        placeholder=\"Required\"\n        className=\"h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400\"\n      />\n      <Field.Error className=\"text-sm text-red-700 dark:text-red-400\" match=\"valueMissing\">\n        Please enter your name\n      </Field.Error>\n\n      <Field.Description className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n        Visible on your profile\n      </Field.Description>\n    </Field.Root>\n  );\n}","api":[]},{"title":"Fieldset","subtitle":"A native fieldset element with an easily stylable legend.","href":"https://base-ui.com/react/components/fieldset","example":"/* index.tsx */\nimport { Field } from '@base-ui/react/field';\nimport { Fieldset } from '@base-ui/react/fieldset';\n\nexport default function ExampleField() {\n  return (\n    <Fieldset.Root className=\"flex w-full max-w-64 flex-col gap-4\">\n      <Fieldset.Legend className=\"border-b border-neutral-950 text-base font-bold text-neutral-950 dark:border-white dark:text-white\">\n        Billing details\n      </Fieldset.Legend>\n\n      <Field.Root className=\"flex flex-col items-start gap-1\">\n        <Field.Label className=\"text-sm font-bold text-neutral-950 dark:text-white\">\n          Company\n        </Field.Label>\n        <Field.Control\n          placeholder=\"Enter company name\"\n          className=\"h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400\"\n        />\n      </Field.Root>\n\n      <Field.Root className=\"flex flex-col items-start gap-1\">\n        <Field.Label className=\"text-sm font-bold text-neutral-950 dark:text-white\">\n          Tax ID\n        </Field.Label>\n        <Field.Control\n          placeholder=\"Enter fiscal number\"\n          className=\"h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400\"\n        />\n      </Field.Root>\n    </Fieldset.Root>\n  );\n}","api":[]},{"title":"Form","subtitle":"A native form element with consolidated error handling.","href":"https://base-ui.com/react/components/form","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport { Form } from '@base-ui/react/form';\nimport { Button } from '@base-ui/react/button';\n\nexport default function ExampleForm() {\n  const [errors, setErrors] = React.useState({});\n  const [loading, setLoading] = React.useState(false);\n\n  return (\n    <Form\n      className=\"flex w-full max-w-64 flex-col gap-4\"\n      errors={errors}\n      onSubmit={async (event) => {\n        event.preventDefault();\n        const formData = new FormData(event.currentTarget);\n        const value = formData.get('url') as string;\n\n        setLoading(true);\n        const response = await submitForm(value);\n        const serverErrors = {\n          url: response.error,\n        };\n\n        setErrors(serverErrors);\n        setLoading(false);\n      }}\n    >\n      <Field.Root name=\"url\" className=\"flex flex-col items-start gap-1\">\n        <Field.Label className=\"text-sm font-bold text-neutral-950 dark:text-white\">\n          Homepage\n        </Field.Label>\n        <Field.Control\n          type=\"url\"\n          required\n          defaultValue=\"https://example.com\"\n          placeholder=\"https://example.com\"\n          pattern=\"https?://.*\"\n          className=\"h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400\"\n        />\n        <Field.Error className=\"text-sm text-red-700 dark:text-red-400\" />\n      </Field.Root>\n      <Button\n        disabled={loading}\n        focusableWhenDisabled\n        type=\"submit\"\n        className=\"flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400\"\n      >\n        Submit\n      </Button>\n    </Form>\n  );\n}\n\nasync function submitForm(value: string) {\n  // Mimic a server response\n  await new Promise((resolve) => {\n    setTimeout(resolve, 1000);\n  });\n\n  try {\n    const url = new URL(value);\n\n    if (url.hostname.endsWith('example.com')) {\n      return { error: 'The example domain is not allowed' };\n    }\n  } catch {\n    return { error: 'This is not a valid URL' };\n  }\n\n  return { success: true };\n}","api":[]},{"title":"Input","subtitle":"A native input element that automatically works with Field.","href":"https://base-ui.com/react/components/input","example":"/* index.tsx */\nimport { Input } from '@base-ui/react/input';\n\nexport default function ExampleInput() {\n  return (\n    <label className=\"flex flex-col items-start gap-1 text-sm font-bold text-neutral-950 dark:text-white\">\n      Name\n      <Input\n        placeholder=\"e.g. Colm Tuite\"\n        className=\"h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white\"\n      />\n    </label>\n  );\n}","api":[]},{"title":"Menu","subtitle":"A list of actions in a dropdown, enhanced with keyboard navigation.","href":"https://base-ui.com/react/components/menu","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Menu } from '@base-ui/react/menu';\n\nexport default function ExampleMenu() {\n  return (\n    <Menu.Root>\n      <Menu.Trigger className=\"flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n        Song <CaretDownIcon />\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner className=\"outline-hidden\" sideOffset={8} align=\"start\">\n          <Menu.Popup className=\"relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <Menu.Item className={itemClass}>Add to Library</Menu.Item>\n            <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>\n            <Menu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n            <Menu.Item className={itemClass}>Play Next</Menu.Item>\n            <Menu.Item className={itemClass}>Play Last</Menu.Item>\n            <Menu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n            <Menu.Item className={itemClass}>Favorite</Menu.Item>\n            <Menu.Item className={itemClass}>Share</Menu.Item>\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n}\n\nconst itemClass =\n  \"flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400\";\n\nfunction CaretDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M12 6H4l4 4.5z\" />\n    </svg>\n  );\n}","api":[]},{"title":"Menubar","subtitle":"A menu bar providing commands and options for your application.","href":"https://base-ui.com/react/components/menubar","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Menubar } from '@base-ui/react/menubar';\nimport { Menu } from '@base-ui/react/menu';\n\nexport default function ExampleMenubar() {\n  return (\n    <Menubar className=\"flex items-center\">\n      <Menu.Root>\n        <Menu.Trigger className=\"h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white\">\n          File\n        </Menu.Trigger>\n        <Menu.Portal>\n          <Menu.Positioner className=\"outline-none\" sideOffset={4}>\n            <Menu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                New\n              </Menu.Item>\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Open\n              </Menu.Item>\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Save\n              </Menu.Item>\n\n              <Menu.SubmenuRoot>\n                <Menu.SubmenuTrigger className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white\">\n                  Export\n                  <CaretRightIcon />\n                </Menu.SubmenuTrigger>\n                <Menu.Portal>\n                  <Menu.Positioner className=\"outline-none\" sideOffset={-4} alignOffset={-4}>\n                    <Menu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        PDF\n                      </Menu.Item>\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        PNG\n                      </Menu.Item>\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        SVG\n                      </Menu.Item>\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.SubmenuRoot>\n\n              <Menu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Print\n              </Menu.Item>\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </Menu.Root>\n\n      <Menu.Root>\n        <Menu.Trigger className=\"h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white\">\n          Edit\n        </Menu.Trigger>\n        <Menu.Portal>\n          <Menu.Positioner className=\"outline-none\" sideOffset={4}>\n            <Menu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Cut\n              </Menu.Item>\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Copy\n              </Menu.Item>\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Paste\n              </Menu.Item>\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </Menu.Root>\n\n      <Menu.Root>\n        <Menu.Trigger className=\"h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white\">\n          View\n        </Menu.Trigger>\n        <Menu.Portal>\n          <Menu.Positioner className=\"outline-none\" sideOffset={4}>\n            <Menu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Zoom In\n              </Menu.Item>\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Zoom Out\n              </Menu.Item>\n\n              <Menu.SubmenuRoot>\n                <Menu.SubmenuTrigger className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white\">\n                  Layout\n                  <CaretRightIcon />\n                </Menu.SubmenuTrigger>\n                <Menu.Portal>\n                  <Menu.Positioner className=\"outline-none\" sideOffset={-4} alignOffset={-4}>\n                    <Menu.Popup className=\"origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        Single Page\n                      </Menu.Item>\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        Two Pages\n                      </Menu.Item>\n                      <Menu.Item\n                        onClick={handleClick}\n                        className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n                      >\n                        Continuous\n                      </Menu.Item>\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.SubmenuRoot>\n\n              <Menu.Separator className=\"mx-1 my-1 h-px bg-neutral-950 dark:bg-white\" />\n              <Menu.Item\n                onClick={handleClick}\n                className=\"flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white\"\n              >\n                Full Screen\n              </Menu.Item>\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </Menu.Root>\n\n      <Menu.Root disabled>\n        <Menu.Trigger className=\"h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white\">\n          Help\n        </Menu.Trigger>\n      </Menu.Root>\n    </Menubar>\n  );\n}\n\nfunction handleClick(event: React.MouseEvent<HTMLElement>) {\n  // eslint-disable-next-line no-console\n  console.log(`${event.currentTarget.textContent} clicked`);\n}\n\nfunction CaretRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M6 12V4l4.5 4z\" />\n    </svg>\n  );\n}","api":[]},{"title":"Meter","subtitle":"A graphical display of a numeric value within a range.","href":"https://base-ui.com/react/components/meter","example":"/* index.tsx */\nimport { Meter } from '@base-ui/react/meter';\n\nexport default function ExampleMeter() {\n  return (\n    <Meter.Root className=\"grid max-w-full w-60 grid-cols-2 gap-y-2\" value={24}>\n      <Meter.Label className=\"text-sm font-normal text-neutral-950 dark:text-white\">\n        Storage Used\n      </Meter.Label>\n      <Meter.Value className=\"text-right text-sm text-neutral-950 dark:text-white\" />\n      <Meter.Track className=\"col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800\">\n        <Meter.Indicator className=\"bg-neutral-950 transition-[width] duration-500 dark:bg-white\" />\n      </Meter.Track>\n    </Meter.Root>\n  );\n}","api":[]},{"title":"Navigation Menu","subtitle":"A collection of links and menus for website navigation.","href":"https://base-ui.com/react/components/navigation-menu","example":"/* index.tsx */\nimport * as React from 'react';\nimport { NavigationMenu } from '@base-ui/react/navigation-menu';\n\nexport default function ExampleNavigationMenu() {\n  return (\n    <NavigationMenu.Root className=\"min-w-max text-neutral-950 dark:text-white\">\n      <NavigationMenu.List className=\"relative flex gap-px\">\n        <NavigationMenu.Item>\n          <NavigationMenu.Trigger className={triggerClassName}>\n            Overview\n            <NavigationMenu.Icon className=\"transition-transform duration-200 ease-[ease] data-popup-open:rotate-180\">\n              <CaretDownIcon />\n            </NavigationMenu.Icon>\n          </NavigationMenu.Trigger>\n\n          <NavigationMenu.Content className={contentClassName}>\n            <ul className=\"m-0 grid list-none grid-cols-2 p-0 max-[500px]:grid-cols-1\">\n              {overviewLinks.map((item) => (\n                <li key={item.href}>\n                  <Link href={item.href} className={linkCardClassName}>\n                    <h3 className=\"m-0 mb-1 text-sm leading-4 font-normal\">{item.title}</h3>\n                    <p className=\"m-0 text-sm text-neutral-500 dark:text-neutral-400\">\n                      {item.description}\n                    </p>\n                  </Link>\n                </li>\n              ))}\n            </ul>\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item>\n          <NavigationMenu.Trigger className={triggerClassName}>\n            Handbook\n            <NavigationMenu.Icon className=\"transition-transform duration-200 ease-[ease] data-popup-open:rotate-180\">\n              <CaretDownIcon />\n            </NavigationMenu.Icon>\n          </NavigationMenu.Trigger>\n\n          <NavigationMenu.Content className={contentClassName}>\n            <ul className=\"m-0 flex max-w-[400px] list-none flex-col justify-center p-0\">\n              {handbookLinks.map((item) => (\n                <li key={item.href}>\n                  <Link href={item.href} className={linkCardClassName}>\n                    <h3 className=\"m-0 mb-1 text-sm leading-4 font-normal\">{item.title}</h3>\n                    <p className=\"m-0 text-sm text-neutral-500 dark:text-neutral-400\">\n                      {item.description}\n                    </p>\n                  </Link>\n                </li>\n              ))}\n            </ul>\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item>\n          <Link className={triggerClassName} href=\"https://github.com/mui/base-ui\">\n            GitHub\n          </Link>\n        </NavigationMenu.Item>\n      </NavigationMenu.List>\n\n      <NavigationMenu.Portal>\n        <NavigationMenu.Positioner\n          sideOffset={10}\n          collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}\n          collisionAvoidance={{ side: 'none' }}\n          className=\"h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5\"\n          style={{\n            ['--duration' as string]: '0.35s',\n            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',\n          }}\n        >\n          <NavigationMenu.Popup className=\"relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <NavigationMenu.Arrow className=\"relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950\" />\n            <NavigationMenu.Viewport className=\"relative h-full w-full overflow-hidden\" />\n          </NavigationMenu.Popup>\n        </NavigationMenu.Positioner>\n      </NavigationMenu.Portal>\n    </NavigationMenu.Root>\n  );\n}\n\nfunction Link(props: NavigationMenu.Link.Props) {\n  return (\n    <NavigationMenu.Link\n      render={\n        // Use the `render` prop to render your framework's Link component\n        // for client-side routing.\n        // e.g. `<NextLink href={props.href} />` instead of `<a />`.\n        <a />\n      }\n      {...props}\n    />\n  );\n}\n\nfunction CaretDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M12 6H4l4 4.5z\" />\n    </svg>\n  );\n}\n\nconst triggerClassName =\n  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-pressed:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-pressed:bg-neutral-800';\n\nconst contentClassName =\n  'h-full w-[calc(100vw-40px)] p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +\n  'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +\n  'data-starting-style:opacity-0 data-ending-style:opacity-0 ' +\n  'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] ' +\n  'data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +\n  'data-ending-style:data-[activation-direction=left]:translate-x-[50%] ' +\n  'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';\n\nconst linkCardClassName =\n  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800';\n\nconst overviewLinks = [\n  {\n    href: '/react/overview/quick-start',\n    title: 'Quick Start',\n    description: 'Install and assemble your first component.',\n  },\n  {\n    href: '/react/overview/accessibility',\n    title: 'Accessibility',\n    description: 'Learn how we build accessible components.',\n  },\n  {\n    href: '/react/overview/releases',\n    title: 'Releases',\n    description: 'See what’s new in the latest Base UI versions.',\n  },\n  {\n    href: '/react/overview/about',\n    title: 'About',\n    description: 'Learn more about Base UI and our mission.',\n  },\n] as const;\n\nconst handbookLinks = [\n  {\n    href: '/react/handbook/styling',\n    title: 'Styling',\n    description:\n      'Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',\n  },\n  {\n    href: '/react/handbook/animation',\n    title: 'Animation',\n    description:\n      'Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',\n  },\n  {\n    href: '/react/handbook/composition',\n    title: 'Composition',\n    description:\n      'Base UI components can be replaced and composed with your own existing components.',\n  },\n] as const;","api":[]},{"title":"Number Field","subtitle":"A numeric input element with increment and decrement buttons, and a scrub area.","href":"https://base-ui.com/react/components/number-field","example":"/* index.tsx */\nimport * as React from 'react';\nimport { NumberField } from '@base-ui/react/number-field';\n\nconst stepperClasses =\n  'flex h-full w-8 items-center justify-center border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none dark:border-white dark:bg-neutral-950 dark:text-white hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';\n\nexport default function ExampleNumberField() {\n  const id = React.useId();\n  return (\n    <NumberField.Root id={id} defaultValue={100} className=\"flex flex-col items-start gap-1\">\n      <NumberField.ScrubArea className=\"cursor-ew-resize font-bold select-none\">\n        <label\n          htmlFor={id}\n          className=\"cursor-ew-resize text-sm font-bold text-neutral-950 dark:text-white\"\n        >\n          Amount\n        </label>\n        <NumberField.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n          <CursorGrowIcon />\n        </NumberField.ScrubAreaCursor>\n      </NumberField.ScrubArea>\n\n      <NumberField.Group className=\"flex h-8\">\n        <NumberField.Decrement className={`${stepperClasses} border-r-0`}>\n          <MinusIcon />\n        </NumberField.Decrement>\n        <NumberField.Input className=\"h-full w-[7ch] border border-neutral-950 bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums any-pointer-coarse:text-base dark:border-white dark:bg-neutral-950 dark:text-white focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white\" />\n        <NumberField.Increment className={`${stepperClasses} border-l-0`}>\n          <PlusIcon />\n        </NumberField.Increment>\n      </NumberField.Group>\n    </NumberField.Root>\n  );\n}\n\nfunction CursorGrowIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"26\"\n      height=\"14\"\n      viewBox=\"0 0 24 14\"\n      fill=\"black\"\n      stroke=\"white\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nfunction PlusIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M1.5 8h13M8 14.5v-13\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"round\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M1.5 8h13\" />\n    </svg>\n  );\n}","api":[]},{"title":"OTP Field","subtitle":"A one-time password input composed of individual character slots.","href":"https://base-ui.com/react/components/otp-field","example":"/* index.tsx */\nimport * as React from 'react';\nimport { OTPField } from '@base-ui/react/otp-field';\n\nconst OTP_LENGTH = 6;\n\nexport default function ExampleOTPField() {\n  const id = React.useId();\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div className=\"flex w-full max-w-80 flex-col items-start gap-1\">\n      <label htmlFor={id} className=\"text-sm font-bold text-neutral-950 dark:text-white\">\n        Verification code\n      </label>\n      <OTPField.Root\n        id={id}\n        length={OTP_LENGTH}\n        aria-describedby={descriptionId}\n        className=\"flex w-full gap-2\"\n      >\n        {Array.from({ length: OTP_LENGTH }, (_, index) => (\n          <OTPField.Input\n            key={index}\n            className=\"m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white\"\n            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField.Root>\n      <p id={descriptionId} className=\"m-0 text-sm text-neutral-600 dark:text-neutral-400\">\n        Enter the 6-character code we sent to your device.\n      </p>\n    </div>\n  );\n}","api":[]},{"title":"Popover","subtitle":"An accessible popup anchored to a button.","href":"https://base-ui.com/react/components/popover","example":"/* index.tsx */\nimport { Popover } from '@base-ui/react/popover';\n\nconst triggerClassName =\n  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';\n\nexport default function ExamplePopover() {\n  return (\n    <Popover.Root>\n      <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner sideOffset={8}>\n          <Popover.Popup className=\"relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0\">\n            <Popover.Arrow className=\"relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]\" />\n            <Popover.Title className=\"text-sm font-bold\">Notifications</Popover.Title>\n            <Popover.Description className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n              You are all caught up. Good job!\n            </Popover.Description>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}","api":[]},{"title":"Preview Card","subtitle":"A link that shows a destination preview without interrupting keyboard or screen reader navigation.","href":"https://base-ui.com/react/components/preview-card","example":"/* index.tsx */\nimport { PreviewCard } from '@base-ui/react/preview-card';\n\nexport default function ExamplePreviewCard() {\n  return (\n    <PreviewCard.Root>\n      <p className=\"text-base text-neutral-950 text-balance dark:text-white\">\n        The principles of good{' '}\n        <PreviewCard.Trigger\n          className=\"text-neutral-950 underline decoration-neutral-950/60 decoration-1 underline-offset-2 outline-0 hover:decoration-neutral-950 data-popup-open:decoration-neutral-950 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:text-white dark:decoration-white/60 dark:hover:decoration-white dark:data-popup-open:decoration-white dark:focus-visible:outline-white\"\n          href=\"https://en.wikipedia.org/wiki/Typography\"\n        >\n          typography\n        </PreviewCard.Trigger>{' '}\n        remain in the digital age.\n      </p>\n\n      <PreviewCard.Portal>\n        <PreviewCard.Positioner sideOffset={8}>\n          <PreviewCard.Popup className=\"relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n            <PreviewCard.Arrow className=\"relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950\" />\n            <div className=\"flex w-min flex-col gap-2 p-2\">\n              <img\n                width=\"224\"\n                height=\"150\"\n                className=\"block max-w-none\"\n                src=\"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300\"\n                alt=\"Station Hofplein signage in Rotterdam, Netherlands\"\n              />\n              <p className=\"text-sm\">\n                <strong>Typography</strong> is the art and science of arranging type to make written\n                language clear, visually appealing, and effective in communication.\n              </p>\n            </div>\n          </PreviewCard.Popup>\n        </PreviewCard.Positioner>\n      </PreviewCard.Portal>\n    </PreviewCard.Root>\n  );\n}","api":[]},{"title":"Progress","subtitle":"Displays the status of a task that takes a long time.","href":"https://base-ui.com/react/components/progress","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Progress } from '@base-ui/react/progress';\n\nexport default function ExampleProgress() {\n  const [value, setValue] = React.useState(20);\n\n  // Simulate changes\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)));\n    }, 1000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <Progress.Root className=\"grid max-w-full w-60 grid-cols-2 gap-y-2\" value={value}>\n      <Progress.Label className=\"text-sm font-normal text-neutral-950 dark:text-white\">\n        Export data\n      </Progress.Label>\n      <Progress.Value className=\"text-right text-sm text-neutral-950 dark:text-white\" />\n      <Progress.Track className=\"col-span-2 h-1 overflow-hidden bg-neutral-200 dark:bg-neutral-800\">\n        <Progress.Indicator className=\"bg-neutral-950 transition-[width] duration-500 dark:bg-white\" />\n      </Progress.Track>\n    </Progress.Root>\n  );\n}","api":[]},{"title":"Radio Group","subtitle":"Provides shared state to a series of radio buttons.","href":"https://base-ui.com/react/components/radio-group","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Radio } from '@base-ui/react/radio';\nimport { RadioGroup } from '@base-ui/react/radio-group';\n\nexport default function ExampleRadioGroup() {\n  const id = React.useId();\n  return (\n    <RadioGroup\n      aria-labelledby={id}\n      defaultValue=\"fuji-apple\"\n      className=\"flex flex-col items-start gap-1 text-neutral-950 dark:text-white\"\n    >\n      <div className=\"text-sm font-bold\" id={id}>\n        Best apple\n      </div>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Radio.Root\n          value=\"fuji-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Radio.Indicator className=\"flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current\" />\n        </Radio.Root>\n        Fuji\n      </label>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Radio.Root\n          value=\"gala-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Radio.Indicator className=\"flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current\" />\n        </Radio.Root>\n        Gala\n      </label>\n\n      <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n        <Radio.Root\n          value=\"granny-smith-apple\"\n          className=\"flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Radio.Indicator className=\"flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current\" />\n        </Radio.Root>\n        Granny Smith\n      </label>\n    </RadioGroup>\n  );\n}","api":[]},{"title":"Scroll Area","subtitle":"A native scroll container with custom scrollbars.","href":"https://base-ui.com/react/components/scroll-area","example":"/* index.tsx */\nimport { ScrollArea } from '@base-ui/react/scroll-area';\n\nexport default function ExampleScrollArea() {\n  return (\n    <ScrollArea.Root className=\"h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950\">\n      <ScrollArea.Viewport className=\"h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n        <ScrollArea.Content className=\"flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white\">\n          <p>\n            Vernacular architecture is building done outside any academic tradition, and without\n            professional guidance. It is not a particular architectural movement or style, but\n            rather a broad category, encompassing a wide range and variety of building types, with\n            differing methods of construction, from around the world, both historical and extant and\n            classical and modern. Vernacular architecture constitutes 95% of the world's built\n            environment, as estimated in 1995 by Amos Rapoport, as measured against the small\n            percentage of new buildings every year designed by architects and built by engineers.\n          </p>\n          <p>\n            This type of architecture usually serves immediate, local needs, is constrained by the\n            materials available in its particular region and reflects local traditions and cultural\n            practices. The study of vernacular architecture does not examine formally schooled\n            architects, but instead that of the design skills and tradition of local builders, who\n            were rarely given any attribution for the work. More recently, vernacular architecture\n            has been examined by designers and the building industry in an effort to be more energy\n            conscious with contemporary design and construction—part of a broader interest in\n            sustainable design.\n          </p>\n        </ScrollArea.Content>\n      </ScrollArea.Viewport>\n      <ScrollArea.Scrollbar className=\"m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto\">\n        <ScrollArea.Thumb className=\"w-full bg-neutral-950 dark:bg-white\" />\n      </ScrollArea.Scrollbar>\n    </ScrollArea.Root>\n  );\n}","api":[]},{"title":"Select","subtitle":"A common form component for choosing a predefined value in a dropdown menu.","href":"https://base-ui.com/react/components/select","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Select } from '@base-ui/react/select';\n\nconst apples = [\n  { label: 'Gala', value: 'gala' },\n  { label: 'Fuji', value: 'fuji' },\n  { label: 'Honeycrisp', value: 'honeycrisp' },\n  { label: 'Granny Smith', value: 'granny-smith' },\n  { label: 'Pink Lady', value: 'pink-lady' },\n];\n\nexport default function ExampleSelect() {\n  return (\n    <div className=\"flex flex-col items-start gap-1\">\n      <Select.Root items={apples}>\n        <Select.Label className=\"cursor-default text-sm font-bold text-neutral-950 dark:text-white\">\n          Apple\n        </Select.Label>\n        <Select.Trigger className=\"flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n          <Select.Value\n            className=\"data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400\"\n            placeholder=\"Select apple\"\n          />\n          <Select.Icon>\n            <CaretUpDownIcon />\n          </Select.Icon>\n        </Select.Trigger>\n        <Select.Portal>\n          <Select.Positioner className=\"outline-hidden select-none z-10\" sideOffset={4}>\n            <Select.Popup className=\"group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n              <Select.ScrollUpArrow className=\"top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950\">\n                <CaretUpIcon />\n              </Select.ScrollUpArrow>\n              <Select.List className=\"relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]\">\n                {apples.map(({ label, value }) => (\n                  <Select.Item\n                    key={label}\n                    value={value}\n                    className=\"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950\"\n                  >\n                    <Select.ItemIndicator className=\"col-start-1\">\n                      <CheckIcon />\n                    </Select.ItemIndicator>\n                    <Select.ItemText className=\"col-start-2\">{label}</Select.ItemText>\n                  </Select.Item>\n                ))}\n              </Select.List>\n              <Select.ScrollDownArrow className=\"bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950\">\n                <CaretDownIcon />\n              </Select.ScrollDownArrow>\n            </Select.Popup>\n          </Select.Positioner>\n        </Select.Portal>\n      </Select.Root>\n    </div>\n  );\n}\n\nfunction CaretUpDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M11 10H5l3 3.5zm0-4H5l3-3.5z\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m2.5 8.5 4 4 7-9\" />\n    </svg>\n  );\n}\n\nfunction CaretUpIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M12 10H4l4-4.5z\" />\n    </svg>\n  );\n}\n\nfunction CaretDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M12 6H4l4 4.5z\" />\n    </svg>\n  );\n}","api":[]},{"title":"Separator","subtitle":"A separator element accessible to screen readers.","href":"https://base-ui.com/react/components/separator","example":"/* index.tsx */\nimport { Separator } from '@base-ui/react/separator';\n\nexport default function ExampleSeparator() {\n  return (\n    <div className=\"flex gap-4 text-nowrap\">\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Home\n      </a>\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Pricing\n      </a>\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Blog\n      </a>\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Support\n      </a>\n\n      <Separator orientation=\"vertical\" className=\"w-px bg-neutral-300 dark:bg-neutral-700\" />\n\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Log in\n      </a>\n      <a\n        href=\"#\"\n        className=\"text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700\"\n      >\n        Sign up\n      </a>\n    </div>\n  );\n}","api":[]},{"title":"Slider","subtitle":"An easily stylable range input.","href":"https://base-ui.com/react/components/slider","example":"/* index.tsx */\nimport { Slider } from '@base-ui/react/slider';\n\nexport default function ExampleSlider() {\n  return (\n    <Slider.Root defaultValue={25}>\n      <Slider.Control className=\"flex w-56 touch-none items-center py-3 select-none\">\n        <Slider.Track className=\"h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800\">\n          <Slider.Indicator className=\"bg-neutral-950 select-none dark:bg-white\" />\n          <Slider.Thumb\n            aria-label=\"Volume\"\n            className=\"size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950\"\n          />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n}","api":[]},{"title":"Switch","subtitle":"A control that indicates whether a setting is on or off.","href":"https://base-ui.com/react/components/switch","example":"/* index.tsx */\nimport { Switch } from '@base-ui/react/switch';\n\nexport default function ExampleSwitch() {\n  return (\n    <label className=\"flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white\">\n      <Switch.Root\n        defaultChecked\n        className=\"flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 transition-colors duration-150 ease-[ease] dark:border-white dark:bg-neutral-950 data-checked:bg-neutral-950 dark:data-checked:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      >\n        <Switch.Thumb className=\"size-3.5 bg-neutral-950 transition-[translate,background-color] duration-150 ease-[ease] data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950\" />\n      </Switch.Root>\n      Notifications\n    </label>\n  );\n}","api":[]},{"title":"Tabs","subtitle":"A component for toggling between related panels on the same page.","href":"https://base-ui.com/react/components/tabs","example":"/* index.tsx */\nimport { Tabs } from '@base-ui/react/tabs';\n\nconst tabClassName =\n  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';\n\nconst panelClassName =\n  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';\n\nexport default function ExampleTabs() {\n  return (\n    <Tabs.Root className=\"w-full max-w-xs\" defaultValue=\"overview\">\n      <Tabs.List className=\"relative z-1 -mb-px flex gap-1\">\n        <Tabs.Tab className={tabClassName} value=\"overview\">\n          Overview\n        </Tabs.Tab>\n        <Tabs.Tab className={tabClassName} value=\"projects\">\n          Projects\n        </Tabs.Tab>\n        <Tabs.Tab className={tabClassName} value=\"account\">\n          Account\n        </Tabs.Tab>\n        <Tabs.Indicator className=\"absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950\" />\n      </Tabs.List>\n      <div className=\"grid w-full min-h-32 grid-cols-1 border border-neutral-950 dark:border-white\">\n        <Tabs.Panel className={panelClassName} value=\"overview\">\n          <p>Workspace stats and activity.</p>\n        </Tabs.Panel>\n        <Tabs.Panel className={panelClassName} value=\"projects\">\n          <p>Milestones and deadlines.</p>\n        </Tabs.Panel>\n        <Tabs.Panel className={panelClassName} value=\"account\">\n          <p>Profile and preferences.</p>\n        </Tabs.Panel>\n      </div>\n    </Tabs.Root>\n  );\n}","api":[]},{"title":"Toast","subtitle":"Generates toast notifications.","href":"https://base-ui.com/react/components/toast","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Toast } from '@base-ui/react/toast';\n\nexport default function ExampleToast() {\n  return (\n    <Toast.Provider>\n      <ToastButton />\n      <Toast.Portal>\n        <Toast.Viewport className=\"fixed top-auto right-[1rem] bottom-[1rem] z-1 mx-auto w-[calc(100vw-2rem)] sm:right-[2rem] sm:bottom-[2rem] sm:w-[22.5rem]\">\n          <ToastList />\n        </Toast.Viewport>\n      </Toast.Portal>\n    </Toast.Provider>\n  );\n}\n\nfunction ToastButton() {\n  const toastManager = Toast.useToastManager();\n  const [count, setCount] = React.useState(0);\n\n  function createToast() {\n    setCount((prev) => prev + 1);\n    toastManager.add({\n      title: `Toast ${count + 1} created`,\n      description: 'This is a toast notification.',\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      onClick={createToast}\n    >\n      Create toast\n    </button>\n  );\n}\n\nfunction ToastList() {\n  const { toasts } = Toast.useToastManager();\n  return toasts.map((toast) => (\n    <Toast.Root\n      key={toast.id}\n      toast={toast}\n      className=\"[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]\"\n    >\n      <Toast.Content className=\"flex items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <Toast.Title className=\"text-sm font-bold\" />\n          <Toast.Description className=\"text-sm\" />\n        </div>\n        <Toast.Close className=\"flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\">\n          Dismiss\n        </Toast.Close>\n      </Toast.Content>\n    </Toast.Root>\n  ));\n}","api":[]},{"title":"Toggle","subtitle":"A two-state button that can be on or off.","href":"https://base-ui.com/react/components/toggle","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { Toggle } from '@base-ui/react/toggle';\n\nexport default function ExampleToggle() {\n  return (\n    <Toggle\n      aria-label=\"Favorite\"\n      className=\"flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      render={(props, state) => {\n        if (state.pressed) {\n          return (\n            <button type=\"button\" {...props}>\n              <HeartFilledIcon />\n            </button>\n          );\n        }\n\n        return (\n          <button type=\"button\" {...props}>\n            <HeartOutlineIcon />\n          </button>\n        );\n      }}\n    />\n  );\n}\n\nfunction HeartFilledIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z\" />\n    </svg>\n  );\n}\n\nfunction HeartOutlineIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377\"\n      />\n    </svg>\n  );\n}","api":[]},{"title":"Toggle Group","subtitle":"Provides a shared state to a series of toggle buttons.","href":"https://base-ui.com/react/components/toggle-group","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\n\nexport default function ExampleToggleGroup() {\n  return (\n    <ToggleGroup\n      aria-label=\"Text alignment\"\n      defaultValue={['left']}\n      className=\"flex gap-px p-px border border-neutral-950 dark:border-white\"\n    >\n      <Toggle\n        aria-label=\"Align left\"\n        value=\"left\"\n        className=\"flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      >\n        <AlignLeftIcon />\n      </Toggle>\n      <Toggle\n        aria-label=\"Align center\"\n        value=\"center\"\n        className=\"flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      >\n        <AlignCenterIcon />\n      </Toggle>\n      <Toggle\n        aria-label=\"Align right\"\n        value=\"right\"\n        className=\"flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n      >\n        <AlignRightIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n\nfunction AlignLeftIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path strokeLinecap=\"square\" strokeLinejoin=\"round\" d=\"M2.5 4.5h11m-11 7h9M2.5 8h5\" />\n    </svg>\n  );\n}\n\nfunction AlignCenterIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path strokeLinecap=\"square\" strokeLinejoin=\"round\" d=\"M2.5 4.5h11m-10 7h9M5.5 8h5\" />\n    </svg>\n  );\n}\n\nfunction AlignRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path strokeLinecap=\"square\" strokeLinejoin=\"round\" d=\"M2.5 4.5h11m-9 7h9M8.5 8h5\" />\n    </svg>\n  );\n}","api":[]},{"title":"Toolbar","subtitle":"A container for grouping a set of buttons and controls.","href":"https://base-ui.com/react/components/toolbar","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Toolbar } from '@base-ui/react/toolbar';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\nimport { Toggle } from '@base-ui/react/toggle';\nimport { Select } from '@base-ui/react/select';\n\nexport default function ExampleToolbar() {\n  return (\n    <Toolbar.Root className=\"flex w-150 items-center gap-px border border-neutral-950 bg-white p-px dark:border-white dark:bg-neutral-950\">\n      <ToggleGroup className=\"flex gap-px\" aria-label=\"Alignment\">\n        <Toolbar.Button\n          render={<Toggle />}\n          aria-label=\"Align left\"\n          value=\"align-left\"\n          className=\"flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          Align Left\n        </Toolbar.Button>\n        <Toolbar.Button\n          render={<Toggle />}\n          aria-label=\"Align right\"\n          value=\"align-right\"\n          className=\"flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          Align Right\n        </Toolbar.Button>\n      </ToggleGroup>\n      <Toolbar.Separator className=\"m-1 h-4 w-px bg-neutral-950 dark:bg-white\" />\n      <Toolbar.Group className=\"flex gap-px\" aria-label=\"Numerical format\">\n        <Toolbar.Button\n          className=\"flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n          aria-label=\"Format as currency\"\n        >\n          $\n        </Toolbar.Button>\n        <Toolbar.Button\n          className=\"flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n          aria-label=\"Format as percent\"\n        >\n          %\n        </Toolbar.Button>\n      </Toolbar.Group>\n      <Toolbar.Separator className=\"m-1 h-4 w-px bg-neutral-950 dark:bg-white\" />\n      <Select.Root defaultValue=\"Helvetica\">\n        <Toolbar.Button\n          render={<Select.Trigger />}\n          className=\"flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-100 data-pressed:text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-neutral-800 dark:data-pressed:text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        >\n          <Select.Value />\n          <Select.Icon>\n            <CaretUpDownIcon />\n          </Select.Icon>\n        </Toolbar.Button>\n        <Select.Portal>\n          <Select.Positioner className=\"z-10 outline-none select-none\" sideOffset={4}>\n            <Select.Popup className=\"group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none\">\n              <Select.Item\n                value=\"Helvetica\"\n                className=\"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950\"\n              >\n                <Select.ItemIndicator className=\"col-start-1\">\n                  <CheckIcon />\n                </Select.ItemIndicator>\n                <Select.ItemText className=\"col-start-2\">Helvetica</Select.ItemText>\n              </Select.Item>\n              <Select.Item\n                value=\"Arial\"\n                className=\"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950\"\n              >\n                <Select.ItemIndicator className=\"col-start-1\">\n                  <CheckIcon />\n                </Select.ItemIndicator>\n                <Select.ItemText className=\"col-start-2\">Arial</Select.ItemText>\n              </Select.Item>\n            </Select.Popup>\n          </Select.Positioner>\n        </Select.Portal>\n      </Select.Root>\n      <Toolbar.Separator className=\"m-1 h-4 w-px bg-neutral-950 dark:bg-white\" />\n      <Toolbar.Link\n        className=\"mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white\"\n        href=\"#\"\n      >\n        Edited 51m ago\n      </Toolbar.Link>\n    </Toolbar.Root>\n  );\n}\n\nfunction CaretUpDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M11 10H5l3 3.5zm0-4H5l3-3.5z\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"m2.5 8.5 4 4 7-9\" />\n    </svg>\n  );\n}","api":[]},{"title":"Tooltip","subtitle":"A popup that appears when an element is hovered or focused, showing a hint for sighted users.","href":"https://base-ui.com/react/components/tooltip","example":"/* index.tsx */\nimport * as React from 'react';\nimport { Tooltip } from '@base-ui/react/tooltip';\n\nexport default function ExampleTooltip() {\n  return (\n    <Tooltip.Provider>\n      <div className=\"flex border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950\">\n        <Tooltip.Root>\n          <Tooltip.Trigger className={triggerClass} aria-label=\"Bold\">\n            <BoldIcon aria-hidden=\"true\" />\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Positioner sideOffset={11}>\n              <Tooltip.Popup className={popupClass}>\n                <Tooltip.Arrow className={arrowClass} />\n                Bold\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <Tooltip.Root>\n          <Tooltip.Trigger className={triggerClass} aria-label=\"Italic\">\n            <ItalicIcon aria-hidden=\"true\" />\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Positioner sideOffset={11}>\n              <Tooltip.Popup className={popupClass}>\n                <Tooltip.Arrow className={arrowClass} />\n                Italic\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <Tooltip.Root>\n          <Tooltip.Trigger className={triggerClass} aria-label=\"Underline\">\n            <UnderlineIcon aria-hidden=\"true\" />\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Positioner sideOffset={11}>\n              <Tooltip.Popup className={popupClass}>\n                <Tooltip.Arrow className={arrowClass} />\n                Underline\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </div>\n    </Tooltip.Provider>\n  );\n}\n\nconst triggerClass =\n  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';\nconst popupClass =\n  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';\nconst arrowClass =\n  \"relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]\";\n\nfunction BoldIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z\" />\n    </svg>\n  );\n}\n\nfunction ItalicIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z\" />\n    </svg>\n  );\n}\n\nfunction UnderlineIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z\" />\n    </svg>\n  );\n}","api":[]}],"utilities":[{"title":"CSP Provider","subtitle":"Configures CSP-related behavior for inline tags rendered by Base UI components.","href":"https://base-ui.com/react/utils/csp-provider","example":"","api":[]},{"title":"Direction Provider","subtitle":"Enables RTL behavior for Base UI components.","href":"https://base-ui.com/react/utils/direction-provider","example":"/* index.tsx */\nimport { Slider } from '@base-ui/react/slider';\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\n\nexport default function ExampleDirectionProvider() {\n  return (\n    <div dir=\"rtl\">\n      <DirectionProvider direction=\"rtl\">\n        <Slider.Root defaultValue={25}>\n          <Slider.Control className=\"flex w-56 touch-none items-center py-3 select-none\">\n            <Slider.Track className=\"h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800\">\n              <Slider.Indicator className=\"bg-neutral-950 select-none dark:bg-white\" />\n              <Slider.Thumb\n                aria-label=\"Volume\"\n                className=\"size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950\"\n              />\n            </Slider.Track>\n          </Slider.Control>\n        </Slider.Root>\n      </DirectionProvider>\n    </div>\n  );\n}","api":[]},{"title":"mergeProps","subtitle":"A utility to merge multiple sets of React props.","href":"https://base-ui.com/react/utils/merge-props","example":"/* index.tsx */\n'use client';\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Toggle } from '@base-ui/react/toggle';\nimport styles from './index.module.css';\n\nexport default function ExamplePreventBaseUIHandler() {\n  const [locked, setLocked] = React.useState(true);\n  const [pressed, setPressed] = React.useState(true);\n  const getToggleProps = (props: React.ComponentProps<'button'>) =>\n    mergeProps<'button'>(props, {\n      onClick(event) {\n        if (locked) {\n          event.preventBaseUIHandler();\n        }\n      },\n    });\n\n  return (\n    <div className={styles.Container}>\n      <div className={styles.ToggleRow}>\n        <Toggle\n          aria-label=\"Favorite\"\n          pressed={pressed}\n          onPressedChange={setPressed}\n          className={styles.Toggle}\n          render={(props, state) => (\n            <button type=\"button\" {...getToggleProps(props)}>\n              {state.pressed ? <HeartFilledIcon /> : <HeartOutlineIcon />}\n            </button>\n          )}\n        />\n        <span className={styles.Label}>Favorite {locked ? '(locked)' : '(unlocked)'}</span>\n      </div>\n      <button type=\"button\" className={styles.Button} onClick={() => setLocked((l) => !l)}>\n        {locked ? 'Unlock' : 'Lock'}\n      </button>\n    </div>\n  );\n}\n\nfunction HeartFilledIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path d=\"M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z\" />\n    </svg>\n  );\n}\n\nfunction HeartOutlineIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      {...props}\n      style={{ display: 'block', ...props.style }}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377\"\n      />\n    </svg>\n  );\n}","api":[]},{"title":"useRender","subtitle":"Hook for enabling a render prop in custom components.","href":"https://base-ui.com/react/utils/use-render","example":"/* index.tsx */\n'use client';\nimport { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport styles from './index.module.css';\n\ninterface TextProps extends useRender.ComponentProps<'p'> {}\n\nfunction Text(props: TextProps) {\n  const { render, ...otherProps } = props;\n\n  const element = useRender({\n    defaultTagName: 'p',\n    render,\n    props: mergeProps<'p'>({ className: styles.Text }, otherProps),\n  });\n\n  return element;\n}\n\nexport default function ExampleText() {\n  return (\n    <div>\n      <Text>Text component rendered as a paragraph tag</Text>\n      <Text render={<strong />}>Text component rendered as a strong tag</Text>\n    </div>\n  );\n}","api":[]}],"fetchedAt":"2026-09-25T18:40:27.344Z"}