Modern-dark-christmas-tailwindcss-components NPM

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

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")
  ]
}

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>
  );
}