---
title: Custom Themes
---

At its heart, the theme system is a collection of [class-name props](classname-input) — one for each element in the calendar. Each prop accepts a `string` or a function that receives `state` and returns a `string`.

For a full index of which props are available on which elements, see [Render Hook Index »](render-hook-index)



### Tailwind

With Tailwind, your theme might end up looking something like this:

```jsx
import { clsx } from 'clsx'

<FullCalendar
  dayRowClass='border border-gray-500'
  dayCellClass={(state) => clsx(
    'border border-gray-400',
    state.isToday && 'bg-yellow-500',
  )}
/>
```

It's easiest to fork an existing theme:

1. Visit [themes.fullcalendar.io](https://themes.fullcalendar.io/)
2. Click one of the **Code** buttons underneath a demo
3. Click "Fork theme source code"
4. Copy and paste **ALL** files into your code editor


### Global CSS

With global CSS, your theme might end up looking something like this:

```jsx
import { clsx } from 'clsx'
import './global-styles.css'

<FullCalendar
  dayRowClass='calendar-row'
  dayCellClass={(state) => clsx(
    'calendar-cell',
    state.isToday && 'calendar-cell-today',
  )}
/>
```

`global-styles.css`:

```css
.calendar-row {
  border: 1px solid #6b7280;
}

.calendar-cell {
  border: 1px solid #9ca3af;
}

.calendar-cell-today {
  background-color: #eab308;
}
```

It's easiest to fork an existing theme:

1. Visit [themes.fullcalendar.io](https://themes.fullcalendar.io/)
2. Click one of the **Code** buttons underneath a demo
3. Click "Fork theme source code"
4. Click Styling: "Global CSS"
5. Copy and paste **ALL** files into your code editor


### CSS Modules

With CSS modules, your theme might end up looking something like this:

```jsx
import { clsx } from 'clsx'
import classNames from './styles.module.css'

<FullCalendar
  dayRowClass={classNames.row}
  dayCellClass={(state) => clsx(
    classNames.cell,
    state.isToday && classNames.cellToday,
  )}
/>
```

`styles.module.css`:

```css
.row {
  border: 1px solid #6b7280;
}

.cell {
  border: 1px solid #9ca3af;
}

.cellToday {
  background-color: #eab308;
}
```

It's easiest to fork an existing theme:

1. Visit [themes.fullcalendar.io](https://themes.fullcalendar.io/)
2. Click one of the **Code** buttons underneath a demo
3. Click "Fork theme source code"
4. Click Styling: "CSS Module"
5. Copy and paste **ALL** files into your code editor