Using Kitze UI

Install

Initialize shadcn with Base UI and Tailwind CSS, then install the component you need. The CLI installs linked components and dependencies. You own the resulting source.

npx shadcn@latest add https://ui.kitze.io/r/responsive-dialog.json

Simple and Responsive components

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.

Responsive behavior

Wrap your app with KitzeUIProvider and pass isMobile from your breakpoint hook. Place AlertProvider and DialogManager inside it. ResponsiveDialog, DialogManager and pickers use a bottom drawer on mobile by default. SimpleDialog keeps a centered dialog unless mobileView is set to "bottom-drawer". Set mobileView="keep" for an explicit opt-out.

Menus and confirmation

Use CommonMenuItem across dropdowns, context menus and bottom drawers. Its shortcut prop displays a keyboard hint; bind the action separately. CommonMenuItemDelete supports confirm="inline" (or true) for inline “Sure?” while keeping the menu open, confirm="none" (or false) for immediate deletion, and confirm="dialog" by default. Inline confirmation keeps its width and resets when the menu closes, not when focus or the pointer leaves the item.

Set confirmationText to require an exact phrase before the dialog enables deletion. Command/Control-click bypasses inline and ordinary dialog confirmation; it never bypasses a required phrase. Dialog confirmation requires AlertProvider.

Pickers

EmojiPicker returns a Unicode string. IconPicker returns an IconValue with a Lucide name, optional color, background and frame. EmojiIconPicker returns a discriminated emoji/icon value. Render saved icons with PickedIcon. The Lucide name index loads on demand; the grid loads a page of SVGs at a time. PickedIcon fetches only its icon, with optional iconData for preloaded or offline rendering. Emoji code loads only when opened.

Color controls default to 20 paired presets. Use Custom / separate for independent colors, or set colorMode to foreground, background, both or none. allowFrame controls circle, square, rounded and squircle options.

For coding agents

Read llms.txt for the complete component index and install URLs. Copy for agents on a component page includes its link, install command and rationale; the guide's copy button includes this complete guide. Start with the most specific existing component. Prefer its props over duplicating layout, confirmation state or mobile branching. Preserve Base UI semantics and check desktop, mobile, keyboard and reduced-motion behavior when changing the installed source.

Kitze’s branded sections live separately in kitze-reusable-ui, which builds on this registry.