@databricks/appkit 0.2.0 → 0.4.0

package/docs/docs/api/appkit-ui/ui/InputOTP.md

@@ -0,0 +1,124 @@
+# InputOTP
+
+One-time password input with individual character slots
+
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@databricks/appkit-ui/react"
+
+export default function InputOtpExample() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+
+```
+
+## InputOTP[​](#inputotp-1 "Direct link to InputOTP")
+
+One-time password input with individual character slots
+
+**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop                          | Type                              | Required | Default | Description |
+| ----------------------------- | --------------------------------- | -------- | ------- | ----------- |
+| `value`                       | `string`                          |          | -       | -           |
+| `onChange`                    | `((newValue: string) => unknown)` |          | -       | -           |
+| `maxLength`                   | `number`                          | ✓        | -       | -           |
+| `textAlign`                   | `enum`                            |          | -       | -           |
+| `onComplete`                  | `((...args: any[]) => unknown)`   |          | -       | -           |
+| `pushPasswordManagerStrategy` | `enum`                            |          | -       | -           |
+| `pasteTransformer`            | `((pasted: string) => string)`    |          | -       | -           |
+| `containerClassName`          | `string`                          |          | -       | -           |
+| `noScriptCSSFallback`         | `string \| null`                  |          | -       | -           |
+| `render`                      | `InputOTPRenderFn`                |          | -       | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { InputOTP } from '@databricks/appkit-ui';
+
+<InputOTP /* props */ />
+
+```
+
+## InputOTPGroup[​](#inputotpgroup "Direct link to InputOTPGroup")
+
+Container grouping OTP input slots together
+
+**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)
+
+### Props[​](#props-1 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-1 "Direct link to Usage")
+
+```tsx
+import { InputOTPGroup } from '@databricks/appkit-ui';
+
+<InputOTPGroup /* props */ />
+
+```
+
+## InputOTPSeparator[​](#inputotpseparator "Direct link to InputOTPSeparator")
+
+Visual separator between OTP slot groups
+
+**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)
+
+### Props[​](#props-2 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-2 "Direct link to Usage")
+
+```tsx
+import { InputOTPSeparator } from '@databricks/appkit-ui';
+
+<InputOTPSeparator /* props */ />
+
+```
+
+## InputOTPSlot[​](#inputotpslot "Direct link to InputOTPSlot")
+
+Individual character slot within the OTP input
+
+**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)
+
+### Props[​](#props-3 "Direct link to Props")
+
+| Prop    | Type     | Required | Default | Description |
+| ------- | -------- | -------- | ------- | ----------- |
+| `index` | `number` | ✓        | -       | -           |
+
+### Usage[​](#usage-3 "Direct link to Usage")
+
+```tsx
+import { InputOTPSlot } from '@databricks/appkit-ui';
+
+<InputOTPSlot /* props */ />
+
+```

package/docs/docs/api/appkit-ui/ui/Item/index.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<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/Item" data-has-hydrated="false">
+<head>
+<meta charset="UTF-8">
+<meta name="generator" content="Docusaurus v3.9.2">
+<title data-rh="true">Item | 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/Item"><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="Item | AppKit"><meta data-rh="true" name="description" content="Flexible container for list items with media, content, and actions"><meta data-rh="true" property="og:description" content="Flexible container for list items with media, content, and actions"><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/Item"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Item" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Item" 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":"Item","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Item"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
+<script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
+<script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
+</head>
+<body class="navigation-with-keyboard">
+<svg style="display: none;"><defs>
+<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>
+</defs></svg>
+<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" 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 menu__link--active" aria-current="page" 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">Item</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>Item</h1></header>
+<p>Flexible container for list items with media, content, and actions</p>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="item-1">Item<a href="#item-1" class="hash-link" aria-label="Direct link to Item" title="Direct link to Item" translate="no">​</a></h2>
+<p>Flexible container for list items with media, content, and actions</p>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>variant</code></td><td><code>&quot;default&quot; | &quot;outline&quot; | &quot;muted&quot; | null</code></td><td></td><td><code>default</code></td><td>-</td></tr><tr><td><code>size</code></td><td><code>&quot;default&quot; | &quot;sm&quot; | null</code></td><td></td><td><code>default</code></td><td>-</td></tr><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>-</td></tr></tbody></table>
+<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>
+<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">Item</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">Item</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemactions">ItemActions<a href="#itemactions" class="hash-link" aria-label="Direct link to ItemActions" title="Direct link to ItemActions" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemActions</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">ItemActions</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemcontent">ItemContent<a href="#itemcontent" class="hash-link" aria-label="Direct link to ItemContent" title="Direct link to ItemContent" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemContent</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">ItemContent</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemdescription">ItemDescription<a href="#itemdescription" class="hash-link" aria-label="Direct link to ItemDescription" title="Direct link to ItemDescription" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemDescription</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">ItemDescription</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemfooter">ItemFooter<a href="#itemfooter" class="hash-link" aria-label="Direct link to ItemFooter" title="Direct link to ItemFooter" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemFooter</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">ItemFooter</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemgroup">ItemGroup<a href="#itemgroup" class="hash-link" aria-label="Direct link to ItemGroup" title="Direct link to ItemGroup" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemGroup</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">ItemGroup</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemheader">ItemHeader<a href="#itemheader" class="hash-link" aria-label="Direct link to ItemHeader" title="Direct link to ItemHeader" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemHeader</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">ItemHeader</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemmedia">ItemMedia<a href="#itemmedia" class="hash-link" aria-label="Direct link to ItemMedia" title="Direct link to ItemMedia" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>variant</code></td><td><code>&quot;image&quot; | &quot;default&quot; | &quot;icon&quot; | null</code></td><td></td><td><code>default</code></td><td>-</td></tr></tbody></table>
+<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>
+<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">ItemMedia</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">ItemMedia</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemseparator">ItemSeparator<a href="#itemseparator" class="hash-link" aria-label="Direct link to ItemSeparator" title="Direct link to ItemSeparator" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>orientation</code></td><td><code>enum</code></td><td></td><td><code>vertical</code></td><td>Either <code>vertical</code> or <code>horizontal</code>. Defaults to <code>horizontal</code>.</td></tr><tr><td><code>decorative</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.</td></tr><tr><td><code>asChild</code></td><td><code>boolean</code></td><td></td><td>-</td><td>-</td></tr></tbody></table>
+<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>
+<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">ItemSeparator</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">ItemSeparator</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>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="itemtitle">ItemTitle<a href="#itemtitle" class="hash-link" aria-label="Direct link to ItemTitle" title="Direct link to ItemTitle" translate="no">​</a></h2>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/item.tsx</code></a></p>
+<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>
+<p>This component extends standard HTML element attributes.</p>
+<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>
+<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">ItemTitle</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">ItemTitle</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/Item.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/InputOTP"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">InputOTP</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/api/appkit-ui/ui/Kbd"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Kbd</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="#item-1" class="table-of-contents__link toc-highlight">Item</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="#itemactions" class="table-of-contents__link toc-highlight">ItemActions</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="#itemcontent" class="table-of-contents__link toc-highlight">ItemContent</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="#itemdescription" class="table-of-contents__link toc-highlight">ItemDescription</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="#itemfooter" class="table-of-contents__link toc-highlight">ItemFooter</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="#itemgroup" class="table-of-contents__link toc-highlight">ItemGroup</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="#itemheader" class="table-of-contents__link toc-highlight">ItemHeader</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="#itemmedia" class="table-of-contents__link toc-highlight">ItemMedia</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="#itemseparator" class="table-of-contents__link toc-highlight">ItemSeparator</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="#itemtitle" class="table-of-contents__link toc-highlight">ItemTitle</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>
+</body>
+</html>

package/docs/docs/api/appkit-ui/ui/Item.md

@@ -0,0 +1,185 @@
+# Item
+
+Flexible container for list items with media, content, and actions
+
+## Item[​](#item-1 "Direct link to Item")
+
+Flexible container for list items with media, content, and actions
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop      | Type                                        | Required | Default   | Description |
+| --------- | ------------------------------------------- | -------- | --------- | ----------- |
+| `variant` | `"default" \| "outline" \| "muted" \| null` |          | `default` | -           |
+| `size`    | `"default" \| "sm" \| null`                 |          | `default` | -           |
+| `asChild` | `boolean`                                   |          | `false`   | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { Item } from '@databricks/appkit-ui';
+
+<Item /* props */ />
+
+```
+
+## ItemActions[​](#itemactions "Direct link to ItemActions")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-1 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-1 "Direct link to Usage")
+
+```tsx
+import { ItemActions } from '@databricks/appkit-ui';
+
+<ItemActions /* props */ />
+
+```
+
+## ItemContent[​](#itemcontent "Direct link to ItemContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-2 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-2 "Direct link to Usage")
+
+```tsx
+import { ItemContent } from '@databricks/appkit-ui';
+
+<ItemContent /* props */ />
+
+```
+
+## ItemDescription[​](#itemdescription "Direct link to ItemDescription")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-3 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-3 "Direct link to Usage")
+
+```tsx
+import { ItemDescription } from '@databricks/appkit-ui';
+
+<ItemDescription /* props */ />
+
+```
+
+## ItemFooter[​](#itemfooter "Direct link to ItemFooter")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-4 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-4 "Direct link to Usage")
+
+```tsx
+import { ItemFooter } from '@databricks/appkit-ui';
+
+<ItemFooter /* props */ />
+
+```
+
+## ItemGroup[​](#itemgroup "Direct link to ItemGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-5 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-5 "Direct link to Usage")
+
+```tsx
+import { ItemGroup } from '@databricks/appkit-ui';
+
+<ItemGroup /* props */ />
+
+```
+
+## ItemHeader[​](#itemheader "Direct link to ItemHeader")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-6 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-6 "Direct link to Usage")
+
+```tsx
+import { ItemHeader } from '@databricks/appkit-ui';
+
+<ItemHeader /* props */ />
+
+```
+
+## ItemMedia[​](#itemmedia "Direct link to ItemMedia")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-7 "Direct link to Props")
+
+| Prop      | Type                                     | Required | Default   | Description |
+| --------- | ---------------------------------------- | -------- | --------- | ----------- |
+| `variant` | `"image" \| "default" \| "icon" \| null` |          | `default` | -           |
+
+### Usage[​](#usage-7 "Direct link to Usage")
+
+```tsx
+import { ItemMedia } from '@databricks/appkit-ui';
+
+<ItemMedia /* props */ />
+
+```
+
+## ItemSeparator[​](#itemseparator "Direct link to ItemSeparator")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-8 "Direct link to Props")
+
+| Prop          | Type      | Required | Default    | Description                                                                                                                                                                          |
+| ------------- | --------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `orientation` | `enum`    |          | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`.                                                                                                                         |
+| `decorative`  | `boolean` |          | -          | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
+| `asChild`     | `boolean` |          | -          | -                                                                                                                                                                                    |
+
+### Usage[​](#usage-8 "Direct link to Usage")
+
+```tsx
+import { ItemSeparator } from '@databricks/appkit-ui';
+
+<ItemSeparator /* props */ />
+
+```
+
+## ItemTitle[​](#itemtitle "Direct link to ItemTitle")
+
+**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)
+
+### Props[​](#props-9 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-9 "Direct link to Usage")
+
+```tsx
+import { ItemTitle } from '@databricks/appkit-ui';
+
+<ItemTitle /* props */ />
+
+```