SLARIVO / CALENDARS

Calendars Components

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

• Slarivo Calendar

  Book a call

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Calendar

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

• 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 Calendar

  Here is Calendar component

• Slarivo Calendar with booked days

  Here is calendar component with booked days

• 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 Calendar

  here is Calendar component

• Slarivo Event Calendar

  The Event Calendar component is a fully interactive calendar built with Shadcn UI components, allowing users to manage events efficiently. Users can select a date on the calendar to view all events scheduled for that day. Events are displayed as cards under the selected date, with the ability to add new events via an input field and button. Each event card includes a Lucide Trash2 icon, enabling users to remove events seamlessly. The component supports multiple events per date, is fully responsive, and works in both light and dark themes. It provides a clean, user-friendly interface for daily scheduling, planning, or tracking important tasks directly within a Shadcn UI-styled calendar.

• 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 Features 11

  Bento features section

• Slarivo Visualize Booking

  Here is bookings vizualizationg component

• 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 Range selection calendar

  Here is shadcn range selection calendar

• 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 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 Calender

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

• 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 Date Badge

  Badge to display date shorten.

• 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 Contribution Graph

  Here is Contribution Graph component

• Slarivo Calendar Date & Time range

  Here is Shadcn Calendar component with Date and Time range picker

• 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 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 Timeline

  A timeline component with sticky header and scroll beam follow.

• 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 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 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 Gantt

  Maps component from the 21st.dev community.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Calendar [React-Area]

  Calendar [React-Area]

• Slarivo Date picker

  A date picker component with range and presets.

• 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 GitHub calendar

  GitHub-style calendar component for Next.js that displays a contribution-like heatmap.

• 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 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 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 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 Calendar

  A calendar component made with framer motion and tailwind css.

• Slarivo Date Picker

  This is date picker

• 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 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 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 Streak Calendar

  Calendars component from the 21st.dev community.

• 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 Radial Week View

  The Radial Week View component is a visually engaging calendar that displays a week in a circular, radial layout. Each hour of the day is represented as a marker around the circle, and events are positioned as arcs or points corresponding to their specific hour. Users can interact with events by clicking them to view details in a popover, add new events for a selected hour, or remove existing events using a Lucide trash icon. The component leverages Shadcn UI components—such as Card, Popover, Button, and Input—to ensure consistent styling, responsiveness, and light/dark mode support. This layout is particularly useful for visualizing time-based events intuitively, giving users a unique perspective of their weekly schedule.

• Slarivo Calendar with week numbers

  Here is shadcn calendar with week numbers

• Slarivo Event Path Calendar

  The Event Path Calendar is a visually engaging timeline-based calendar that represents events along a horizontal path, mimicking a journey or roadmap. Instead of traditional grid layouts, each event is plotted sequentially, allowing users to easily track the flow of activities over time. Users can add events with a title and date, and view details in popovers that include options to delete events. The component supports filters such as “Last Week,” “Last Month,” “Last 3 Months,” and “Last 6 Months,” enabling quick focus on specific time ranges. It features a horizontally scrollable interface for managing large numbers of events, and is fully styled for both light and dark themes using black-and-white visuals. This design is especially suitable for conferences, festivals, project timelines, or any scenario where events need to be presented as part of a sequential journey rather than a conventional calendar grid.

• 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 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 Returns Calendar

  Monthly returns heat grid: years by months, diverging green/red cells scaled by magnitude, plus a compounded year-total column. Hovering a cell reads the month and its return into the header. Light and dark via shadcn theme tokens; respects reduced motion.

• Slarivo Animated Card Chart

  Here is Animated Card Chart 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 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 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 Date Wheel Picker

  Date Pickers component from the 21st.dev community.

• 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 Calendar with localisation

  here is calendar component by Shadcn with language changing functionality

• 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 Calendar input

  Here is calendar input with date picker

• Slarivo Calendar

  Here is Calendar 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 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 Calendar date and time picker

  here is calendar by shadcn with date and time picker

• 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 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 Heatmap Calendar

  The Heatmap Calendar component is a visually intuitive way to track daily activity using Shadcn UI components. Each day of the current month is displayed as a block whose color intensity reflects the number of events scheduled, allowing users to quickly gauge activity at a glance. Clicking or hovering on a day opens a Popover showing all events for that day, with each event displayed inside a Card. Users can add new events via an input field and button, and each event can be removed using the Lucide Trash2 icon. The design is clean, responsive, and works seamlessly in both light and dark themes, providing a simplified, month-focused view without extra or overlapping dates.

• 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 day picker

  Here is shadcn calendar component with day picker

• 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 Day Picker

  An animated day picker calendar component.

• 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 Event Calendar

  Here is Event Calendar component

• 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 With Month and Year Dropdown

  Here is shadcn calendar with month and year

• 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

  Here is Calendar component

• Slarivo Radial Orbital Timeline

  A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Globe

  An autorotating, interactive, and highly performant globe made using WebGL.

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Interactive Selector

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

• Slarivo Feature Carousel

  Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.

• Slarivo Circular Gallery

  Showcase content in an interactive, rotating carousel that keeps users engaged. Ideal for portfolios, product displays, or immersive visual storytelling.

• Slarivo Interactive Globe

  Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.

• Slarivo bento grid 01

  A reusable and responsive bento grid layout with animation

• Slarivo Bento Gallery

  Interactive Image Bento Gallery Description: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Framer Motion, a clean shadcn/ui aesthetic, and an elegant full-screen modal for viewing individual images.

• Slarivo IntegrationHero

  The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously scroll in opposite directions, creating a dynamic carousel effect. The component includes a central call-to-action with a headline, description, and a “Get Started” button, encouraging users to explore integrations.

• 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 Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo Elegant Carousel

  An editorial-style image carousel with a split-panel layout — text content on the left, full-bleed imagery on the right. Features smooth cross-fade transitions, a Ken Burns zoom effect on images, auto-advancing progress indicators with per-slide labels, decorative frame corners, and touch/swipe support. Ideal for fashion lookbooks, portfolio showcases, or luxury brand storytelling.

• Slarivo Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• Slarivo Card Fan Carousel

  Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsive, light/dark mode ready.

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo Interactive Accordion

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

• Slarivo Gallery Grid with Lightbox

  Filterable image gallery with animated lightbox and navigation

• Slarivo Event Countdown Card

  This Event Countdown Card is a fully animated promotional block designed to highlight and convert users for upcoming live events. It features a real-time countdown timer, urgency cues (like “Starts Soon!”), dynamic hover states, and pulsing time units—all wrapped in a theme-aware, motion-optimized layout. It supports image backdrops, attendee stats, and customizable join actions. Perfect for workshop landing pages, webinars, tech meetups, product launches, or any scenario where live countdown urgency drives engagement and conversions.

• 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 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 Stacked Bar Calendar

  The Stacked Bar Calendar is a visually intuitive calendar component built entirely with Shadcn UI components. Each day is represented as a vertical stack of colored bars, where each bar corresponds to an event, and its height and color indicate the event’s category or importance (low, medium, high). Users can filter events by category using a sleek Shadcn Select component, allowing them to focus on specific event types. Clicking a date opens a detailed view of all events scheduled for that day, with options to remove events via a Trash icon. New events can be added dynamically for any selected date with a title and category. The component leverages Shadcn’s Calendar, Card, Popover, Input, Button, and Select components to provide a fully interactive, responsive, and aesthetically consistent interface for managing and visualizing events.

• Slarivo Interactive Folder Gallery

  A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.

• 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 Event Constellation Calendar

  The Event Constellation Calendar is a creative calendar component that visualizes days of the month as glowing “stars” positioned inside a constellation-like map. Each date is placed within a 400×400 canvas, ensuring all stars stay neatly inside the boundary, while connected lines form subtle constellations between consecutive days that have events. Users can navigate between months, add new events, and view or remove existing ones through an interactive popover. The design adapts to both light and dark themes, using soft backgrounds and luminous highlights to maintain readability and aesthetics. This component blends functionality with a visually engaging experience, making it ideal for projects where you want a calendar that feels more dynamic and artistic than traditional grid layouts.

• 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 DatePicker

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

• 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 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 glass-clock

  Braun-inspired glass wall clock UI with real-time Berlin timezone hands, dynamic glass reflections, and an optional Tweakpane control panel for tuning shadows, colors, and motion.

• Slarivo ReUI Event Calendar

  ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Retro Space Shooter GitHub Calendar

  An interactive GitHub contribution calendar that transforms into a playable retro space shooter game. Features smooth canvas animations, spaceship controls, particle explosions, and full dark mode support.

• 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 ReUI Event Calendar

  ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• 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 ReUI Event Calendar

  ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Event Calendar

  ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Event Calendar

  ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• 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 Event RSVP Card

  An event card showing the title, category badge, date, time, location and attendee count with a reserve/RSVP button.

• 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 Appointment Picker Calendar

  A calendar paired with a scrollable list of available time slots for booking appointments.

• 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 Sprint Planner Calendar

  A two-month range calendar for planning sprints, showing the selected start and end dates, total duration in days, and the derived sprint number.

• 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 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.