Search Themes

Search for themes and categories

GitHub
list-jonas's avatar

Shadcn UI Big Calendar

by list-jonas

Dynamic React Big Calendar styled with Shadcn’s CSS variables for seamless light/dark theme support. Pure CSS, Next.js compatible. Perfect for event scheduling!

124
Feb 6, 2025
open-source
nextjsreacttailwind
WebsiteGitHub
Shadcn UI Big Calendar screenshot

Overview

The Shadcn/UI - Big Calendar Styles project is an open-source demonstration of integrating Shadcn's CSS variables with a React Big Calendar to achieve dynamic theme adaptation. This Next.js application showcases a themed calendar that automatically adjusts its styles based on the selected theme, providing a seamless user experience.

Features

  • Dynamic Theming: Calendar styles adapt to selected theme using Shadcn's CSS variables.
  • Next.js Framework: Built for server-side rendering and optimized performance.
  • React Big Calendar Integration: Showcases React Big Calendar with custom styles.
  • Theme Switching: Includes a theme switcher component for easy theme changes.

Installation

To set up the project locally:

  1. Clone the repository. 
    git clone [repository-url]
  2. Install dependencies. 
    npm install
  3. Run the development server. 
    npm run dev
  4. Open your browser and navigate to http://localhost:3000 to view the application.

Summary

The Shadcn/UI - Big Calendar Styles project is a great resource for developers looking to implement dynamically themed calendars using Shadcn's CSS variables and React Big Calendar. It offers a seamless integration process and a visually appealing user experience.