$ show hsuanyi-chou/shadcn-ui-expansions
A collection of reusable React UI components built on top of shadcn/ui (Radix UI + Tailwind CSS), along with a Next.js documentation site. The project provides 15+ advanced components not included in the base shadcn/ui library, such as a datetime picker with keyboard navigation, a multiple-selector with async search and grouping, an interactive stepper, infinite scroll, and others. All components are designed to be copied and pasted directly into user projects and are fully customizable. The documentation site demonstrates each component with live previews, usage examples, and prop tables. The codebase is well-structured, modern (Next.js 15, React 19, TypeScript), and actively maintained.
The LLM identified 4 files worth highlighting for reuse:
A fully-featured datetime picker built on react-day-picker with custom time input fields for hours, minutes, seconds, and AM/PM. Supports keyboard arrow navigation, locale from date-fns, year/month dropdowns, granularity (day/hour/minute/second), 12/24 hour cycles, display format customization, disabled state, ref forwarding, controlled/uncontrolled usage, and integration with react-hook-form. The implementation demonstrates advanced patterns for handling time input keystrokes and synchronization between calendar and time picker states.
A highly composable multiple selector component built on cmdk and shadcn/ui's Command component. Features include: async search with debounce, sync search, creatable options, grouping by a custom key, fixed/disabled options, maximum selection limit with callback, hide placeholder when selected, hide clear-all button, custom loading/empty indicators, ref forwarding for selected values and input focus, and full react-hook-form integration. The implementation includes a custom CommandEmpty to fix cmdk rendering issues and demonstrates advanced state management with debounced search.
A fully interactive stepper component for multi-step flows, supporting both horizontal and vertical orientations. Provides context-based state management for step navigation, disabled steps, completed indicators, optional content panels tied to each step, and external controls via imperative methods (nextStep, prevStep, goToStep). The implementation uses React context and compound components (Root, Item, Indicator, Trigger, Title, Description, Separator, Content) for a flexible API. Includes separation lines, checkmark indicators for completed steps, and proper accessibility attributes.
A lightweight infinite scroll component using IntersectionObserver. Handles loading states, hasMore flag, configurable threshold (0-1), rootMargin, reverse mode (for chat-like prepend loading), and properly disconnects observers to avoid duplicate calls. The implementation uses a callback ref pattern to observe the last child element and provides warnings for invalid threshold values. Clean, minimal, and easily reusable.