React Templates & Themes Logo React Templates & Themes
Date Range Picker For Shadcn screenshot

Date Range Picker For Shadcn

Author Avatar Theme by Johnpolacek
Updated: 11 Apr 2024
861 Stars

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison

Github Live Preview

Categories

Tailwind Tailwind Radix ui Shadcn ui

Overview

The DateRangePicker is a reusable component built for Shadcn. It is designed using components from Radix UI and Tailwind CSS. This component provides a dropdown interface that allows users to select or enter a range of dates. It also includes additional options such as preset date ranges and an optional date comparison feature.

Features

  • Dropdown interface for selecting or entering a range of dates
  • Preset date ranges
  • Optional date comparison feature

Installation

To install the DateRangePicker component, you will need to have the following components from Shadcn: Button, Calendar, Label, Popover, and Switch.

If you are using the CLI for installation, you can follow these steps:

  1. Install Radix UI to use the icons required by the DateRangePicker component.
  2. Copy and paste the code from the /src directory for the DateInput and DateRangePicker components into your project.
  3. Customize the code according to your project’s needs.

Summary

The DateRangePicker is a reusable component for Shadcn that provides a dropdown interface for selecting or entering a range of dates. It offers additional features such as preset date ranges and a date comparison option. Installing the component involves installing Radix UI and copying the code into your project.