---
title: Shadcn
---

[Shadcn](https://ui.shadcn.com/) is a React component framework.

First, add the FullCalendar registry to your `components.json`:

```json
{
  "registries": {
    "@fullcalendar": "https://shadcn-registry.fullcalendar.io/{name}.json"
  }
}
```

Next, decide upon a theme "flavor". FullCalendar inherits all style variables from the Shadcn theme while also allowing choice in theme flavor. Visit [themes.fullcalendar.io/shadcn](https://themes.fullcalendar.io/shadcn) to see the available flavors (`monarch`, `forma`, `breezy`, `pulse`, and `classic`).


## Standard Plugins

Install a Shadcn event calendar with standard plugins:

```bash
npx shadcn@latest add @fullcalendar/monarch-event-calendar
#                                   ^^^^^^^ YOUR FLAVOR
```

Then, easily render a demo:

```jsx
import { EventCalendarDemo } from '@/components/event-calendar-demo'

<div className='px-5'>
  <EventCalendarDemo />
</div>
```

Feel free to dissect the `event-calendar-demo.tsx` file and delete when done.


## Premium Plugins

Install a Shadcn event calendar with premium plugins (aka "scheduler"):

```bash
npx shadcn@latest add @fullcalendar/monarch-scheduler
#                                   ^^^^^^^ YOUR FLAVOR
```

Then, easily render a demo:

```jsx
import { ResourceTimelineDemo } from '@/components/resource-timeline-demo'
import { ResourceTimeGridDemo } from '@/components/resource-timegrid-demo'

<div className='px-5'>
  <ResourceTimelineDemo />
  <ResourceTimeGridDemo />
</div>
```

Feel free to dissect the `resource-timeline-demo.tsx` and `resource-timegrid-demo.tsx` files and delete when done.