• Logo

    Elementra UI

    v0.1.8 - Documentation
  1. Docs
  3. Components/calendar/
5 Theme-Aware Layouts

Calendar Variants

Choose from 5 calendar layouts that automatically adapt to your theme. Built with Elementra UI's Solar Edge color system for perfect light/dark mode support.

Choose Your Theme Style

Each variant uses Elementra UI's color system and automatically adapts to light/dark mode

1

Default (Primary Theme)

Clean professional design using project's primary orange colors with proper theme support. Perfect for business applications.

July

2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
Usage
<Calendar 
  value={date} 
  onValueChange={setDate}
  variant="default"
  mode="single"
/>

Best For:

  • •Business applications with primary branding
  • •Main content areas and hero sections
  • •Corporate websites with orange branding
2

Minimal (Theme Neutral)

Ultra-clean design with theme-aware muted colors. Adapts to light/dark mode automatically.

July

2026

Su
Mo
Tu
We
Th
Fr
Sa
Usage
<Calendar 
  value={date} 
  onValueChange={setDate}
  variant="minimal"
  mode="single"
/>

Best For:

  • •Clean enterprise dashboards
  • •Data management interfaces
  • •Productivity tools requiring focus
3

Card (Accent Theme)

Large professional card layout with accent pink colors. Perfect for booking systems with vibrant theming.

July

2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
Usage
<Calendar 
  value={date} 
  onValueChange={setDate}
  variant="card"
  mode="single"
/>

Best For:

  • •Booking systems with accent highlights
  • •Event planning with pink theming
  • •Creative applications and portfolios
4

Inline (Secondary Theme)

Professional compact horizontal layout with secondary rose colors. Great for forms and toolbars.

July 2026
Su
Mo
Tu
We
Th
Fr
Sa
Usage
<Calendar 
  value={date} 
  onValueChange={setDate}
  variant="inline"
  mode="single"
/>

Best For:

  • •Compact form date inputs
  • •Toolbar components with secondary styling
  • •Navigation bars with rose accents
5

Sidebar (Dark Theme)

Sophisticated sidebar-themed design using project's sidebar color variables. Perfect for navigation areas.

July

2026

S
M
T
W
T
F
S
Usage
<Calendar 
  value={date} 
  onValueChange={setDate}
  variant="sidebar"
  mode="single"
/>

Best For:

  • •Application sidebars and navigation
  • •Dark theme interface components
  • •Professional admin panels