Getting Started

Initializing @shadcn/ui

Before you can use the calendar component, you need to initialize the @shadcn/ui package. This will add the necessary CSS to your project.

npx shadcn-ui@latest init

Installing @you-got-bud/calendar

Install the calendar compoent with the package manager of your choice.

pnpm add @you-got-bud/calendar

Setting up tailwindcss

We need to tell tailwindcss to include the calendar styles in the build.

module.exports = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './theme/**/*.{ts,tsx}',
    './node_modules/@you-got-bud/calendar/dist/**/*.js'
  ],
  // ... the rest of your config
}

Using the Date Picker

Now you can use the date-picker/calendar in your project refer to the calendar and date-picker for more information.