Modern Dark Christmas TailwindCSS Components

A collection of beautiful, dark-themed Christmas components built with TailwindCSS and React. Perfect for creating festive web applications with a modern dark theme.

Features

• 🎄 Christmas-themed components
• 🌙 Dark mode support
• ✨ Modern animations and effects
• 🎯 Fully typed with TypeScript
• ⚡ Next.js compatible
• 📱 Responsive design

Installation

npm install modern-dark-christmas-tailwindcss-components
# or
yarn add modern-dark-christmas-tailwindcss-components
# or
pnpm add modern-dark-christmas-tailwindcss-components

Setup

1. Add the following to your tailwind.config.js:

module.exports = {
  content: [
    // ...
    "./node_modules/modern-dark-christmas-tailwindcss-components/**/*.{js,ts,jsx,tsx}"
  ],
  darkMode: "class",
  plugins: [
    require("tailwindcss-animate")
  ]
}

2. Import the styles in your global CSS file:

@import 'modern-dark-christmas-tailwindcss-components/index.css';

Usage

import { ButtonChristmas, CardChristmas, InputChristmas, AlertChristmas } from 'modern-dark-christmas-tailwindcss-components';

export default function MyComponent() {
  return (
    <div className="dark">
      <CardChristmas>
        <h2>Merry Christmas!</h2>
        <InputChristmas placeholder="Enter your wish..." />
        <ButtonChristmas>Send Wish</ButtonChristmas>
        <AlertChristmas>Santa is coming!</AlertChristmas>
      </CardChristmas>
    </div>
  );
}

Components

• ButtonChristmas - Festive buttons with hover effects
• CardChristmas - Decorated card components
• InputChristmas - Styled input fields
• AlertChristmas - Themed alert messages

License

MIT © [nehor]