Kitze UI

Kitze UI is not a traditional npm library. Instead, it's a collection of reusable React components designed to be compatible with the shadcn/ui CLI workflow. These components are often abstractions or enhanced versions built on top of standard shadcn/ui components.

Key Characteristics:

• shadcn/ui Compatible: New components can be added to your project using the shadcn CLI add command (assuming a registry is configured).
• Modifiable: Once added, the component code resides directly in your project (typically within src/components). You are encouraged to modify them to fit your specific needs.
• Updateable: You can potentially update components by re-adding them from the source registry via the CLI, though this might overwrite local modifications.

Core Concepts

Automatic Responsiveness

A primary feature of many Kitze UI components is their built-in responsive behavior. They automatically adapt their appearance and functionality for mobile devices:

• Dialogs (SimpleDialog): Transform into bottom sheets.
• Dropdowns/Context Menus (SimpleDropdownMenu): Render as bottom sheet menus.
• Segmented Controls (SegmentedControl): Can switch to native <select> elements or bottom drawers.
• Selects (SimpleSelect): Can switch to native <select> elements or bottom drawers.
• Tooltips (SimpleTooltip): Can switch to popovers or bottom drawers.

isMobile Context

This responsiveness relies on an isMobile flag. Kitze UI does not determine this itself.

• KitzeUIProvider: You must wrap your application (or relevant parts) with KitzeUIProvider (typically done within KitzeUIProviders in src/components/core/KitzeUIProviders.tsx).
• isMobile Prop: This provider requires an isMobile boolean prop. You are responsible for calculating this value, usually based on media queries (e.g., using useMediaQueries from @/context/MediaQueriesContext).
• useKitzeUI Hook: Components access the isMobile value via the useKitzeUI hook.

Integrated Providers

KitzeUIProviders also typically bundles other useful context providers:

• DialogManager: Enables programmatic control over dialogs/modals using the useDialog() hook. This allows opening any component within a standardized dialog/bottom sheet wrapper.
• AlertProvider: Powers confirmation dialogs through hooks like useConfirm() and useConfirmDelete(), reducing boilerplate for common confirmation flows.

Usage

1. Installation: The required components are already set up for you. You can install new components using the shadcn/ui CLI or copy them directly into your components directory.
2. Integration: Ensure KitzeUIProviders is set up correctly in your layout (e.g., src/app/layout.tsx) and receives the isMobile prop.
3. Component Use: Utilize the components like any other React component. Leverage their mobileView props where available to control mobile behavior.
4. Hooks: Use useKitzeUI(), useDialog(), useConfirm(), etc., within components wrapped by the necessary providers.

Key Files

• src/components/KitzeUIContext.tsx: Defines the context, provider, and hook.
• src/components/core/KitzeUIProviders.tsx: Integrates KitzeUIProvider with other application-wide providers.
• Components using useKitzeUI() (e.g., SimpleDropdownMenu, SimpleSelect, AppHeader, etc.)