Radix Themes Datepicker

Styles that make react-datepicker beautiful and @radix-ui/themes compatible.

How to install

npm install radix-themes-datepicker-styles

Usage

import "@radix-ui/themes/styles.css";
import "react-datepicker/dist/react-datepicker.css";
import "radix-themes-datepicker-styles";

import { TextField } from "@radix-ui/themes"
import DatePicker from 'react-datepicker';

const App = () => (
    <DatePicker
      showPopperArrow={false}
      popperPlacement="bottom-start"
      customInput={<TextField.Root />}
      placeholderText="Select date"
    />
);

export default App;

Default looks

Improved looks

Light theme

Dark theme