Support Kurdistan Banner ❤️☀️💚

Luxury, minimal banner component to show solidarity with Kurdistan.
Works with React, Next.js, and Vue.

✨ Features

• Luxury minimal design
• RTL & LTR support
• Multi-language (EN, KU, CKB, AR)
• Themes: light, dark, subtle
• Sticky top or footer mode
• Responsive
• Zero dependencies

📦 Installation

npm install support-kurdistan


## ⚛ React / Next.js Usage

import SupportKurdistan from "support-kurdistan/react";

export default function App() {
  return (
    <SupportKurdistan
      locale="ckb"
      theme="dark"
      text=""
      mode="top"
    />
  );
}

##Next.js (App Router)

"use client";

import SupportKurdistan from "support-kurdistan/react";

export default function App() {
  return (
    <SupportKurdistan
      locale="ckb"
      theme="dark"
      text=""
      mode="top"
    />
  );
}


🟢 Vue 3 Usage

<script setup>
import SupportKurdistan from "support-kurdistan/vue";
</script>

<template>
  <SupportKurdistan
    locale="ckb"
    theme="dark"
    mode="top"
  />
</template>

Props

locale
Type: string
Default: en
Description: Language code (en, ku, ckb, ar)

theme
Type: string
Default: light
Description: light, dark, subtle

text
Type: string
Default: auto
Description: Custom text override

mode
Type: string
Default: top
Description: top or footer

⸻

Supported Locales

en - English
ku - Kurdish (Kurmanji)
ckb - Kurdish (Sorani)
ar - Arabic

Themes

light
dark
subtle


Examples

Custom text:
<SupportKurdistan
  text="Kurdistan Forever"
  theme="dark"
/>

Arabic footer:

<SupportKurdistan
  locale="ar"
  theme="subtle"
  mode="footer"
/>

Notes
	•	RTL direction is detected automatically
	•	Works with SSR in Next.js
	•	No CSS import required
	•	Internal styles are scoped
	•	Vue and React versions are framework native


This project was created to raise awareness and express solidarity with the people of Kurdistan through clean and respectful UI.

License

MIT License

Author

Abdulsamad Zuhair
Software Engineer