A ShadCN-styled Ethiopian DatePicker React component using kenat.
# Ethiopian Date Picker (ShadCN Styled)
A modern, lightweight, and customizable Ethiopian calendar date picker built with React, ShadCN/UI, Tailwind CSS, and kenat.
📅 Supports Ethiopian & Gregorian calendar views
🎨 Beautifully styled using ShadCN components
⚡️ Fast and fully typed with TypeScript
📦 Easy to integrate in any React/Next.js app
---
## ✨ Features
- Ethiopian and Gregorian calendar dual display
- Styled with Tailwind + ShadCN
- Easily navigable by month
- Lightweight, dependency-aware
- Simple integration into any React or Nextjs project
---
## 📦 Installation
```bash
npm install ethiopian-datepicker-shadcn
```
or
```bash
yarn add ethiopian-datepicker-shadcn
```
---
## 🚀 Usage
```tsx
import React, { useState } from 'react';
import { EthiopianDatePicker } from 'ethiopian-datepicker-shadcn';
function App() {
const [selectedDate, setSelectedDate] = useState(null);
return (
{
setSelectedDate(date);
console.log('Selected Ethiopian Date:', date);
}}
useGeez={false}
/>
);
}
```
> ☝️ Ensure your app is already configured to use Tailwind CSS and ShadCN components.
---
## 🧱 Props
| Prop | Type | Description |
|------------|-----------|---------------------------------------------|
| `value` | `object` | Current selected date (Ethiopian or null) |
| `onChange` | `function`| Callback when a date is selected |
| `useGeez` | `boolean` | makes the number format in Ge'ez (Amharic) |
| `includeGregorian` | `boolean` | includes gregorian format |
---
## 🖼 Screenshot
---
## 🔧 Tailwind Setup (if not yet installed)
Make sure your project is Tailwind-enabled. If not:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
Add to your `tailwind.config.js`:
```js
content: ["./src/**/*.{js,ts,jsx,tsx}"]
```
Add to `index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
---
## 🙏 Credits
- Calendar logic powered by kenat
- UI comp …