> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling with Tailwind & CSS

> Restyle any part of the calendar with per-slot classes and inline styles, on the web and on React Native.

<Note>
  Both renderers support per-slot `classNames` / `styles`. On the web they work with any CSS setup;
  on React Native the classes need a Tailwind runtime such as [uniwind](https://docs.uniwind.dev) or
  NativeWind (see [React Native](#react-native-uniwind--nativewind) below). For colours, typography,
  and metrics in one place, see [Theming](/guides/theming).
</Note>

The components render with inline styles driven by the [theme](/guides/theming),
so a zero-config `<Calendar />` looks complete with no stylesheet. But inline styles
beat external CSS, which would leave a Tailwind class powerless to override them. To
close that gap, every styleable part is a named **slot** you can target with a class,
an inline style, or a `data-*` state variant.

## Per-slot classes

Pass `classNames` to hand a slot over to your own CSS or Tailwind:

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView
  date={new Date()}
  classNames={{
    title: "text-center text-2xl font-semibold text-slate-900",
    weekday: "uppercase tracking-wide text-slate-400",
    day: "hover:bg-slate-50",
  }}
/>;
```

The contract, per slot:

* **Structural styles always apply** — the layout the component needs to hold together
  (grid templates, flex, positioning). Your class is added on top; you never have to
  re-implement the grid.
* **Themed styles drop when you pass a class** — colour, typography, spacing, and
  borders step aside so your class wins instead of losing to an inline style.

So `classNames={{ title: "text-center" }}` genuinely centers the title: the built-in
`font-weight`/`font-size`/`padding` are removed for that slot, leaving your class in
full control.

## Per-slot inline styles

For one-off tweaks without a stylesheet, use `styles`. These merge **last**, on top of
the retained defaults (and win over classes):

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView styles={{ title: { textAlign: "center" }, day: { borderRadius: 8 } }} />;
```

## React Native (uniwind / NativeWind)

The native renderer accepts the same `classNames` / `styles` maps with the same
contract. Class strings pass through to the underlying `View`/`Text` elements, where a
Tailwind runtime resolves them; the library ships TypeScript source through the
`react-native` export condition, so your bundler compiles it with your Tailwind setup.
Without such a runtime, `className` is ignored and `styles` still works.

With [uniwind](https://docs.uniwind.dev), no extra configuration is needed beyond its
quickstart; classes you pass from your app code are picked up by Tailwind's automatic
content scanning:

```tsx theme={null}
import { Calendar } from "@super-calendar/native";

<Calendar
  mode="month"
  date={date}
  events={events}
  classNames={{
    title: "text-center text-xl font-bold text-indigo-900",
    weekday: "uppercase tracking-wider text-indigo-400",
    day: "border-t border-r border-indigo-50",
  }}
  onChangeDate={setDate}
  onPressEvent={onPress}
/>;
```

Differences from the web renderer:

* **No `data-*` state variants.** React Native has no CSS selectors; state styling
  (today, selected) stays with the [theme](/guides/theming), or replace the part with
  a custom renderer.
* **Slot names differ where the structure does.** Native adds text slots
  (`dayBadgeText`, `columnHeaderDateText`) because text colour doesn't inherit from a
  parent view, plus `weekendShade` and `daySeparator` for layers the dom styles
  through `dayColumn`. It omits dom-only slots (`dayColumn`, `events`, `chipButton`,
  `chip`, `eventBox`).
* **Event chips and cards are `renderEvent`'s job.** To restyle them with Tailwind,
  pass your own `renderEvent` (or `renderMonthEvent` etc.) built from classed
  components.
* **Animated slots.** `businessHours`, `weekendShade`, `daySeparator`, `event`,
  `nowIndicator`, and `createGhost` render as Reanimated
  views. Their `styles` overrides always apply; whether `className` resolves there
  depends on your runtime's support for Animated components.
* **Pass stable references.** Define the `classNames` / `styles` maps at module scope
  (or wrap them in `useMemo`). Inline literals still work, but they change identity on
  every render, so the calendar re-resolves its slots each time instead of skipping
  the work.

## State variants with `data-*` (web only)

Day cells expose their state as present/absent `data-*` attributes, so you can style
selection, today, and more with Tailwind variants or plain CSS — no JS:

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView
  classNames={{
    day: "data-[today]:bg-blue-600 data-[today]:text-white data-[selected]:ring-2",
  }}
/>;
```

On the month grid, day state sits on both the `day` cell and its `dayBadge`, so a
variant works on either slot (e.g. `dayBadge: "data-[today]:bg-blue-600"`).

| Attribute | On | Present when |
| - | - | - |
| `data-today` | day / badge / col | it is today |
| `data-selected` | day / badge | the day is selected |
| `data-range` | day / badge | the day is inside a selected range |
| `data-weekend` | day / badge / col | the day is a weekend |
| `data-outside` | day / badge | the day belongs to an adjacent month |
| `data-disabled` | day / badge | the day is disabled (`min`/`maxDate`) |
| `data-creating` | day / badge | the day is inside a drag-to-create span |
| `data-drop` | day / badge | a dragged event would land on this day |
| `data-events` | year day | the day holds at least one event |
| `data-dragging` | time-grid event | the event is being dragged |

Every slotted element also carries a stable `data-slot="<name>"` attribute, handy for
CSS selectors (`[data-slot="title"] { … }`) and for tests.

## Slots by component

Each component keeps its own `className` / `style` props for the root element; the
slots below target its inner parts. `Calendar` accepts every slot and forwards them
to whichever view its `mode` renders. `MonthList` uses `weekdays` / `weekday` for its
shared header and forwards the rest to each month's `MonthView`.

### MonthView

Native's `MonthView` supports `title`, `weekdays`, `weekday`, `grid`, `week`, `day`,
`dayBadge`, `dayBadgeText`, `rangeBand`, `more`, and `morePopover`.

| Slot | Element |
| - | - |
| `title` | The "Month yyyy" heading |
| `weekdays` | The weekday header row (grid container) |
| `weekday` | Each weekday label |
| `grid` | The month grid container |
| `week` | Each week row |
| `day` | Each day cell (picker button or events cell) |
| `dayBadge` | The date badge/circle inside a day |
| `rangeBand` | The selection band layer behind a day |
| `events` | The event-chips column inside an events-mode cell |
| `chipButton` | The button wrapping each event chip |
| `chip` | The default event chip |
| `more` | The "+N more" overflow row |
| `morePopover` | The built-in overflow popover card |

### TimeGrid (week / day / N-day)

Native's `TimeGrid` supports `header`, `weekNumber`, `columnHeader`,
`columnHeaderWeekday`, `columnHeaderDate`, `columnHeaderDateText`, the `allDay*`
slots, `hourGutter`, `hourLabel`, `gridLines`, `businessHours`, `backgroundEvent`,
`weekendShade`, `daySeparator`,
`event`, `nowIndicator`, and `createGhost`. The day-header row is a fixed 56px
tall so the columns, the all-day band, and the hour column line up; keep custom
`columnHeader` content within that height.

| Slot | Element |
| - | - |
| `header` | The column-header row |
| `columnHeader` | Each day's header button (`data-today`) |
| `columnHeaderWeekday` | The weekday label in a header |
| `columnHeaderDate` | The date badge in a header (`data-today`) |
| `allDayLane` | The all-day row |
| `allDayLabel` | The "all-day" gutter label (with `showAllDayLabel`) |
| `allDayColumn` | Each day's all-day column |
| `allDayEvent` | An all-day event button |
| `hourGutter` | The hour-axis column |
| `hourLabel` | Each hour label |
| `dayColumn` | Each day column (`data-today`) |
| `gridLines` | The hour/slot grid-line overlay |
| `businessHours` | The closed-hours shade |
| `backgroundEvent` | A `display: "background"` event's band |
| `event` | A timed-event wrapper (`data-dragging`) |
| `eventBox` | The default event box |
| `nowIndicator` | The current-time line |
| `createGhost` | The drag-to-create preview |

### Agenda (schedule)

Native's `Agenda` supports `dayHeader`, `eventRow`, and `empty`.

| Slot | Element |
| - | - |
| `dayHeader` | Each day's header |
| `eventRow` | The button wrapping each event |
| `event` | The default event card |
| `empty` | The "No events" placeholder |

### YearView

Both renderers support `grid`, `month`, `monthTitle`, `weekdays`, `weekday`,
`week`, `day`, `dayBadge`, `rangeBand`, and `eventDot` (plus `dayText` on React
Native).

| Slot | Element |
| - | - |
| `grid` | The twelve-month container |
| `month` | Each mini month |
| `monthTitle` | A mini month's title |
| `weekdays` | A mini month's weekday-initials row |
| `weekday` | Each weekday initial |
| `week` | Each week row of a mini month |
| `day` | Each day cell |
| `dayBadge` | The round today/selected highlight |
| `rangeBand` | The selection band layer behind a day |
| `eventDot` | The dot under a day that holds events |

### MonthList (scrolling picker)

`weekdays` / `weekday` style the shared header; every `MonthView` slot above is
forwarded to each rendered month.

## Combining with the theme

Slots and the [theme](/guides/theming) compose. Reach for the theme to recolour the
whole calendar in one place; reach for slot classes when you want Tailwind (or your
design system) to own a specific part. A common setup: theme for palette, `classNames`
for typography and state variants.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.