Skip to main content
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 or NativeWind (see React Native below). For colours, typography, and metrics in one place, see Theming.
The components render with inline styles driven by the theme, 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:
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):

​
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, no extra configuration is needed beyond its quickstart; classes you pass from your app code are picked up by Tailwind’s automatic content scanning:
Differences from the web renderer:
  • No data-* state variants. React Native has no CSS selectors; state styling (today, selected) stays with the theme, 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 (hourGutter, 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. gridLines sub-hour dividers, 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:
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"). 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.

​
TimeGrid (week / day / N-day)

Native’s TimeGrid supports header, weekNumber, columnHeader, columnHeaderWeekday, columnHeaderDate, columnHeaderDateText, the allDay* slots, hourLabel, gridLines, businessHours, backgroundEvent, weekendShade, daySeparator, event, nowIndicator, and createGhost.

​
Agenda (schedule)

Native’s Agenda supports dayHeader, eventRow, and empty.

​
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 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.