SLARIVO / DATE PICKERS

Date Pickers Components

Browse 238 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo Date Wheel Picker

  iOS-style date picker with 3D scrollable wheels for day, month, and year. Supports drag, mouse wheel, and keyboard navigation.

• Slarivo Day Picker

  An animated day picker calendar component.

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Universal Date Picker

  The UniversalDatePicker is a powerful and flexible date selection component designed to cover a wide range of use cases in a single, unified interface. It combines the simplicity of single-date selection with the versatility of range selection, while also offering quick-access presets like “Last 7 days,” “Last Month,” or “This Year” for efficiency. To make navigation effortless, it includes a year-selection card for jumping across years quickly, and can easily be extended to support month selection. Built entirely with shadcn/ui and React DayPicker, it provides a modern, accessible, and user-friendly experience that adapts seamlessly to dashboards, analytics, booking systems, and any application where robust date handling is essential. The UniversalDatePicker delivers both convenience and clarity, ensuring users can select dates with confidence and precision.

• Slarivo Datetime Picker

  A customized datetime picker component.

• Slarivo Date Wheel Picker

  Date Pickers component from the 21st.dev community.

• Slarivo Date Picker [react-aria-components]

  A DatePicker combines a DateField and a Calendar popover to allow users to enter or select a date value. A date picker can be built using <input type="date">, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DatePicker helps achieve accessible and international date and time pickers that can be styled as needed.

• Slarivo Date Picker

  Weekly Date Picker A compact and interactive component for selecting a date within a weekly view. It supports keyboard navigation, is fully themeable using shadcn/ui variables, and includes a subtle animation for week transitions.

• Slarivo Date picker

  A date picker component with range and presets.

• Slarivo Date Picker

  This is date picker

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Date Range Picker [react-aria-components]

  A DateRangePicker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date range A date range picker can be built using two separate <input type="date"> elements, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DateRangePicker helps achieve accessible and international date and time range pickers that can be styled as needed.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Calendar with time pressets

  Here is shadcn calendar component with time pressets

• Slarivo Calendar

  A date field component that allows users to enter and edit date.

• Slarivo Calendar [react-aria-components]

  A calendar displays one or more date grids and allows users to select a single date. There is no standalone calendar element in HTML. <input type="date">is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. Calendar helps achieve accessible and international calendar components that can be styled as needed.

• Slarivo Datetime Picker

  A <TimePickerInput /> component built with React and Shadcn UI. - No additional library - Listens to keydown events - Supports arrow navigation - Formats date values - Optimizes mobile keyboard Powered by OpenStatus

• Slarivo Flexi Filter Table

  This Super Mega Filter component is designed to provide a clean yet powerful way to filter large sets of data. Built with shadcn UI, it combines dropdowns, checkboxes, and keyword search in a plain, minimal layout that makes it both practical and reusable. The component is highly configurable—you can easily add, remove, or customize filter categories such as status, category, and date range without touching the core structure. Its lightweight design ensures it blends seamlessly into dashboards, admin panels, or job portals without looking overdone, while still giving users precise control over narrowing down results. By prioritizing usability over fancy styling, this filter is ideal for real-world applications where clarity and efficiency matter most.

• Slarivo Calendar Scheduler

  The CalendarScheduler component is a streamlined scheduling interface that combines a calendar view with a scrollable list of interactive time slots in a single, card-based layout. Built entirely with shadcn/ui, it provides users with an intuitive way to select both date and time without relying on traditional input fields. The left panel offers a familiar calendar for date selection, while the right panel displays customizable, clickable time options, making scheduling faster and more user-friendly. With built-in Reset and Confirm actions, flexible configuration of available slots, and a clean responsive design, CalendarScheduler is ideal for appointment booking, meeting planners, and reservation systems where clarity and ease of use are essential.

• Slarivo Ride Booking Form

  Ride Booking Form This component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easily integrated into any application requiring a booking interface.

• Slarivo Calendar

  A calendar component made with framer motion and tailwind css.

• Slarivo Dropdown Range Date Picker

  The DropdownRangeDatePicker is a popover-based date range selection component that combines intuitive navigation with a compact input interface. Built with shadcn/ui and react-day-picker, it features dropdown menus for selecting month and year, allowing users to jump directly to any part of the calendar without excessive navigation. The selected range is displayed within a styled input button, with long date ranges gracefully truncated to fit while still providing a clean preview of the chosen values. With built-in Clear and Apply actions, this component is ideal for booking systems, scheduling workflows, and dashboards where users need to quickly pick and confirm date ranges in a modern, space-efficient way.

• Slarivo Calendar with event slots

  Here is Shadcn calendar component with event slots

• Slarivo DateTimePicker

  This TreeView component is an interactive file and folder explorer designed with React, Framer Motion, and shadcn/ui. It allows users to easily navigate hierarchical data by expanding or collapsing folders with a simple click on the icon or name. Each file and folder includes a tooltip on hover, ensuring clarity even for long names. The component emphasizes a clean and modern UI, leveraging shadcn’s design system for consistent styling and Framer Motion for smooth animations.

• Slarivo Calendar with localisation

  here is calendar component by Shadcn with language changing functionality

• Slarivo Chart filter

  Here is Shadcn chart filter component

• Slarivo Dropdown Multi Calendar

  The DropdownMultiCalendar is a powerful and user-friendly date selection component that enhances the traditional multi-date calendar with intuitive navigation controls. Built entirely with shadcn/ui, it features dropdown menus for quickly selecting a specific year and month, allowing users to jump instantly to any point in time without scrolling through the calendar. Once dates are chosen, they are displayed as interactive badges that can be individually removed for fine-grained control. The structured card layout, combined with a confirmation action, makes it ideal for applications like booking systems, event planners, and scheduling dashboards where efficient navigation and multi-date management are essential.

• Slarivo Pill Calendar

  The CalendarCard component is a shadcn-styled calendar variant that provides a clean, modern way to pick single dates or ranges. Unlike the standard flat grid design, this component is wrapped inside a subtle card with borders and shadow, giving it a distinct visual hierarchy on the page. Days are displayed in pill-shaped cells, making selections look lighter and more elegant, while the current date is emphasized with a thin primary-colored ring. It supports both single-date and range selection modes, with smooth hover, focus, and disabled states built in. Designed with accessibility through react-aria-components, the CalendarCard integrates seamlessly into shadcn UI projects and can be easily extended with theming, dark mode, or dropdown month/year selectors. This makes it a versatile choice for forms, dashboards, and scheduling interfaces where a compact yet visually appealing calendar is needed.

• Slarivo Dual Calendar

  Here is Dual Calendar by Shadcn

• Slarivo Calendar with disabled days

  Here is modern shadcn calendar with disabled days

• Slarivo Range selection calendar with min.

  Here is range selection calendar with minimum days

• Slarivo Calendar with start end month

  Here is shadcn component with start and end month

• Slarivo Scheduler

  This Scheduler component is a modern and interactive date and time picker built entirely with shadcn/ui. It provides a clean interface where users can schedule events by selecting a date from the calendar and choosing a time using dropdowns for hours and minutes. The scheduling interface is neatly wrapped inside a popover, making the component compact and easy to use without cluttering the page. Events are displayed in a structured card layout with options to edit or delete, ensuring flexibility and control over the schedule. By combining the Calendar, Select, Popover, and Card components from shadcn, this scheduler delivers a unique and user-friendly experience that goes beyond the typical date picker — making it well-suited for dashboards, task managers, booking systems, or productivity tools.

• Slarivo Calendar date and time picker

  here is calendar by shadcn with date and time picker

• Slarivo Multi Select Calendar Card

  The MultiSelectCalendarCard is a modern, interactive date selection component that extends the functionality of a traditional calendar by supporting multiple date selections with an intuitive UI. Built entirely with shadcn/ui, it displays a calendar for picking dates and a dynamic list of selected dates shown as removable chips, giving users clear visibility and control over their choices. Each date can be easily removed from the list with a single click, and the built-in confirmation action ensures selections can be reviewed before submission. This makes the component ideal for use cases like booking systems, availability planners, or event scheduling where users need to select and manage multiple dates efficiently.

• Slarivo Calendar with time picker inline

  Here is shadcn calendar time picker component

• Slarivo Calendar with day button

  Here is shadcn calendar component with today button

• Slarivo Calendar

  A date picker component with range and multi-select support.

• Slarivo Calendar

  A date picker component with range and multi-select support.

• Slarivo Calendar

  A date picker component with range and multi-select support.

• Slarivo Calendar with little-date

  Here is Shadcn Calendar component with little-day

• Slarivo Calendar Twin

  The CalendarTwin is a unique, shadcn-inspired calendar component designed for a richer date selection experience. Unlike traditional single-month calendars, it displays two consecutive months side by side, making it ideal for scenarios like travel booking or scheduling across weeks. What sets it apart is its year selection grid: instead of a simple dropdown, users can toggle into a year view that presents a 12-year block in a calendar-like layout, allowing quick jumps across years with a single click. Built with shadcn’s Button and utility classes, it keeps a consistent design language while remaining fully customizable. Developers can control the selected date via props, configure the year range, and easily integrate it into forms or dashboards. Its clean UI, flexible navigation, and intuitive design make the CalendarTwin a perfect fit for applications where both precision and speed in date selection are essential.

• Slarivo Side Panel Multi Calendar

  The SidePanelMultiCalendar is a unique, planner-style calendar component that makes managing multiple date selections more organized and intuitive. Built with shadcn/ui, it combines a traditional calendar on the left with a dynamic side panel on the right that groups selected dates by month. Users can easily review their selections, remove individual dates, or clear all dates within a specific month for quick adjustments. The scrollable panel ensures that large sets of dates remain manageable, while the built-in confirmation action supports real-world workflows like booking, availability planning, or event scheduling. With its clear two-panel layout and interactive controls, SidePanelMultiCalendar transforms multi-date selection into a structured, user-friendly experience.

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Fullscreen Calendar

  A clean and responsive fullscreen calendar component for React applications. Built with TypeScript and Tailwind CSS, it provides a spacious layout perfect for displaying events or navigating through dates. Features Fullscreen layout with generous day cells for content Easy month navigation with previous/next controls "Today" quick access button Responsive grid layout that adapts to screen size Visual highlighting for current date and selected dates Built with TypeScript and Tailwind CSS Perfect for building event dashboards, scheduling interfaces, or any application requiring a prominent calendar view.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Calendar

  Book a call

• Slarivo Glass Calendar

  A sleek, animated calendar component with a glassmorphism effect. It's interactive, theme-adaptive, and now features a smooth horizontal scroll to navigate the days of the month.

• Slarivo Range Calendar [react-aria-components]

  A RangeCalendar displays a calendar interface that allows users to select a range of dates. There is no standalone range calendar element in HTML. Two separate <input type="date"> elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. RangeCalendar helps achieve accessible and international range calendar components that can be styled as needed.

• Slarivo Mini Calendar

  This is a sleek and responsive mini calendar component built using React and TailwindCSS, designed to display weekly views with a focus on minimalism and clarity. The selected day is highlighted with a bold background and primary accent color (blue-600), while adjacent dates remain subtle for visual hierarchy. Navigation arrows allow users to switch between months smoothly. The component is ideal for dashboards, schedulers, or date-picking interfaces.

• Slarivo Range selection calendar

  Here is shadcn range selection calendar

• Slarivo Calendar

  Here is Calendar component

• Slarivo Multiple months range

  Here is shadcn multiple months with range selection

• Slarivo CalendarLume

  The CalendarLume component is a modern, three-level date picker that allows users to navigate seamlessly from years to months and then down to individual days. Unlike a standard calendar, it begins with a scrollable year grid ranging from 1900 to 2100, letting users quickly select a year. Once a year is chosen, the component transitions smoothly into a month grid, and selecting a month reveals the familiar day calendar. Breadcrumb-style buttons for Year and Month are positioned in the header, making it easy to jump directly between levels without needing back navigation. With a clean layout, subtle animations, and intuitive flow, CalendarLume offers a clear and user-friendly way to explore dates across large ranges of time.

• Slarivo Calendar with range selection

  Here is Range selection shadcn calendar with minimum and maximum days

• Slarivo Avatar Picker

  Animated avatar picker.

• Slarivo Calender

  A comprehensive calendar component for date selection with support for single dates, date ranges, and multiple date selection

• Slarivo Delivery Scheduler

  Delivery Scheduler This component encapsulates the entire scheduling logic, allowing users to select a date and a time slot. It is highly reusable and can be integrated into any form that requires date and time input. The selection indicator is animated using framer-motion to provide a smooth, fluid user experience.

• Slarivo Event Scheduler

  This component is a date scheduling widget built entirely with Shadcn UI. It combines a popover, a calendar picker, and an event list to give users a simple way to plan and manage their schedule. The button serves as a trigger that, when clicked, opens a popover directly below it containing a calendar interface. Users can select a date, and then add events for that day, which are displayed in a clean, card-like layout beneath the picker. Each event also includes a delete option, allowing quick modifications to the schedule.

• Slarivo Calendar With Presets

  This improved BetterCalendar component is a polished and modern variant of the default React DayPicker, styled strictly with shadcn/ui design principles. Instead of using harsh strikethroughs for disabled dates, it introduces a more refined approach by dimming and muting unavailable days, while clearly signaling them with a not-allowed cursor. Selected dates are highlighted with strong, high-contrast backgrounds that adapt to light and dark themes, ensuring maximum clarity for both single-date and range selections. The range highlight uses a pill-like design with softer accents in the middle, giving users a smooth visual flow when choosing date ranges. Today’s date is subtly emphasized with a small dot, following modern calendar UI patterns found in apps like Apple Calendar and Google Calendar. Navigation is intuitive with floating, circular arrow buttons that provide clear hover states without overwhelming the layout. Overall, this component feels premium, accessible, and user-friendly, making it ideal for dashboards, booking systems, and analytics interfaces.

• Slarivo Multi Month Calendar

  This Multi-Month Calendar component is a fully responsive, theme-aware date picker built on top of React DayPicker and styled with shadcn/ui. It supports both single-date selection and range selection, making it versatile for use cases like booking systems, scheduling tools, or analytics dashboards. The component highlights selected dates in a black-and-white scheme for maximum clarity across light and dark themes: single dates and range start/end points are shown with a solid black (light) or white (dark) background, while the range middle days are subtly marked with a lighter gray in light mode and a darker gray in dark mode. The design ensures a clean, modern look with smooth rounded edges for contiguous ranges and accessible focus states. Additional features include configurable number of calendars, year and month dropdowns, and a clear separation of demo and component code for easy integration. This makes it a robust, elegant solution for projects requiring a customizable multi-month calendar UI.

• Slarivo Calendar with booked days

  Here is calendar component with booked days

• Slarivo Calendar Date & Time range

  Here is Shadcn Calendar component with Date and Time range picker

• Slarivo Date Time Input

  The DateTimeInput component provides a simple and intuitive way to select both a date and a time within a single interface. Built entirely with shadcn/ui primitives, it combines a popover calendar for picking dates with a sleek time input field, ensuring consistency and accessibility across applications. Its minimal yet functional design makes it easy to integrate into forms, booking systems, scheduling tools, or any feature that requires precise date and time selection. With a live preview of the chosen values, DateTimeInput enhances usability while maintaining a clean, modern UI.

• Slarivo Calendar with time piker

  Here is calendar by shadcn with time piker

• Slarivo Calendar Date and Time range

  Here is Shadcn Calendar component with Date and Time range picker

• Slarivo Form

  Booking Form Description: A compact and visually polished form for handling travel or accommodation bookings. It features distinct sections for destination, dates, rooms, and guests, with smooth animations powered by Framer Motion. The component is fully responsive and adapts to both light and dark themes using shadcn/ui variables.

• Slarivo Post Scheduler

  Here is Post Scheduler component

• Slarivo Card

  Availability Slot Card This component displays a card with a title and a grid of selectable date slots. It is fully responsive and uses framer-motion for smooth animations.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Event Manager

  A comprehensive event management system with full calendar functionality. Features include multiple view modes (month, week, day, and list), drag-and-drop event scheduling, color-coded categories, and a powerful tagging system. The component supports advanced search and filtering by color, tag, or category, with smooth animations and hover effects that display quick event details. Fully responsive across all devices with touch-friendly controls, horizontal scrolling filters on mobile, and an intuitive interface for creating, editing, and organizing events. Perfect for scheduling applications, project management tools, or any system requiring sophisticated calendar functionality.

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Date Field [react-aria-components]

  A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

• Slarivo Modern Timeline

  A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.

• Slarivo Emoji Picker

  A lightweight, unstyled, and composable emoji picker for React.

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo ThreeD Wall Calendar

  The 3D Wall Calendar component transforms a traditional month view into an immersive, interactive 3D wall of days. Each day is represented as a panel, arranged in a grid-like wall, where users can tilt, scroll, or drag to change the perspective. Events appear as floating markers on these panels and can be clicked to reveal details inside neatly styled popovers. Navigation controls allow switching between months, while an inline form lets users add events directly to specific dates. This design not only makes browsing a month visually engaging but also provides a futuristic feel to event management, blending functionality with a dynamic 3D user experience.

• Slarivo Time picker

  A flexible time picker component with 12-hour format, AM/PM selection, and optional current time button, designed for easy time selection in forms and applications.

• Slarivo Color Selector

  Interactive color picker component.

• Slarivo Meeting Scheduler

  Meeting Scheduler This component provides a comprehensive interface for scheduling events, featuring a responsive calendar for date range selection, time inputs, and additional options, all packaged in a clean, modern card layout.

• Slarivo Calendar input

  Here is calendar input with date picker

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  here is Calendar component

• Slarivo Calendar Date Picker

  Here is shadcn calendar with date picker

• Slarivo Calendar picker in a drawer

  Here is Shadcn Calendar picker in a drawer

• Slarivo Calendar day picker

  Here is shadcn calendar component with day picker

• Slarivo Calendar Planner

  The CalendarPlanner component is a modern, monochrome-styled calendar built for clarity and utility. Designed to display two months side by side, it offers a clean black-and-white aesthetic that adapts seamlessly to both dark and light themes. Unlike traditional calendars, CalendarPlanner provides an additional layer of context by allowing short notes or event details to appear directly under each date, making it ideal for planning schedules, tracking tasks, or highlighting availability. With its toggleable year-grid view, users can easily jump across years without endless navigation. Minimal yet functional, CalendarPlanner is perfect for dashboards, booking systems, or productivity tools where both elegance and information density are essential.

• Slarivo ChronoSelect

  The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSelect includes a built-in year selector alongside the calendar view, allowing users to jump across decades without tedious navigation. Its interface uses shadcn primitives like Popover, Select, and Calendar to ensure consistency across your UI, while providing customization options such as adjustable year ranges and placeholder text. With pill-shaped interactions, smooth transitions, and responsive layout, ChronoSelect feels both elegant and practical—ideal for forms, dashboards, booking systems, or any application where quick and intuitive date selection is essential.

• Slarivo Date Time Input

  Date Time Input Component (Day, Month, Year, Hour, Minute) just like React Aria, unfortunately, i have not yet added Localize Datetime yet. Fully integrated keyboard support

• Slarivo Calendar With Month and Year Dropdown

  Here is shadcn calendar with month and year

• Slarivo Inbox Calendar

  The Inbox-Style Calendar is a modern, list-based scheduling component that organizes events in a format similar to an email inbox. Instead of the traditional grid or wheel layout, events are displayed chronologically under their respective dates, making it perfect for users who manage event-heavy schedules. With the integration of the shadcn UI calendar, users can easily pick dates and add events directly into the timeline, while existing events can be expanded for details or removed with a single action. Its minimal design, smooth animations, and card-based entries ensure clarity and usability, offering an efficient way to manage and visualize busy schedules without overwhelming the user. This component is ideal for productivity apps, dashboards, and any platform that prioritizes quick event management and readability.

• Slarivo Multiple months calendar

  Here is shadcn multiple months calendar

• Slarivo Calendar with disabled weekends

  Here is shadcn modern calendar with disabled weekend

• Slarivo Calendar Variable size

  here is shadcn calendar with variable size

• Slarivo Origami Fold Out Calendar

  The Origami Fold-Out Calendar is an interactive event tracker that combines creativity with utility. Each day of the selected month is displayed as a foldable accordion item, resembling origami sheets that unfold to reveal details. Users can scroll through the month, add events with a title and date, and see them neatly organized under the corresponding day. When expanded, each day shows its scheduled events, which can be removed with a single click. The month dynamically adjusts to display the correct number of days—28, 29, 30, or 31—based on the selected month and year. This design not only provides a visually engaging way to view schedules but also makes it easy to navigate across months, offering both practicality and a playful “fold-out” aesthetic.

• Slarivo Priority Pyramid Calendar

  The Priority Pyramid Calendar is a visually intuitive event management component built with Shadcn UI, designed to help users organize and prioritize their schedules efficiently. Events are stacked in a pyramid-like layout for each day, with larger blocks representing higher-priority tasks, making it easy to identify critical items at a glance. Users can add events with a selected date and priority using an interactive form that includes Shadcn UI inputs, calendar popovers, and priority selectors. The calendar supports multiple overview modes, allowing users to view events for a single month, three months, six months, or all events at once. The layout is compact and scrollable, ensuring that even days with numerous events remain readable, and the design adapts seamlessly to both light and dark themes. This component combines clarity, functionality, and aesthetic appeal, making it ideal for event-heavy schedules where prioritization is key.

• Slarivo Calendar language date picker

  Here is Shadcn Calendar with date picker

• Slarivo Daily Timeline Scheduler

  This enhanced Flexible DateTime Scheduler component is designed with shadcn UI to provide a highly customizable and practical user experience. Unlike traditional date-time pickers, it accepts props to allow external control of the selected date, time, and label, making it more reusable across different applications. The component combines a popover-based calendar for intuitive date selection with dropdowns for choosing hours, minutes, and AM/PM values, ensuring precise time scheduling. Developers can easily integrate it into booking systems, event schedulers, or task planners, while also passing initial values and handling changes externally for better state management. Its modular design, prop-driven flexibility, and clean UI make it a unique, developer-friendly, and user-centric solution for handling date and time inputs in modern React projects.

• Slarivo Flight Search

  Flight Search – Effortless trip planning with clear routes, dates, and passenger details. One tap to find the best flights

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo Calendar with week numbers

  Here is shadcn calendar with week numbers

• Slarivo Wheel Of Time Calendar

  The Wheel of Time Calendar is an interactive, visually engaging calendar component built with React and Shadcn UI. It represents the days of a selected month as segments on a circular wheel, allowing users to rotate the wheel for easy navigation and explore events in a unique, non-linear format. Each day segment displays the date number and highlights days with scheduled events, which can be viewed and removed via popovers. Users can seamlessly switch between months and years using intuitive dropdowns powered by Shadcn UI’s Select component, and the wheel dynamically adjusts to the correct number of days for each month. This component combines aesthetic appeal with practical functionality, offering a modern and interactive approach to visualizing calendar events.

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled dates, min/max boundaries, localization and a configurable first week day.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo Estimated Arrival

  An interactive Estşmated Arrival Date React component displaying an estimated delivery date with expandable details and animations.

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Color Picker

  A @shadcn-ui compatible color picker using @uiw/react-color

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Select

  Reusable select option component built with framer motion and tailwindcss

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo Coach Scheduling Card

  This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookings—all in a single animated, responsive UI. It blends profile preview, dropdown logic, availability grids, and confirmation flows into a seamless component with thoughtful framer-motion effects throughout. Animations are conditionally toggled for accessibility, and the UI adapts to user actions in real-time. Perfect for fitness apps, tutoring platforms, service marketplaces, or any SaaS tool offering human-led bookings with sleek UX.

• Slarivo Modern Payment Form

  This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users can quickly initiate their preferred transaction flow. The modal includes styled input fields for billing and card details, enhancing readability and usability. The layout is visually structured to guide users through the payment process step-by-step, offering both form validation and interactive feedback cues.

• Slarivo Inline Dropdown

  Context menu with hold to click and text input hidden Full credits to : https://github.com/haaarshsingh https://ui.harshsingh.xyz/inline-dropdown

• Slarivo Member Selector

  Team Sections component from the 21st.dev community.

• Slarivo Interactive Hover Button

  A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.

• Slarivo Economic Calendar

  Economic Calendar Description: A responsive, horizontally-scrolling component to display a series of economic events. It features controls for navigation and uses framer-motion for smooth loading and interaction animations. The component is themed using shadcn/ui variables for seamless light and dark mode support.

• Slarivo Executive Impact Carousel

  A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and "Smart Work" logic.

• Slarivo Card

  Event Scheduler Card Compact scheduling widget highlighting upcoming events with date, time, and location. Ideal for calendar apps to provide at-a-glance reminders and quick event actions.

• Slarivo Animated Dropdown

  A dropdown menu with smooth expand/collapse animations and click-outside handling.

• Slarivo Monthly Heatmap Calendar

  This Monthly Heatmap Calendar component is a fully interactive scheduling tool built entirely with shadcn/ui. It allows users to navigate across different months and years using clean dropdown selectors while still displaying a structured grid view of the month. Each day cell supports adding events through a popover form, where users can enter a title and select a specific time. Scheduled events are visually marked with a badge indicator, and event details can be viewed, edited, or deleted directly within the popover. The calendar layout is spaced for clarity, making it easy to scan through days while still keeping event management compact and intuitive. This component is particularly useful for task planning, booking systems, or productivity dashboards, offering a more feature-rich and customizable experience compared to traditional date pickers.

• Slarivo Gradient Selector Card

  This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

• Slarivo Time Picker

  This is a sleek, minimal black-and-white time picker with a floating label and clock icon. It features separate dropdowns for hours and minutes with step-5 intervals, providing fast and user-friendly selection in both light and dark themes.

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo Calendar with presets

  Here is shadcn calendar component with pressets days

• Slarivo New Calendar

  This is calendar component

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible months. Month names are rendered in English.

• Slarivo Apple Calendar Picker

  A premium Apple-inspired Calendar Picker component featuring smooth animations, native-style interactions, month and year navigation, date range selection, dark & light mode support, responsive layouts, and production-ready React + Tailwind CSS architecture.

• Slarivo Orbital Clock

  This component shows the time in form of clock and on hover shows day and date.

• Slarivo Radial Time Picker

  Interactive time inputs featuring a radial weapon wheel and orbit circles for high-speed micro-adjustments. Built with Framer Motion, strict 24h autocompletion, and native dark mode.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, shadcn/ui.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, range.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Right Side Navigation Calendar

  A single-date calendar with month navigation arrows positioned on the right side and left-aligned caption.

• Slarivo Range Select Calendar

  A calendar with a highlighted date range selection styled with rounded pill start/end days and a filled range, useful for booking, reservation and reporting date pickers.

• Slarivo Calendar With Event List

  A date picker calendar in a card with a color-coded daily event list showing meeting titles and time ranges.

• Slarivo Date Range Calendar in Dialog

  A two-month calendar for picking a start and end date range, opened inside a modal dialog from a trigger button.

• Slarivo Calendar with Booked Days

  A single-date calendar that highlights booked days with a custom color and uses rounded day styling for scheduling and availability views.

• Slarivo Calendar with Multiple Day Selection

  A calendar that lets users pick several individual dates at once, with a set of days pre-selected.

• Slarivo Time Off Request Calendar

  A time off request card with leave-type selector chips, a date range calendar, live day count, and a submit action.

• Slarivo Habit Tracker Calendar

  A monthly calendar that highlights completed days with check indicators and shows a running count of days completed this month for habit tracking.

• Slarivo Booking Calendar

  A hotel-style date picker calendar that shows check-in and check-out dates with the number of nights selected.

• Slarivo Calendar with Holidays

  A single-date calendar that highlights US public holidays and disables weekends, showing the selected holiday's name in a panel below.

• Slarivo Week Picker Calendar

  A calendar that selects an entire Monday–Sunday ISO week when you click any day, with a readable week-range label.

• Slarivo Date of Birth Calendar

  A date-of-birth picker calendar with month and year dropdowns that shows the selected date and the calculated age.

• Slarivo Date Picker with Presets

  A single-date calendar picker with quick preset buttons (Today, Tomorrow, Next Monday, In 1 week, etc.) and a formatted selected-date summary.

• Slarivo Calendar with Event Indicators

  A date-picker calendar that marks days with small colored dots for events like meetings, deadlines, and holidays, plus a legend.

• Slarivo Two-Month Range Picker

  A two-month date range picker calendar that shows the selected check-in and check-out dates and counts the number of nights between them.

• Slarivo Appointment Booking Calendar

  A calendar for booking appointments that greys out weekends, past dates, and fully-booked days and shows the chosen slot.

• Slarivo Calendar with Custom Select Dropdown

  A date picker calendar with month and year dropdown navigation powered by a custom select component, letting users jump quickly across a wide range of years.

• Slarivo Calendar with Dropdown Navigation

  A date-picker calendar with dropdown menus to quickly navigate between months and years across a wide date range.

• Slarivo Date Range Calendar

  A calendar preset to range-selection mode for picking a start and end date, with the current week pre-selected.

• Slarivo Date of Birth Field

  A form field with a label, native date input, helper description, and validation error message.

• Slarivo Primitive Calendar

  A styled date-picker calendar with animated month/day transitions, built for selecting single dates, ranges, or multiple dates in forms and date pickers.

• Slarivo Date Picker Disabled

  A date picker button with calendar popover shown in its disabled state, for read-only or locked date fields in a form.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.