# Kitze UI

> React source components built on shadcn, Base UI and Tailwind CSS. Small prop APIs let developers and LLMs write less UI code and reuse consistent desktop/mobile interactions.

## Philosophy and conventions

Use an existing component before composing primitives or inventing a mobile variant. Install source into your app with shadcn; you own and can customize it. Preserve accessible names, focus management, keyboard controls and reduced-motion behavior.
Initialize shadcn with Base UI. Install: npx shadcn@latest add https://ui.kitze.io/r/COMPONENT.json. The CLI resolves npm and registry dependencies. This index contains documentation and install links, not source code.
Wrap the app in KitzeUIProvider with isMobile from a breakpoint hook. Place AlertProvider and DialogManager inside it. ResponsiveDialog, DialogManager and pickers default to bottom drawers on mobile; SimpleDialog defaults to a centered dialog. mobileView=keep opts out.
CommonMenuItem works across dropdowns, right-click menus and drawers. shortcut accepts key arrays (recommended) or strings and renders shared keycaps; bind the handler separately. CommonMenuItemDelete: confirm=inline (or true) gives inline Sure? without closing the menu; confirm=none (or false) deletes immediately; default/dialog uses AlertProvider. Set confirmationText to require an exact phrase in dialog mode. Command/Control-click bypasses inline and ordinary dialog confirmation, but never a required confirmationText. Inline confirmation keeps its width and resets only when the menu closes.
EmojiPicker returns a Unicode string. IconPicker returns IconValue {name,color?,background?,frame?}; EmojiIconPicker returns {type:emoji,emoji} or {type:icon,icon}. Use PickedIcon to render the saved icon without loading the picker or catalog. Lucide SVGs load individually via Iconify; iconData supports preloaded/offline rendering. The full Lucide name index and emoji picker load on demand. Default colors are 20 paired presets; custom/separate controls and foreground/background/both/none modes are available.

SocialLoginButton composes CustomButton and supports github, google, apple, microsoft, discord, gitlab, facebook, x, linkedin, twitch, spotify and slack. Use provider, onClick, loading, disabled, label, iconOnly, size=sm/md/lg and variant=outline/brand. Both variants follow the app's Tailwind dark class. Icons render inline with no remote requests. Connect onClick to your authentication client; the button does not configure OAuth or manage auth errors.

SegmentedControl options support icon, leftIcon, rightIcon and per-option tooltip. iconOnly hides visible labels while keeping accessible names; mobile select presentations keep their labels. Every component page has Copy for agents with its docs URL, install command and purpose. Simple and enhanced wrappers compose primitives to avoid repeating state and responsive behavior; use primitives directly when you need a different composition.

## Simple and Responsive: installation boundary

Simple and Responsive components have distinct purposes. Simple provides a smaller API for the standard presentation, suitable for desktop apps and projects that do not need mobile adaptation. Responsive adds the choice of a mobile presentation, such as a bottom drawer, to that same interaction.
Keep both independently installable: the intended dependency direction is Responsive → Simple, with drawer and mobile gesture dependencies owned by the responsive layer. A desktop-only consumer should not need to install mobile behavior just to use the simplified API. This is an installation boundary, not just a different default prop.
Current limitation: several Simple components still import and install drawer/mobile dependencies. Setting mobileView="keep" prevents the presentation switch but does not remove those installed dependencies. The dependency split is an architectural requirement for a future refactor, not a guarantee of the current registry.
Do not remove these separate entry points merely because shadcn provides the underlying visuals or because their implementations currently overlap. Reuse upstream primitives and shared code while preserving the installation choice. Describe Kitze UI’s value as smaller APIs and reusable behavior; do not present upstream icons, loaders or other existing features as unique to this registry.

## Documentation

- [Usage guide](https://ui.kitze.io/guide): Installation, providers, responsive defaults, menu confirmation and picker values.
- [Component collection](https://ui.kitze.io): Interactive desktop/mobile examples.
- [Registry index](https://ui.kitze.io/registry.json): Machine-readable dependency and installation manifest.
- [Branded sections](https://kitze.github.io/kitze-reusable-ui/): Kitze-specific reusable sections, maintained separately on top of Kitze UI.

## Components

- [Accordion](https://ui.kitze.io/component/accordion): Kitze UI’s styled Base UI primitives for expandable sections. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/accordion.json) — npx shadcn@latest add https://ui.kitze.io/r/accordion.json
- [Advanced Select](https://ui.kitze.io/component/advanced-select): A multi-select built from Popover, Command and Badge primitives for choosing tags, members or filters. It adds optional search, removable selection badges, select-all/clear actions, loading, a visible-badge limit and optional creation of new options. Use it when selecting several values; SimpleSelect is the smaller API for one value. This saves rebuilding selection state and badge/search composition in every form. [Install](https://ui.kitze.io/r/advanced-select.json) — npx shadcn@latest add https://ui.kitze.io/r/advanced-select.json
- [Alert Dialog](https://ui.kitze.io/component/alert-dialog): Kitze UI’s styled Base UI primitives for explicit confirmation dialogs. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/alert-dialog.json) — npx shadcn@latest add https://ui.kitze.io/r/alert-dialog.json
- [Apple Logo](https://ui.kitze.io/component/apple-logo): An inline Apple brand mark for interfaces that need Apple-specific branding. Use it instead of substituting a generic fruit icon or repeating SVG paths; it provides artwork only, not authentication behavior. [Install](https://ui.kitze.io/r/apple-logo.json) — npx shadcn@latest add https://ui.kitze.io/r/apple-logo.json
- [Bottom Drawer](https://ui.kitze.io/component/bottom-drawer): A Base UI Drawer wrapper with shared title, description, swipe handle, content and menu variants. Use it for touch-friendly sheets and action menus without rebuilding drawer anatomy and dismissal behavior. CommonMenuItem actions reuse this surface on mobile, including inline confirmation that keeps the sheet open until the second activation. [Install](https://ui.kitze.io/r/bottom-drawer.json) — npx shadcn@latest add https://ui.kitze.io/r/bottom-drawer.json
- [Checkbox](https://ui.kitze.io/component/checkbox): Kitze UI’s styled Base UI primitives for boolean selection. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/checkbox.json) — npx shadcn@latest add https://ui.kitze.io/r/checkbox.json
- [Conditional Tooltip](https://ui.kitze.io/component/conditional-tooltip): Add a SimpleTooltip only when a condition and tooltip content are present; otherwise render the original child. Use it for disabled explanations or context-dependent hints without duplicating the trigger in two branches. It reuses the shared tooltip composition and styling. [Install](https://ui.kitze.io/r/conditional-tooltip.json) — npx shadcn@latest add https://ui.kitze.io/r/conditional-tooltip.json
- [Conditional Wrap](https://ui.kitze.io/component/conditional-wrap): Conditionally apply a wrapper function, with an optional alternative wrapper, while writing the child content once. Use it when a link, provider or layout wrapper is optional and duplicating the full child tree in a ternary would make maintenance harder. [Install](https://ui.kitze.io/r/conditional-wrap.json) — npx shadcn@latest add https://ui.kitze.io/r/conditional-wrap.json
- [Context Menu](https://ui.kitze.io/component/context-menu): Kitze UI’s styled Base UI primitives for right-click menus. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/context-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/context-menu.json
- [Custom Badge](https://ui.kitze.io/component/custom-badge): A styled badge with shared size, color and appearance variants. Use it for statuses, tags and counts when the stock badge variants are too limited, so the same semantic color and spacing choices can be reused across screens. [Install](https://ui.kitze.io/r/custom-badge.json) — npx shadcn@latest add https://ui.kitze.io/r/custom-badge.json
- [Custom Button](https://ui.kitze.io/component/custom-button): The shared button for application actions. It adds loading spinners, left/right icons and content, sizes, color variants, optional tooltips and link rendering to one prop API. Use it instead of repeating spinner, icon-spacing and disabled-state markup around a vanilla button; keep the underlying button primitive for compositions outside this API. [Install](https://ui.kitze.io/r/custom-button.json) — npx shadcn@latest add https://ui.kitze.io/r/custom-button.json
- [Dialog](https://ui.kitze.io/component/dialog): Kitze UI’s styled Base UI primitives for modal dialogs. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/dialog.json) — npx shadcn@latest add https://ui.kitze.io/r/dialog.json
- [Dialog Manager](https://ui.kitze.io/component/dialog-manager): Open and dismiss dialogs through a shared manager instead of keeping a separate open boolean and mounted dialog beside every trigger. Managed dialogs use the responsive dialog defaults, including mobile drawers, and remain mounted through their closing transitions. Use it for dialogs triggered from menus or distant parts of the component tree. [Install](https://ui.kitze.io/r/dialog-manager.json) — npx shadcn@latest add https://ui.kitze.io/r/dialog-manager.json
- [Dropdown Menu](https://ui.kitze.io/component/dropdown-menu): Kitze UI’s styled Base UI primitives for click-triggered menus. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/dropdown-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/dropdown-menu.json
- [Emoji / Icon Picker](https://ui.kitze.io/component/emoji-icon-picker): A single picker with segmented emoji/icon modes and a stable panel size across them. It composes EmojiPicker and IconPicker and returns a discriminated value identifying the selected kind. Use it for workspace or item identities when users should choose either an emoji or a styled icon through one control. [Install](https://ui.kitze.io/r/emoji-icon-picker.json) — npx shadcn@latest add https://ui.kitze.io/r/emoji-icon-picker.json
- [Emoji Picker](https://ui.kitze.io/component/emoji-picker): A ready-to-use emoji selector built on emoji-picker-react, loaded when opened. It handles picker presentation, search and categories while returning a Unicode string, and uses a popover or mobile bottom sheet. Use it instead of wiring an emoji library and separate desktop/mobile overlays yourself. [Install](https://ui.kitze.io/r/emoji-picker.json) — npx shadcn@latest add https://ui.kitze.io/r/emoji-picker.json
- [Favicon Image](https://ui.kitze.io/component/favicon-image): A square artwork layout combining a supplied icon with a gradient background, configurable dimensions and corner radius. Use it to prepare favicon or app-icon artwork with consistent proportions. It does not fetch favicons from remote sites or export image files itself. [Install](https://ui.kitze.io/r/favicon-image.json) — npx shadcn@latest add https://ui.kitze.io/r/favicon-image.json
- [Fill Height Spinner](https://ui.kitze.io/component/fill-height-spinner): A loading layout that fills the available parent height around the shared Spinner. Use it inside panels and bounded content areas so loading stays centered in the region being replaced rather than covering the whole page. [Install](https://ui.kitze.io/r/fill-height-spinner.json) — npx shadcn@latest add https://ui.kitze.io/r/fill-height-spinner.json
- [Form Debug](https://ui.kitze.io/component/form-debug): A development helper for inspecting form state while integrating react-hook-form fields. Use it when debugging values and validation rather than adding temporary JSON panels throughout a form; it is not a production-facing input. [Install](https://ui.kitze.io/r/form-debug.json) — npx shadcn@latest add https://ui.kitze.io/r/form-debug.json
- [Form Field Advanced Select](https://ui.kitze.io/component/form-field-advanced-select): A react-hook-form adapter for the shared multi-select component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-advanced-select.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-advanced-select.json
- [Form Field Checkbox](https://ui.kitze.io/component/form-field-checkbox): A react-hook-form adapter for the shared checkbox component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-checkbox.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-checkbox.json
- [Form Field Input](https://ui.kitze.io/component/form-field-input): A react-hook-form adapter for the shared text input component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-input.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-input.json
- [Form Field Segmented Control](https://ui.kitze.io/component/form-field-segmented-control): A react-hook-form adapter for the shared segmented choice component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-segmented-control.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-segmented-control.json
- [Form Field Select](https://ui.kitze.io/component/form-field-select): A react-hook-form adapter for the shared single-value select component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-select.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-select.json
- [Form Field Textarea](https://ui.kitze.io/component/form-field-textarea): A react-hook-form adapter for the shared multiline input component. It connects field value, changes, label and validation feedback through the common FormFieldWrapper. Use it to avoid repeating Controller/FormField wiring and error layout; use the underlying control outside react-hook-form. [Install](https://ui.kitze.io/r/form-field-textarea.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-textarea.json
- [Form Field Wrapper](https://ui.kitze.io/component/form-field-wrapper): The common react-hook-form field shell for label, control, description and validation message composition. Use it to give custom field controls the same form integration and error layout as the prebuilt FormField components. [Install](https://ui.kitze.io/r/form-field-wrapper.json) — npx shadcn@latest add https://ui.kitze.io/r/form-field-wrapper.json
- [Full Page Spinner](https://ui.kitze.io/component/full-page-spinner): A page-level loading layout around the shared Spinner. Use it while an entire page is waiting for data or a route boundary to resolve, rather than rebuilding centering and viewport layout at each loading boundary. [Install](https://ui.kitze.io/r/full-page-spinner.json) — npx shadcn@latest add https://ui.kitze.io/r/full-page-spinner.json
- [Gradient Text](https://ui.kitze.io/component/gradient-text): A reusable text treatment for gradient-colored typography. Use it where gradient text is an intentional part of the design so clipping and color classes stay in one place instead of being repeated across headings. [Install](https://ui.kitze.io/r/gradient-text.json) — npx shadcn@latest add https://ui.kitze.io/r/gradient-text.json
- [Help Info Circle](https://ui.kitze.io/component/help-info-circle): A compact help icon connected to the shared tooltip/drawer explanation pattern. Use it beside a field or menu action when a label needs an optional explanation, so every screen does not invent its own help trigger and touch behavior. [Install](https://ui.kitze.io/r/help-info-circle.json) — npx shadcn@latest add https://ui.kitze.io/r/help-info-circle.json
- [Hoverable Icon](https://ui.kitze.io/component/hoverable-icon): A reusable interactive icon treatment with consistent hover behavior and optional tooltip. Use it for compact secondary actions rather than repeatedly styling naked icons as click targets; give the action an accessible name. [Install](https://ui.kitze.io/r/hoverable-icon.json) — npx shadcn@latest add https://ui.kitze.io/r/hoverable-icon.json
- [Icon Picker](https://ui.kitze.io/component/icon-picker): A Lucide icon selector with the full name catalog loaded on demand and only displayed SVGs fetched through Iconify. It returns a small IconValue with optional foreground, background and frame, including paired presets and custom colors. Use it to avoid shipping an entire icon catalog or rebuilding icon search and styling controls; render saved values with PickedIcon. [Install](https://ui.kitze.io/r/icon-picker.json) — npx shadcn@latest add https://ui.kitze.io/r/icon-picker.json
- [Input](https://ui.kitze.io/component/input): An enhanced text input with left/right icons or content slots and an integrated loading state. Use it to avoid repeating adornment spacing, loading indicators and disabled styling around a vanilla input. It remains a normal input for form integration; use the base input for a plain field without these additions. [Install](https://ui.kitze.io/r/input.json) — npx shadcn@latest add https://ui.kitze.io/r/input.json
- [Keyboard Shortcut](https://ui.kitze.io/component/kbd): The shared visual keycap component for a sequence of keyboard keys. Use it to display shortcut hints with consistent sizing, borders and typography instead of plain strings. It is a display component and does not bind keyboard handlers. [Install](https://ui.kitze.io/r/kbd.json) — npx shadcn@latest add https://ui.kitze.io/r/kbd.json
- [Keyboard Shortcuts](https://ui.kitze.io/component/kbd-shortcuts): Render shortcut keys as individual Kbd keycaps with a configurable separator and shared style overrides. Menus use this component so modifier keys, destructive colors and sizing remain consistent across dropdowns, context menus and drawers. It displays hints; your application must bind the actual shortcuts. [Install](https://ui.kitze.io/r/kbd-shortcuts.json) — npx shadcn@latest add https://ui.kitze.io/r/kbd-shortcuts.json
- [Keyboard Shortcuts List](https://ui.kitze.io/component/kbd-shortcuts-list): A reusable layout for displaying multiple shortcut descriptions with the shared keycap components. Use it for keyboard-help panels or command documentation instead of recreating the alignment between action labels and their keys. It does not register shortcuts. [Install](https://ui.kitze.io/r/kbd-shortcuts-list.json) — npx shadcn@latest add https://ui.kitze.io/r/kbd-shortcuts-list.json
- [Kitze UI Context](https://ui.kitze.io/component/kitze-ui-context): The application provider for shared Kitze UI configuration, including the isMobile value used by responsive components. Supply the breakpoint decision once so dialogs, pickers and menus make the same desktop/mobile choice. It is setup infrastructure rather than a visible widget. [Install](https://ui.kitze.io/r/kitze-ui-context.json) — npx shadcn@latest add https://ui.kitze.io/r/kitze-ui-context.json
- [Labeled Checkbox](https://ui.kitze.io/component/labeled-checkbox): A checkbox paired with its label through a small prop API. Use it for standard boolean fields to avoid repeating label association and row spacing; use the checkbox primitive for a custom field layout. [Install](https://ui.kitze.io/r/labeled-checkbox.json) — npx shadcn@latest add https://ui.kitze.io/r/labeled-checkbox.json
- [Labeled Switch](https://ui.kitze.io/component/labeled-switch): A switch paired with its label through a small prop API. Use it for standard on/off settings so text alignment and accessible label association stay consistent; use the switch primitive for more specialized layouts. [Install](https://ui.kitze.io/r/labeled-switch.json) — npx shadcn@latest add https://ui.kitze.io/r/labeled-switch.json
- [Mac Window](https://ui.kitze.io/component/mac-window): A reusable macOS-style window frame for showcasing application content. Use it for product illustrations or demos where desktop window chrome provides useful context; it is decorative framing, not an operating-system window. [Install](https://ui.kitze.io/r/mac-window.json) — npx shadcn@latest add https://ui.kitze.io/r/mac-window.json
- [Menu Context](https://ui.kitze.io/component/menu-context): Internal context shared by dropdown menus, context menus and bottom-drawer menus. It tells CommonMenuItem which surface to render and how to close its owning menu. Menu wrappers install and provide it automatically; use it when implementing a compatible menu surface, not as a standalone visible component. [Install](https://ui.kitze.io/r/menu-context.json) — npx shadcn@latest add https://ui.kitze.io/r/menu-context.json
- [Meta Image](https://ui.kitze.io/component/meta-image): A 1200×630 layout for composing OpenGraph artwork from a title, tagline, icon and optional background accents. Use it to keep social-share image composition consistent across products instead of designing a new canvas for each page. It supplies the layout; your image-generation or screenshot process produces the final asset. [Install](https://ui.kitze.io/r/meta-image.json) — npx shadcn@latest add https://ui.kitze.io/r/meta-image.json
- [Page Header](https://ui.kitze.io/component/page-header): An application header with left/middle/right content slots, optional scroll-fixed positioning and a shared drawer-menu trigger. Use it to keep header sizing and mobile navigation composition consistent across screens instead of rebuilding header and drawer wiring together. [Install](https://ui.kitze.io/r/page-header.json) — npx shadcn@latest add https://ui.kitze.io/r/page-header.json
- [Picked Icon](https://ui.kitze.io/component/picked-icon): Render a saved IconValue independently of the picker, applying its foreground, background and frame. Only the named icon is loaded; trusted preloaded iconData supports immediate or offline rendering. Use it on normal pages so displaying one saved icon does not import picker UI or a search catalog. [Install](https://ui.kitze.io/r/picked-icon.json) — npx shadcn@latest add https://ui.kitze.io/r/picked-icon.json
- [Picker Popover](https://ui.kitze.io/component/picker-popover): The shared popover-on-desktop and bottom-drawer-on-mobile container for picker controls. Use it when building another picker that should follow the same responsive opening and closing behavior, instead of duplicating overlay and trigger wiring. [Install](https://ui.kitze.io/r/picker-popover.json) — npx shadcn@latest add https://ui.kitze.io/r/picker-popover.json
- [Polar Checkout Button](https://ui.kitze.io/component/polar-checkout-button): A purchase call-to-action that builds a Polar checkout redirect from checkoutUrl and productId, with price text and a pending state. Use it for the existing checkout flow instead of rebuilding redirect and loading-button markup. It does not create products or validate payment completion. [Install](https://ui.kitze.io/r/polar-checkout-button.json) — npx shadcn@latest add https://ui.kitze.io/r/polar-checkout-button.json
- [Popover](https://ui.kitze.io/component/popover): Kitze UI’s styled Base UI primitives for anchored panels. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/popover.json) — npx shadcn@latest add https://ui.kitze.io/r/popover.json
- [Radio Group](https://ui.kitze.io/component/radio-group): Kitze UI’s styled Base UI primitives for single-choice groups. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/radio-group.json) — npx shadcn@latest add https://ui.kitze.io/r/radio-group.json
- [Responsive Context Menu](https://ui.kitze.io/component/responsive-context-menu): A context-menu wrapper that adapts right-click actions to the mobile drawer presentation. Use it when the same actions need desktop context-menu and touch access, so content and dismissal rules stay shared instead of being duplicated. [Install](https://ui.kitze.io/r/responsive-context-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/responsive-context-menu.json
- [Responsive Dialog](https://ui.kitze.io/component/responsive-dialog): The standard dialog wrapper with bottom-drawer behavior enabled on mobile through KitzeUIProvider. It delegates content and actions to SimpleDialog so callers share one API across desktop and touch layouts. Use mobileView="keep" when a centered dialog is deliberately needed on both. [Install](https://ui.kitze.io/r/responsive-dialog.json) — npx shadcn@latest add https://ui.kitze.io/r/responsive-dialog.json
- [Responsive Dropdown Menu](https://ui.kitze.io/component/responsive-dropdown-menu): A dropdown wrapper that selects the mobile bottom-drawer presentation using KitzeUIProvider. Use it when an action menu should adapt automatically while keeping one content tree and shared menu-item API, rather than branching between two independently implemented menus. [Install](https://ui.kitze.io/r/responsive-dropdown-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/responsive-dropdown-menu.json
- [Responsive Select Bottom Drawer Menu](https://ui.kitze.io/component/responsive-select-bottom-drawer-menu): The mobile option-list surface used by SimpleSelect. It renders selection choices in a bottom-drawer menu and connects selection to drawer closing. It is an implementation building block; normally install SimpleSelect rather than composing this helper directly. [Install](https://ui.kitze.io/r/responsive-select-bottom-drawer-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/responsive-select-bottom-drawer-menu.json
- [Scrolling Header](https://ui.kitze.io/component/scrolling-header): A header treatment that responds to page scrolling. Use it when a landing-page header needs the same scroll-dependent presentation across routes instead of adding independent scroll listeners and header styles to each page. [Install](https://ui.kitze.io/r/scrolling-header.json) — npx shadcn@latest add https://ui.kitze.io/r/scrolling-header.json
- [Search Bar](https://ui.kitze.io/component/search-bar): A controlled search input with clear/close actions and keyboard handling. Use it to share the same search entry interaction across lists and toolbars; it reports text changes and leaves filtering to the caller. WithSearchBar adds the collapsible trigger and reserved toolbar layout. [Install](https://ui.kitze.io/r/search-bar.json) — npx shadcn@latest add https://ui.kitze.io/r/search-bar.json
- [Segmented Control](https://ui.kitze.io/component/segmented-control): A compact controlled choice between a few values, with text, icon-and-text or icon-only presentation, per-option tooltips and disabled options. It provides shared selection styling and arrow/Home/End keyboard navigation, with optional native-select or bottom-drawer behavior on mobile. Use it for view, theme and mode switches instead of coordinating several independent buttons. [Install](https://ui.kitze.io/r/segmented-control.json) — npx shadcn@latest add https://ui.kitze.io/r/segmented-control.json
- [Select](https://ui.kitze.io/component/select): Kitze UI’s styled Base UI primitives for single-value selects. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/select.json) — npx shadcn@latest add https://ui.kitze.io/r/select.json
- [Simple Accordion](https://ui.kitze.io/component/simple-accordion): An accordion built from an items array rather than repeated item, trigger and content primitives. Use it for FAQs and expandable settings with standard layout and behavior. Choose the accordion primitive when individual items require substantially different composition. [Install](https://ui.kitze.io/r/simple-accordion.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-accordion.json
- [Simple Context Menu](https://ui.kitze.io/component/simple-context-menu): A right-click menu wrapper with optional long-press bottom-drawer behavior on mobile. Supply the trigger content and shared CommonMenuItem components from simple-dropdown-menu so actions behave the same in context menus, dropdowns and drawers. It saves repeating trigger, portal and mobile gesture wiring; use context-menu directly when you need a custom primitive structure. [Install](https://ui.kitze.io/r/simple-context-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-context-menu.json
- [Simple Dialog](https://ui.kitze.io/component/simple-dialog): A dialog with title, description, body and optional submit/cancel actions exposed as props. It centralizes overlay composition, controlled or uncontrolled opening, action layout and optional mobile drawer behavior. Use it for standard dialogs instead of assembling every dialog primitive; use the dialog primitive for a substantially custom structure. [Install](https://ui.kitze.io/r/simple-dialog.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-dialog.json
- [Simple Dropdown Menu](https://ui.kitze.io/component/simple-dropdown-menu): A click-triggered menu that composes the dropdown primitives and shares CommonMenuItem, groups, labels, separators and delete actions with context menus and drawers. Inline confirmation keeps its label width and resets on menu close. Command/Control-click skips inline or ordinary dialog confirmation, but never a required confirmationText. mobileView="bottom-drawer" adapts the same content on touch screens. Use it for ordinary action or account menus to avoid rebuilding closing, link and mobile behavior; use the dropdown-menu primitive for custom composition. [Install](https://ui.kitze.io/r/simple-dropdown-menu.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-dropdown-menu.json
- [Simple Popover](https://ui.kitze.io/component/simple-popover): A trigger-and-content API over the popover primitives. It centralizes open state, positioning and standard content styling for small anchored panels. Use it for ordinary popovers instead of repeating Root, Trigger, Portal, Positioner and Popup composition; use the primitive when the panel needs a custom structure. [Install](https://ui.kitze.io/r/simple-popover.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-popover.json
- [Simple Select](https://ui.kitze.io/component/simple-select): A single-value select driven by an options array, value and onValueChange. It composes the trigger, option list and optional search, and can use a native select or bottom-drawer menu on mobile. Use it to avoid repeating primitive composition and mobile branching for every field; use AdvancedSelect for multiple values. [Install](https://ui.kitze.io/r/simple-select.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-select.json
- [Simple Tooltip](https://ui.kitze.io/component/simple-tooltip): A content prop wrapped around the existing trigger, with optional popover or bottom-drawer presentation on mobile. It removes repetitive tooltip provider, trigger, portal and content markup while retaining focus and hover behavior. Use it for short explanations; choose an interactive popover or drawer when touch users need to inspect richer content. [Install](https://ui.kitze.io/r/simple-tooltip.json) — npx shadcn@latest add https://ui.kitze.io/r/simple-tooltip.json
- [Site Head](https://ui.kitze.io/component/site-head): A shared set of document-head tags for canonical URLs, favicons, SEO, OpenGraph/Twitter cards and optional JSON-LD or DataFast configuration. Use it in sites that manage their head markup directly to avoid repeating metadata conventions. It is not a visible header; use your framework metadata API when that already owns these tags. [Install](https://ui.kitze.io/r/site-head.json) — npx shadcn@latest add https://ui.kitze.io/r/site-head.json
- [Social Login Button](https://ui.kitze.io/component/social-login-button): Provider sign-in actions built on CustomButton, with inline icons for twelve providers and light/dark outline or brand styling. It reuses the shared button behavior and adds provider labels, accessible icon-only presentation and stable loading dimensions. Connect onClick to your auth client; this component saves repeated provider branding and layout code and does not implement OAuth. [Install](https://ui.kitze.io/r/social-login-button.json) — npx shadcn@latest add https://ui.kitze.io/r/social-login-button.json
- [Spinner](https://ui.kitze.io/component/spinner): The shared loading indicator with size and appearance variants. Use it in buttons and pending content so loading visuals remain consistent across the application instead of choosing a different animated icon in every component. [Install](https://ui.kitze.io/r/spinner.json) — npx shadcn@latest add https://ui.kitze.io/r/spinner.json
- [Suspensed](https://ui.kitze.io/component/suspensed): A small Suspense wrapper with a supplied fallback and a force prop for deliberately showing that fallback. Use it when loading-boundary composition is repeated or you need to demonstrate a loading state. It does not fetch data or choose a spinner automatically. [Install](https://ui.kitze.io/r/suspensed.json) — npx shadcn@latest add https://ui.kitze.io/r/suspensed.json
- [Switch](https://ui.kitze.io/component/switch): Kitze UI’s styled Base UI primitives for on/off toggles. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/switch.json) — npx shadcn@latest add https://ui.kitze.io/r/switch.json
- [Tab Panels](https://ui.kitze.io/component/tab-panels): A tabs array API that combines SegmentedControl with animated content panels, controlled or internal selection, and optional mobile select behavior. Use it to avoid manually coordinating selector values and matching panel content. Use SegmentedControl alone when only a value selector is needed. [Install](https://ui.kitze.io/r/tab-panels.json) — npx shadcn@latest add https://ui.kitze.io/r/tab-panels.json
- [Theme Switch Minimal](https://ui.kitze.io/component/theme-switch-minimal): A compact light/dark theme control with an application-supplied value and change handler. Use it to share the visual theme-switch interaction without coupling the control to a theme storage library; the next-themes variant provides that integration when needed. [Install](https://ui.kitze.io/r/theme-switch-minimal.json) — npx shadcn@latest add https://ui.kitze.io/r/theme-switch-minimal.json
- [Theme Switch Minimal with Next-Themes](https://ui.kitze.io/component/theme-switch-minimal-next-themes): The compact theme switch connected to next-themes. Use it in apps already using ThemeProvider to avoid repeating theme reads and setTheme wiring around the visual switch. Use the framework-independent theme switch when another system owns the theme. [Install](https://ui.kitze.io/r/theme-switch-minimal-next-themes.json) — npx shadcn@latest add https://ui.kitze.io/r/theme-switch-minimal-next-themes.json
- [Theme Switch Slider](https://ui.kitze.io/component/theme-switch-slider): A sliding light/dark theme control with an application-supplied value and change handler. Use it to share the visual theme-switch interaction without coupling the control to a theme storage library; the next-themes variant provides that integration when needed. [Install](https://ui.kitze.io/r/theme-switch-slider.json) — npx shadcn@latest add https://ui.kitze.io/r/theme-switch-slider.json
- [Theme Switch Slider with Next-Themes](https://ui.kitze.io/component/theme-switch-slider-next-themes): The sliding theme switch connected to next-themes. Use it in apps already using ThemeProvider to avoid repeating theme reads and setTheme wiring around the visual switch. Use the framework-independent theme switch when another system owns the theme. [Install](https://ui.kitze.io/r/theme-switch-slider-next-themes.json) — npx shadcn@latest add https://ui.kitze.io/r/theme-switch-slider-next-themes.json
- [Tooltip](https://ui.kitze.io/component/tooltip): Kitze UI’s styled Base UI primitives for hover and focus hints. These keep the accessible primitive API while sharing the library’s visual and motion conventions, so installed components match the documentation. Use them for custom compositions; choose a Simple or Responsive wrapper when its smaller prop API already covers the interaction. [Install](https://ui.kitze.io/r/tooltip.json) — npx shadcn@latest add https://ui.kitze.io/r/tooltip.json
- [UI Alert](https://ui.kitze.io/component/ui-alert): Shared confirmation and delete dialogs opened through AlertProvider hooks. They centralize destructive action styling, confirm/cancel callbacks, optional typed confirmationText and transition-aware cleanup. Use them instead of embedding a new confirmation dialog at every delete button; CommonMenuItemDelete can request these dialogs or use inline confirmation. [Install](https://ui.kitze.io/r/ui-alert.json) — npx shadcn@latest add https://ui.kitze.io/r/ui-alert.json
- [With Search Bar](https://ui.kitze.io/component/with-search-bar): Wrap a toolbar title or other content with a search trigger that reveals SearchBar in the same reserved space. It coordinates opening, closing and Escape focus restoration. Use it to avoid rebuilding the expandable toolbar-search pattern around every searchable section. [Install](https://ui.kitze.io/r/with-search-bar.json) — npx shadcn@latest add https://ui.kitze.io/r/with-search-bar.json