@databricks/appkit 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/CLAUDE.md +121 -1228
  2. package/NOTICE.md +1 -1
  3. package/bin/appkit.js +3 -0
  4. package/dist/analytics/analytics.d.ts.map +1 -1
  5. package/dist/analytics/analytics.js +17 -30
  6. package/dist/analytics/analytics.js.map +1 -1
  7. package/dist/app/index.d.ts +5 -1
  8. package/dist/app/index.d.ts.map +1 -1
  9. package/dist/app/index.js +38 -9
  10. package/dist/app/index.js.map +1 -1
  11. package/dist/appkit/package.js +1 -1
  12. package/dist/cache/index.js +3 -3
  13. package/dist/cache/index.js.map +1 -1
  14. package/dist/cli/commands/docs.js +47 -0
  15. package/dist/cli/commands/docs.js.map +1 -0
  16. package/dist/cli/commands/generate-types.js +38 -0
  17. package/dist/cli/commands/generate-types.js.map +1 -0
  18. package/dist/cli/commands/lint.js +104 -0
  19. package/dist/cli/commands/lint.js.map +1 -0
  20. package/dist/cli/commands/setup.js +121 -0
  21. package/dist/cli/commands/setup.js.map +1 -0
  22. package/dist/cli/index.d.ts +1 -0
  23. package/dist/cli/index.js +24 -0
  24. package/dist/cli/index.js.map +1 -0
  25. package/dist/index.js.map +1 -1
  26. package/dist/plugin/plugin.d.ts +1 -0
  27. package/dist/plugin/plugin.d.ts.map +1 -1
  28. package/dist/plugin/plugin.js +1 -0
  29. package/dist/plugin/plugin.js.map +1 -1
  30. package/dist/server/remote-tunnel/remote-tunnel-manager.js +9 -9
  31. package/dist/server/remote-tunnel/remote-tunnel-manager.js.map +1 -1
  32. package/dist/server/utils.js +6 -6
  33. package/dist/server/utils.js.map +1 -1
  34. package/dist/shared/src/execute.d.ts +1 -0
  35. package/dist/shared/src/execute.d.ts.map +1 -1
  36. package/dist/shared/src/plugin.d.ts +3 -0
  37. package/dist/shared/src/plugin.d.ts.map +1 -1
  38. package/dist/telemetry/types.d.ts +1 -0
  39. package/dist/telemetry/types.d.ts.map +1 -1
  40. package/dist/type-generator/index.js +1 -1
  41. package/dist/type-generator/index.js.map +1 -1
  42. package/dist/type-generator/query-registry.js +9 -1
  43. package/dist/type-generator/query-registry.js.map +1 -1
  44. package/docs/docs/api/appkit/Class.AppKitError/index.html +77 -0
  45. package/docs/docs/api/appkit/Class.AppKitError.md +154 -0
  46. package/docs/docs/api/appkit/Class.AuthenticationError/index.html +110 -0
  47. package/docs/docs/api/appkit/Class.AuthenticationError.md +236 -0
  48. package/docs/docs/api/appkit/Class.ConfigurationError/index.html +112 -0
  49. package/docs/docs/api/appkit/Class.ConfigurationError.md +243 -0
  50. package/docs/docs/api/appkit/Class.ConnectionError/index.html +120 -0
  51. package/docs/docs/api/appkit/Class.ConnectionError.md +265 -0
  52. package/docs/docs/api/appkit/Class.ExecutionError/index.html +116 -0
  53. package/docs/docs/api/appkit/Class.ExecutionError.md +250 -0
  54. package/docs/docs/api/appkit/Class.InitializationError/index.html +104 -0
  55. package/docs/docs/api/appkit/Class.InitializationError.md +222 -0
  56. package/docs/docs/api/appkit/Class.Plugin/index.html +149 -0
  57. package/docs/docs/api/appkit/Class.Plugin.md +392 -0
  58. package/docs/docs/api/appkit/Class.ServerError/index.html +108 -0
  59. package/docs/docs/api/appkit/Class.ServerError.md +229 -0
  60. package/docs/docs/api/appkit/Class.TunnelError/index.html +108 -0
  61. package/docs/docs/api/appkit/Class.TunnelError.md +231 -0
  62. package/docs/docs/api/appkit/Class.ValidationError/index.html +106 -0
  63. package/docs/docs/api/appkit/Class.ValidationError.md +225 -0
  64. package/docs/docs/api/appkit/Function.appKitTypesPlugin/index.html +24 -0
  65. package/docs/docs/api/appkit/Function.appKitTypesPlugin.md +20 -0
  66. package/docs/docs/api/appkit/Function.createApp/index.html +24 -0
  67. package/docs/docs/api/appkit/Function.createApp.md +31 -0
  68. package/docs/docs/api/appkit/Function.isSQLTypeMarker/index.html +25 -0
  69. package/docs/docs/api/appkit/Function.isSQLTypeMarker.md +32 -0
  70. package/docs/docs/api/appkit/Interface.BasePluginConfig/index.html +28 -0
  71. package/docs/docs/api/appkit/Interface.BasePluginConfig.md +37 -0
  72. package/docs/docs/api/appkit/Interface.CacheConfig/index.html +63 -0
  73. package/docs/docs/api/appkit/Interface.CacheConfig.md +131 -0
  74. package/docs/docs/api/appkit/Interface.ITelemetry/index.html +73 -0
  75. package/docs/docs/api/appkit/Interface.ITelemetry.md +144 -0
  76. package/docs/docs/api/appkit/Interface.StreamExecutionSettings/index.html +26 -0
  77. package/docs/docs/api/appkit/Interface.StreamExecutionSettings.md +30 -0
  78. package/docs/docs/api/appkit/Interface.TelemetryConfig/index.html +32 -0
  79. package/docs/docs/api/appkit/Interface.TelemetryConfig.md +48 -0
  80. package/docs/docs/api/appkit/TypeAlias.IAppRouter/index.html +18 -0
  81. package/docs/docs/api/appkit/TypeAlias.IAppRouter.md +8 -0
  82. package/docs/docs/api/appkit/Variable.sql/index.html +98 -0
  83. package/docs/docs/api/appkit/Variable.sql.md +260 -0
  84. package/docs/docs/api/appkit/index.html +28 -0
  85. package/docs/docs/api/appkit-ui/data/AreaChart/index.html +29 -0
  86. package/docs/docs/api/appkit-ui/data/AreaChart.md +79 -0
  87. package/docs/docs/api/appkit-ui/data/BarChart/index.html +29 -0
  88. package/docs/docs/api/appkit-ui/data/BarChart.md +74 -0
  89. package/docs/docs/api/appkit-ui/data/DataTable/index.html +36 -0
  90. package/docs/docs/api/appkit-ui/data/DataTable.md +69 -0
  91. package/docs/docs/api/appkit-ui/data/DonutChart/index.html +29 -0
  92. package/docs/docs/api/appkit-ui/data/DonutChart.md +72 -0
  93. package/docs/docs/api/appkit-ui/data/HeatmapChart/index.html +35 -0
  94. package/docs/docs/api/appkit-ui/data/HeatmapChart.md +91 -0
  95. package/docs/docs/api/appkit-ui/data/LineChart/index.html +29 -0
  96. package/docs/docs/api/appkit-ui/data/LineChart.md +77 -0
  97. package/docs/docs/api/appkit-ui/data/PieChart/index.html +29 -0
  98. package/docs/docs/api/appkit-ui/data/PieChart.md +72 -0
  99. package/docs/docs/api/appkit-ui/data/RadarChart/index.html +29 -0
  100. package/docs/docs/api/appkit-ui/data/RadarChart.md +74 -0
  101. package/docs/docs/api/appkit-ui/data/ScatterChart/index.html +29 -0
  102. package/docs/docs/api/appkit-ui/data/ScatterChart.md +76 -0
  103. package/docs/docs/api/appkit-ui/index.html +23 -0
  104. package/docs/docs/api/appkit-ui/styling/index.html +74 -0
  105. package/docs/docs/api/appkit-ui/styling.md +81 -0
  106. package/docs/docs/api/appkit-ui/ui/Accordion/index.html +48 -0
  107. package/docs/docs/api/appkit-ui/ui/Accordion.md +139 -0
  108. package/docs/docs/api/appkit-ui/ui/Alert/index.html +41 -0
  109. package/docs/docs/api/appkit-ui/ui/Alert.md +89 -0
  110. package/docs/docs/api/appkit-ui/ui/AlertDialog/index.html +97 -0
  111. package/docs/docs/api/appkit-ui/ui/AlertDialog.md +282 -0
  112. package/docs/docs/api/appkit-ui/ui/AspectRatio/index.html +27 -0
  113. package/docs/docs/api/appkit-ui/ui/AspectRatio.md +46 -0
  114. package/docs/docs/api/appkit-ui/ui/Avatar/index.html +41 -0
  115. package/docs/docs/api/appkit-ui/ui/Avatar.md +90 -0
  116. package/docs/docs/api/appkit-ui/ui/Badge/index.html +27 -0
  117. package/docs/docs/api/appkit-ui/ui/Badge.md +38 -0
  118. package/docs/docs/api/appkit-ui/ui/Breadcrumb/index.html +69 -0
  119. package/docs/docs/api/appkit-ui/ui/Breadcrumb.md +193 -0
  120. package/docs/docs/api/appkit-ui/ui/Button/index.html +27 -0
  121. package/docs/docs/api/appkit-ui/ui/Button.md +39 -0
  122. package/docs/docs/api/appkit-ui/ui/ButtonGroup/index.html +38 -0
  123. package/docs/docs/api/appkit-ui/ui/ButtonGroup.md +68 -0
  124. package/docs/docs/api/appkit-ui/ui/Calendar/index.html +34 -0
  125. package/docs/docs/api/appkit-ui/ui/Calendar.md +154 -0
  126. package/docs/docs/api/appkit-ui/ui/Card/index.html +69 -0
  127. package/docs/docs/api/appkit-ui/ui/Card.md +222 -0
  128. package/docs/docs/api/appkit-ui/ui/Carousel/index.html +55 -0
  129. package/docs/docs/api/appkit-ui/ui/Carousel.md +152 -0
  130. package/docs/docs/api/appkit-ui/ui/ChartContainer/index.html +58 -0
  131. package/docs/docs/api/appkit-ui/ui/ChartContainer.md +343 -0
  132. package/docs/docs/api/appkit-ui/ui/Checkbox/index.html +27 -0
  133. package/docs/docs/api/appkit-ui/ui/Checkbox.md +53 -0
  134. package/docs/docs/api/appkit-ui/ui/Collapsible/index.html +41 -0
  135. package/docs/docs/api/appkit-ui/ui/Collapsible.md +125 -0
  136. package/docs/docs/api/appkit-ui/ui/Command/index.html +83 -0
  137. package/docs/docs/api/appkit-ui/ui/Command.md +287 -0
  138. package/docs/docs/api/appkit-ui/ui/ContextMenu/index.html +111 -0
  139. package/docs/docs/api/appkit-ui/ui/ContextMenu.md +419 -0
  140. package/docs/docs/api/appkit-ui/ui/Dialog/index.html +90 -0
  141. package/docs/docs/api/appkit-ui/ui/Dialog.md +285 -0
  142. package/docs/docs/api/appkit-ui/ui/Drawer/index.html +90 -0
  143. package/docs/docs/api/appkit-ui/ui/Drawer.md +387 -0
  144. package/docs/docs/api/appkit-ui/ui/DropdownMenu/index.html +111 -0
  145. package/docs/docs/api/appkit-ui/ui/DropdownMenu.md +478 -0
  146. package/docs/docs/api/appkit-ui/ui/Empty/index.html +54 -0
  147. package/docs/docs/api/appkit-ui/ui/Empty.md +109 -0
  148. package/docs/docs/api/appkit-ui/ui/Field/index.html +87 -0
  149. package/docs/docs/api/appkit-ui/ui/Field.md +201 -0
  150. package/docs/docs/api/appkit-ui/ui/FormControl/index.html +59 -0
  151. package/docs/docs/api/appkit-ui/ui/FormControl.md +128 -0
  152. package/docs/docs/api/appkit-ui/ui/HoverCard/index.html +39 -0
  153. package/docs/docs/api/appkit-ui/ui/HoverCard.md +131 -0
  154. package/docs/docs/api/appkit-ui/ui/Input/index.html +27 -0
  155. package/docs/docs/api/appkit-ui/ui/Input.md +35 -0
  156. package/docs/docs/api/appkit-ui/ui/InputGroup/index.html +59 -0
  157. package/docs/docs/api/appkit-ui/ui/InputGroup.md +123 -0
  158. package/docs/docs/api/appkit-ui/ui/InputOTP/index.html +48 -0
  159. package/docs/docs/api/appkit-ui/ui/InputOTP.md +124 -0
  160. package/docs/docs/api/appkit-ui/ui/Item/index.html +78 -0
  161. package/docs/docs/api/appkit-ui/ui/Item.md +185 -0
  162. package/docs/docs/api/appkit-ui/ui/Kbd/index.html +30 -0
  163. package/docs/docs/api/appkit-ui/ui/Kbd.md +39 -0
  164. package/docs/docs/api/appkit-ui/ui/Label/index.html +27 -0
  165. package/docs/docs/api/appkit-ui/ui/Label.md +44 -0
  166. package/docs/docs/api/appkit-ui/ui/Menubar/index.html +117 -0
  167. package/docs/docs/api/appkit-ui/ui/Menubar.md +484 -0
  168. package/docs/docs/api/appkit-ui/ui/NavigationMenu/index.html +76 -0
  169. package/docs/docs/api/appkit-ui/ui/NavigationMenu.md +338 -0
  170. package/docs/docs/api/appkit-ui/ui/Pagination/index.html +69 -0
  171. package/docs/docs/api/appkit-ui/ui/Pagination.md +191 -0
  172. package/docs/docs/api/appkit-ui/ui/Popover/index.html +45 -0
  173. package/docs/docs/api/appkit-ui/ui/Popover.md +173 -0
  174. package/docs/docs/api/appkit-ui/ui/Progress/index.html +27 -0
  175. package/docs/docs/api/appkit-ui/ui/Progress.md +51 -0
  176. package/docs/docs/api/appkit-ui/ui/RadioGroup/index.html +33 -0
  177. package/docs/docs/api/appkit-ui/ui/RadioGroup.md +83 -0
  178. package/docs/docs/api/appkit-ui/ui/ResizableHandle/index.html +41 -0
  179. package/docs/docs/api/appkit-ui/ui/ResizableHandle.md +136 -0
  180. package/docs/docs/api/appkit-ui/ui/ScrollArea/index.html +34 -0
  181. package/docs/docs/api/appkit-ui/ui/ScrollArea.md +83 -0
  182. package/docs/docs/api/appkit-ui/ui/Select/index.html +82 -0
  183. package/docs/docs/api/appkit-ui/ui/Select.md +267 -0
  184. package/docs/docs/api/appkit-ui/ui/Separator/index.html +27 -0
  185. package/docs/docs/api/appkit-ui/ui/Separator.md +56 -0
  186. package/docs/docs/api/appkit-ui/ui/Sheet/index.html +76 -0
  187. package/docs/docs/api/appkit-ui/ui/Sheet.md +236 -0
  188. package/docs/docs/api/appkit-ui/ui/Sidebar/index.html +183 -0
  189. package/docs/docs/api/appkit-ui/ui/Sidebar.md +490 -0
  190. package/docs/docs/api/appkit-ui/ui/Skeleton/index.html +27 -0
  191. package/docs/docs/api/appkit-ui/ui/Skeleton.md +43 -0
  192. package/docs/docs/api/appkit-ui/ui/Slider/index.html +27 -0
  193. package/docs/docs/api/appkit-ui/ui/Slider.md +61 -0
  194. package/docs/docs/api/appkit-ui/ui/Spinner/index.html +24 -0
  195. package/docs/docs/api/appkit-ui/ui/Spinner.md +22 -0
  196. package/docs/docs/api/appkit-ui/ui/Switch/index.html +27 -0
  197. package/docs/docs/api/appkit-ui/ui/Switch.md +46 -0
  198. package/docs/docs/api/appkit-ui/ui/Table/index.html +69 -0
  199. package/docs/docs/api/appkit-ui/ui/Table.md +236 -0
  200. package/docs/docs/api/appkit-ui/ui/Tabs/index.html +48 -0
  201. package/docs/docs/api/appkit-ui/ui/Tabs.md +177 -0
  202. package/docs/docs/api/appkit-ui/ui/Textarea/index.html +27 -0
  203. package/docs/docs/api/appkit-ui/ui/Textarea.md +35 -0
  204. package/docs/docs/api/appkit-ui/ui/Toaster/index.html +27 -0
  205. package/docs/docs/api/appkit-ui/ui/Toaster.md +75 -0
  206. package/docs/docs/api/appkit-ui/ui/Toggle/index.html +27 -0
  207. package/docs/docs/api/appkit-ui/ui/Toggle.md +48 -0
  208. package/docs/docs/api/appkit-ui/ui/ToggleGroup/index.html +33 -0
  209. package/docs/docs/api/appkit-ui/ui/ToggleGroup.md +88 -0
  210. package/docs/docs/api/appkit-ui/ui/Tooltip/index.html +46 -0
  211. package/docs/docs/api/appkit-ui/ui/Tooltip.md +134 -0
  212. package/docs/docs/api/appkit-ui.md +15 -0
  213. package/docs/docs/api/appkit.md +48 -0
  214. package/docs/docs/api/index.html +28 -0
  215. package/docs/docs/api.md +24 -0
  216. package/docs/docs/app-management/index.html +106 -0
  217. package/docs/docs/app-management.md +171 -0
  218. package/docs/docs/architecture/index.html +71 -0
  219. package/docs/docs/architecture.md +69 -0
  220. package/docs/docs/category/development/index.html +16 -0
  221. package/docs/docs/category/development.md +3 -0
  222. package/docs/docs/configuration/index.html +66 -0
  223. package/docs/docs/configuration.md +150 -0
  224. package/docs/docs/core-principles/index.html +38 -0
  225. package/docs/docs/core-principles.md +31 -0
  226. package/docs/docs/development/index.html +34 -0
  227. package/docs/docs/development/llm-guide/index.html +74 -0
  228. package/docs/docs/development/llm-guide.md +74 -0
  229. package/docs/docs/development/local-development/index.html +27 -0
  230. package/docs/docs/development/local-development.md +20 -0
  231. package/docs/docs/development/project-setup/index.html +69 -0
  232. package/docs/docs/development/project-setup.md +246 -0
  233. package/docs/docs/development/remote-bridge/index.html +76 -0
  234. package/docs/docs/development/remote-bridge.md +80 -0
  235. package/docs/docs/development/type-generation/index.html +65 -0
  236. package/docs/docs/development/type-generation.md +110 -0
  237. package/docs/docs/development.md +21 -0
  238. package/docs/docs/index.html +58 -0
  239. package/docs/docs/plugins/index.html +151 -0
  240. package/docs/docs/plugins.md +313 -0
  241. package/docs/docs.md +64 -0
  242. package/llms.txt +121 -1228
  243. package/package.json +11 -11
  244. package/scripts/postinstall.js +1 -1
  245. package/AGENTS.md +0 -1231
  246. package/bin/appkit-lint.js +0 -129
  247. package/bin/generate-types.js +0 -27
  248. package/bin/setup-claude.js +0 -190
package/docs/docs/api/appkit-ui/ui/Drawer/index.html ADDED
@@ -0,0 +1,90 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/appkit-ui/ui/Drawer" data-has-hydrated="false">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="generator" content="Docusaurus v3.9.2">
6
+ <title data-rh="true">Drawer | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Drawer"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Drawer | AppKit"><meta data-rh="true" name="description" content="Draggable panel that slides in from screen edges"><meta data-rh="true" property="og:description" content="Draggable panel that slides in from screen edges"><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Drawer"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Drawer" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Drawer" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API reference","item":"https://databricks.github.io/appkit/docs/api/"},{"@type":"ListItem","position":2,"name":"@databricks/appkit-ui","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/"},{"@type":"ListItem","position":3,"name":"Drawer","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Drawer"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
7
+ <script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
8
+ <script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
9
+ </head>
10
+ <body class="navigation-with-keyboard">
11
+ <svg style="display: none;"><defs>
12
+ <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
+ </defs></svg>
14
+ <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Collapse sidebar category &#x27;API reference&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" tabindex="0" href="/appkit/docs/api/appkit/"><span title="@databricks/appkit" class="categoryLinkLabel_ShmP">@databricks/appkit</span></a><button aria-label="Expand sidebar category &#x27;@databricks/appkit&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" tabindex="0" href="/appkit/docs/api/appkit-ui/"><span title="@databricks/appkit-ui" class="categoryLinkLabel_ShmP">@databricks/appkit-ui</span></a><button aria-label="Collapse sidebar category &#x27;@databricks/appkit-ui&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Accordion"><span title="UI components" class="categoryLinkLabel_ShmP">UI components</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Accordion"><span title="Accordion" class="linkLabel_hZzm">Accordion</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Alert"><span title="Alert" class="linkLabel_hZzm">Alert</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/AlertDialog"><span title="AlertDialog" class="linkLabel_hZzm">AlertDialog</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/AspectRatio"><span title="AspectRatio" class="linkLabel_hZzm">AspectRatio</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Avatar"><span title="Avatar" class="linkLabel_hZzm">Avatar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Badge"><span title="Badge" class="linkLabel_hZzm">Badge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Breadcrumb"><span title="Breadcrumb" class="linkLabel_hZzm">Breadcrumb</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Button"><span title="Button" class="linkLabel_hZzm">Button</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ButtonGroup"><span title="ButtonGroup" class="linkLabel_hZzm">ButtonGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Calendar"><span title="Calendar" class="linkLabel_hZzm">Calendar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Card"><span title="Card" class="linkLabel_hZzm">Card</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Carousel"><span title="Carousel" class="linkLabel_hZzm">Carousel</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ChartContainer"><span title="ChartContainer" class="linkLabel_hZzm">ChartContainer</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Checkbox"><span title="Checkbox" class="linkLabel_hZzm">Checkbox</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Collapsible"><span title="Collapsible" class="linkLabel_hZzm">Collapsible</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Command"><span title="Command" class="linkLabel_hZzm">Command</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ContextMenu"><span title="ContextMenu" class="linkLabel_hZzm">ContextMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Dialog"><span title="Dialog" class="linkLabel_hZzm">Dialog</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Drawer"><span title="Drawer" class="linkLabel_hZzm">Drawer</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/DropdownMenu"><span title="DropdownMenu" class="linkLabel_hZzm">DropdownMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Empty"><span title="Empty" class="linkLabel_hZzm">Empty</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Field"><span title="Field" class="linkLabel_hZzm">Field</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/FormControl"><span title="FormControl" class="linkLabel_hZzm">FormControl</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/HoverCard"><span title="HoverCard" class="linkLabel_hZzm">HoverCard</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Input"><span title="Input" class="linkLabel_hZzm">Input</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/InputGroup"><span title="InputGroup" class="linkLabel_hZzm">InputGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/InputOTP"><span title="InputOTP" class="linkLabel_hZzm">InputOTP</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Item"><span title="Item" class="linkLabel_hZzm">Item</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Kbd"><span title="Kbd" class="linkLabel_hZzm">Kbd</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Label"><span title="Label" class="linkLabel_hZzm">Label</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Menubar"><span title="Menubar" class="linkLabel_hZzm">Menubar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/NavigationMenu"><span title="NavigationMenu" class="linkLabel_hZzm">NavigationMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Pagination"><span title="Pagination" class="linkLabel_hZzm">Pagination</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Popover"><span title="Popover" class="linkLabel_hZzm">Popover</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Progress"><span title="Progress" class="linkLabel_hZzm">Progress</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/RadioGroup"><span title="RadioGroup" class="linkLabel_hZzm">RadioGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ResizableHandle"><span title="ResizableHandle" class="linkLabel_hZzm">ResizableHandle</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ScrollArea"><span title="ScrollArea" class="linkLabel_hZzm">ScrollArea</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Select"><span title="Select" class="linkLabel_hZzm">Select</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Separator"><span title="Separator" class="linkLabel_hZzm">Separator</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Sheet"><span title="Sheet" class="linkLabel_hZzm">Sheet</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Sidebar"><span title="Sidebar" class="linkLabel_hZzm">Sidebar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Skeleton"><span title="Skeleton" class="linkLabel_hZzm">Skeleton</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Slider"><span title="Slider" class="linkLabel_hZzm">Slider</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Spinner"><span title="Spinner" class="linkLabel_hZzm">Spinner</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Switch"><span title="Switch" class="linkLabel_hZzm">Switch</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Table"><span title="Table" class="linkLabel_hZzm">Table</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Tabs"><span title="Tabs" class="linkLabel_hZzm">Tabs</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Textarea"><span title="Textarea" class="linkLabel_hZzm">Textarea</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Toaster"><span title="Toaster" class="linkLabel_hZzm">Toaster</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Toggle"><span title="Toggle" class="linkLabel_hZzm">Toggle</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ToggleGroup"><span title="ToggleGroup" class="linkLabel_hZzm">ToggleGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Tooltip"><span title="Tooltip" class="linkLabel_hZzm">Tooltip</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/appkit/docs/api/appkit-ui/data/AreaChart"><span title="Data components" class="categoryLinkLabel_ShmP">Data components</span></a></div></li></ul></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/"><span>API reference</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/appkit-ui/"><span>@databricks/appkit-ui</span></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">UI components</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Drawer</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Drawer</h1></header>
15
+ <p>Draggable panel that slides in from screen edges</p>
16
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h2>
17
+ <!-- -->
18
+ <section class="doc-example"><div class="doc-example-preview"><iframe style="width:100%;height:700px;min-height:200px;max-height:800px;border:none;display:block;background-color:transparent;border-radius:8px;transition:height 0.2s ease" title="Component Preview"></iframe></div><div class="doc-example-source"><div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token string" style="color:rgb(163, 21, 21)">&quot;use client&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports operator" style="color:rgb(0, 0, 0)">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:rgb(0, 0, 255)">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Minus</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Plus</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;lucide-react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Bar</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">BarChart</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">ResponsiveContainer</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;recharts&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">Drawer</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerClose</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerContent</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerDescription</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerFooter</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerHeader</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerTitle</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerTrigger</span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#000000"><span class="token imports"></span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit-ui/react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">const</span><span class="token plain"> data </span><span class="token operator" style="color:rgb(0, 0, 0)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">400</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">300</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">200</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">300</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">200</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">278</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">189</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">239</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">300</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">200</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">278</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">189</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> goal</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(9, 134, 88)">349</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">DrawerExample</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token plain">goal</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> setGoal</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">useState</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token number" style="color:rgb(9, 134, 88)">350</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">onClick</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain">adjustment</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(0, 112, 193)">number</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">setGoal</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token known-class-name class-name" style="color:rgb(38, 127, 153)">Math</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">max</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token number" style="color:rgb(9, 134, 88)">200</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(38, 127, 153)">Math</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">min</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token number" style="color:rgb(9, 134, 88)">400</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> goal </span><span class="token operator" style="color:rgb(0, 0, 0)">+</span><span class="token plain"> adjustment</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Drawer</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerTrigger</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">asChild</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">outline</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Open Drawer</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerTrigger</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerContent</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">mx-auto w-full max-w-sm</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerHeader</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerTitle</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Move Goal</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerTitle</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerDescription</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Set your daily activity goal.</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerDescription</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerHeader</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">p-4 pb-0</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">flex items-center justify-center space-x-2</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">outline</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">size</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">icon</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">h-8 w-8 shrink-0 rounded-full</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(0, 0, 0)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript function" style="color:rgb(0, 0, 255)">onClick</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">-</span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">10</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">disabled</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">goal </span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">&lt;=</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">200</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Minus</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">span</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">sr-only</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Decrease</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">span</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">flex-1 text-center</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">text-7xl font-bold tracking-tighter</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain">goal</span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">text-[0.70rem] uppercase text-muted-foreground</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> Calories/day</span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">outline</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">size</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">icon</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">h-8 w-8 shrink-0 rounded-full</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(0, 0, 0)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript function" style="color:rgb(0, 0, 255)">onClick</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">10</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">disabled</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">goal </span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">&gt;=</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">400</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Plus</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">span</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">sr-only</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Increase</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">span</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">mt-3 h-[120px]</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ResponsiveContainer</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">width</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">100%</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">height</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">100%</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">BarChart</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">data</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">data</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Bar</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">dataKey</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">goal</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> fill</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;hsl(var(--foreground))&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> opacity</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">0.9</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">BarChart</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ResponsiveContainer</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerFooter</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Submit</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerClose</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">asChild</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">outline</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Cancel</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerClose</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerFooter</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">DrawerContent</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Drawer</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div></div></section>
19
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawer-1">Drawer<a href="#drawer-1" class="hash-link" aria-label="Direct link to Drawer" title="Direct link to Drawer" translate="no">​</a></h2>
20
+ <p>Draggable panel that slides in from screen edges</p>
21
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
22
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
23
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>activeSnapPoint</code></td><td><code>string | number | null</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>setActiveSnapPoint</code></td><td><code>((snapPoint: string | number | null) =&gt; void)</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>closeThreshold</code></td><td><code>number</code></td><td></td><td><code>0.25</code></td><td>Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.</td></tr><tr><td><code>noBodyStyles</code></td><td><code>boolean</code></td><td></td><td>-</td><td>When <code>true</code> the <code>body</code> doesn&#x27;t get any styles assigned from Vaul</td></tr><tr><td><code>onOpenChange</code></td><td><code>((open: boolean) =&gt; void)</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>shouldScaleBackground</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>setBackgroundColorOnScale</code></td><td><code>boolean</code></td><td></td><td><code>true</code></td><td>When <code>false</code> we don&#x27;t change body&#x27;s background color when the drawer is open.</td></tr><tr><td><code>scrollLockTimeout</code></td><td><code>number</code></td><td></td><td><code>500ms</code></td><td>Duration for which the drawer is not draggable after scrolling content inside of the drawer.</td></tr><tr><td><code>fixed</code></td><td><code>boolean</code></td><td></td><td>-</td><td>When <code>true</code>, don&#x27;t move the drawer upwards if there&#x27;s space, but rather only change it&#x27;s height so it&#x27;s fully scrollable when the keyboard is open</td></tr><tr><td><code>handleOnly</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>When <code>true</code> only allows the drawer to be dragged by the <code>&amp;lt;Drawer.Handle /&amp;gt;</code> component.</td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td></td><td><code>true</code></td><td>When <code>false</code> dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the <code>open</code> prop, otherwise you won&#x27;t be able to open/close the drawer.</td></tr><tr><td><code>onDrag</code></td><td><code>((event: PointerEvent&lt;HTMLDivElement&gt;, percentageDragged: number) =&gt; void)</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>onRelease</code></td><td><code>((event: PointerEvent&lt;HTMLDivElement&gt;, open: boolean) =&gt; void)</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>modal</code></td><td><code>boolean</code></td><td></td><td><code>true</code></td><td>When <code>false</code> it allows to interact with elements outside of the drawer without closing it.</td></tr><tr><td><code>nested</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>onClose</code></td><td><code>(() =&gt; void)</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>direction</code></td><td><code>enum</code></td><td></td><td><code>&#x27;bottom&#x27;</code></td><td>Direction of the drawer. Can be <code>top</code> or <code>bottom</code>, <code>left</code>, <code>right</code>.</td></tr><tr><td><code>defaultOpen</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>Opened by default, skips initial enter animation. Still reacts to <code>open</code> state changes</td></tr><tr><td><code>disablePreventScroll</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>When set to <code>true</code> prevents scrolling on the document body on mount, and restores it on unmount.</td></tr><tr><td><code>repositionInputs</code></td><td><code>boolean</code></td><td></td><td><code>true when {@link snapPoints } is defined</code></td><td>When <code>true</code> Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to <code>false</code> will fall back to the default browser behavior.</td></tr><tr><td><code>snapToSequentialPoint</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>Disabled velocity based swiping for snap points. This means that a snap point won&#x27;t be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.</td></tr><tr><td><code>container</code></td><td><code>HTMLElement | null</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>onAnimationEnd</code></td><td><code>((open: boolean) =&gt; void)</code></td><td></td><td>-</td><td>Gets triggered after the open or close animation ends, it receives an <code>open</code> argument with the <code>open</code> state of the drawer by the time the function was triggered. Useful to revert any state changes for example.</td></tr><tr><td><code>preventScrollRestoration</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>autoFocus</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>snapPoints</code></td><td><code>(string | number)[]</code></td><td></td><td>-</td><td>Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example <code>[0.2, 0.5, 0.8]</code>. You can also use px values, which doesn&#x27;t take screen height into account.</td></tr><tr><td><code>fadeFromIndex</code></td><td><code>number</code></td><td></td><td>-</td><td>Index of a <code>snapPoint</code> from which the overlay fade should be applied. Defaults to the last snap point.</td></tr></tbody></table>
24
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
25
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Drawer</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">Drawer</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
26
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawerclose">DrawerClose<a href="#drawerclose" class="hash-link" aria-label="Direct link to DrawerClose" title="Direct link to DrawerClose" translate="no">​</a></h2>
27
+ <p>Button that closes the drawer</p>
28
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
29
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-1">Props<a href="#props-1" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
30
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr></tbody></table>
31
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-1">Usage<a href="#usage-1" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
32
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerClose</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerClose</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
33
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawercontent">DrawerContent<a href="#drawercontent" class="hash-link" aria-label="Direct link to DrawerContent" title="Direct link to DrawerContent" translate="no">​</a></h2>
34
+ <p>Main content area of the drawer</p>
35
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
36
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-2">Props<a href="#props-2" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
37
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>forceMount</code></td><td><code>true</code></td><td></td><td>-</td><td>Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.</td></tr><tr><td><code>onEscapeKeyDown</code></td><td><code>((event: KeyboardEvent) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when the escape key is down. Can be prevented.</td></tr><tr><td><code>onPointerDownOutside</code></td><td><code>((event: PointerDownOutsideEvent) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when the a <code>pointerdown</code> event happens outside of the <code>DismissableLayer</code>. Can be prevented.</td></tr><tr><td><code>onFocusOutside</code></td><td><code>((event: FocusOutsideEvent) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when the focus moves outside of the <code>DismissableLayer</code>. Can be prevented.</td></tr><tr><td><code>onInteractOutside</code></td><td><code>((event: FocusOutsideEvent | PointerDownOutsideEvent) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when an interaction happens outside the <code>DismissableLayer</code>. Specifically, when a <code>pointerdown</code> event happens outside or focus moves outside of it. Can be prevented.</td></tr><tr><td><code>onOpenAutoFocus</code></td><td><code>((event: Event) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when auto-focusing on open. Can be prevented.</td></tr><tr><td><code>onCloseAutoFocus</code></td><td><code>((event: Event) =&gt; void)</code></td><td></td><td>-</td><td>Event handler called when auto-focusing on close. Can be prevented.</td></tr></tbody></table>
38
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-2">Usage<a href="#usage-2" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
39
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerContent</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerContent</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
40
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawerdescription">DrawerDescription<a href="#drawerdescription" class="hash-link" aria-label="Direct link to DrawerDescription" title="Direct link to DrawerDescription" translate="no">​</a></h2>
41
+ <p>Description text for the drawer</p>
42
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
43
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-3">Props<a href="#props-3" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
44
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr></tbody></table>
45
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-3">Usage<a href="#usage-3" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
46
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerDescription</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerDescription</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
47
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawerfooter">DrawerFooter<a href="#drawerfooter" class="hash-link" aria-label="Direct link to DrawerFooter" title="Direct link to DrawerFooter" translate="no">​</a></h2>
48
+ <p>Footer section of the drawer</p>
49
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
50
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-4">Props<a href="#props-4" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
51
+ <p>This component extends standard HTML element attributes.</p>
52
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-4">Usage<a href="#usage-4" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
53
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerFooter</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerFooter</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
54
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawerheader">DrawerHeader<a href="#drawerheader" class="hash-link" aria-label="Direct link to DrawerHeader" title="Direct link to DrawerHeader" translate="no">​</a></h2>
55
+ <p>Header section of the drawer</p>
56
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
57
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-5">Props<a href="#props-5" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
58
+ <p>This component extends standard HTML element attributes.</p>
59
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-5">Usage<a href="#usage-5" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
60
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerHeader</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerHeader</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
61
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="draweroverlay">DrawerOverlay<a href="#draweroverlay" class="hash-link" aria-label="Direct link to DrawerOverlay" title="Direct link to DrawerOverlay" translate="no">​</a></h2>
62
+ <p>Dimmed overlay behind the drawer</p>
63
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
64
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-6">Props<a href="#props-6" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
65
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr><tr><td><code>forceMount</code></td><td><code>true</code></td><td></td><td>-</td><td>Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.</td></tr></tbody></table>
66
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-6">Usage<a href="#usage-6" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
67
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerOverlay</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerOverlay</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
68
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawerportal">DrawerPortal<a href="#drawerportal" class="hash-link" aria-label="Direct link to DrawerPortal" title="Direct link to DrawerPortal" translate="no">​</a></h2>
69
+ <p>Portal container for drawer content</p>
70
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
71
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-7">Props<a href="#props-7" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
72
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>container</code></td><td><code>Element | DocumentFragment | null</code></td><td></td><td>-</td><td>Specify a container element to portal the content into.</td></tr><tr><td><code>forceMount</code></td><td><code>true</code></td><td></td><td>-</td><td>Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.</td></tr></tbody></table>
73
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-7">Usage<a href="#usage-7" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
74
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerPortal</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerPortal</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
75
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawertitle">DrawerTitle<a href="#drawertitle" class="hash-link" aria-label="Direct link to DrawerTitle" title="Direct link to DrawerTitle" translate="no">​</a></h2>
76
+ <p>Title text for the drawer</p>
77
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
78
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-8">Props<a href="#props-8" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
79
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr></tbody></table>
80
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-8">Usage<a href="#usage-8" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
81
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerTitle</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerTitle</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
82
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="drawertrigger">DrawerTrigger<a href="#drawertrigger" class="hash-link" aria-label="Direct link to DrawerTrigger" title="Direct link to DrawerTrigger" translate="no">​</a></h2>
83
+ <p>Button that opens the drawer</p>
84
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/drawer.tsx</code></a></p>
85
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-9">Props<a href="#props-9" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
86
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr></tbody></table>
87
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-9">Usage<a href="#usage-9" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
88
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">DrawerTrigger</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">DrawerTrigger</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/api/appkit-ui/ui/Drawer.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/api/appkit-ui/ui/Dialog"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Dialog</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/api/appkit-ui/ui/DropdownMenu"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">DropdownMenu</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a></li><li><a href="#drawer-1" class="table-of-contents__link toc-highlight">Drawer</a><ul><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawerclose" class="table-of-contents__link toc-highlight">DrawerClose</a><ul><li><a href="#props-1" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-1" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawercontent" class="table-of-contents__link toc-highlight">DrawerContent</a><ul><li><a href="#props-2" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-2" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawerdescription" class="table-of-contents__link toc-highlight">DrawerDescription</a><ul><li><a href="#props-3" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-3" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawerfooter" class="table-of-contents__link toc-highlight">DrawerFooter</a><ul><li><a href="#props-4" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-4" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawerheader" class="table-of-contents__link toc-highlight">DrawerHeader</a><ul><li><a href="#props-5" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-5" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#draweroverlay" class="table-of-contents__link toc-highlight">DrawerOverlay</a><ul><li><a href="#props-6" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-6" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawerportal" class="table-of-contents__link toc-highlight">DrawerPortal</a><ul><li><a href="#props-7" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-7" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawertitle" class="table-of-contents__link toc-highlight">DrawerTitle</a><ul><li><a href="#props-8" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-8" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#drawertrigger" class="table-of-contents__link toc-highlight">DrawerTrigger</a><ul><li><a href="#props-9" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-9" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
89
+ </body>
90
+ </html>