Mer UI

Vue 3 ve Nuxt 3 için tasarlanmış, token tabanlı modern UI bileşen kütüphanesi.

Özellikler

• Token Tabanlı Tasarım: Tüm renkler, yazı tipleri ve boşluklar CSS değişkeni olarak merkezi yönetilir
• Nuxt 3 Uyumlu: Otomatik bileşen yükleme ve SSR desteği
• Modern UI Bileşenleri: BaseButton, FeatureCard, AppHeader, CodeEditorPreview ve daha fazlası
• Kapsamlı Dokümantasyon: Canlı önizleme, props tabloları ve kaynak kod ile interaktif docs sayfası
• Responsive Tasarım: Mobil öncelikli ve tüm ekran boyutlarında tutarlı

Kurulum

# Projeyi klonla
git clone https://github.com/hacimertgokhan/merui
cd merui

# Bağımlılıkları yükle
pnpm install

# Geliştirme sunucusu
pnpm dev

Kullanım

Bileşenler

<BaseButton variant="primary">Başla</BaseButton>
<FeatureCard title="Başlık" description="Açıklama" />
<AppHeader />

Token Sistemi

Tüm değerler design/variables.css dosyasında tanımlı:

--color-primary: #9D91D6;
--color-mint: #7EC8B8;
--font-plex-serif: 'Poppins', sans-serif;

Proje Yapısı

├── components/     # Vue bileşenleri
├── pages/          # Sayfalar (index, components)
├── design/         # CSS token ve değişkenler
├── assets/         # Stil dosyaları
└── public/         # Statik dosyalar (logo vb.)

Geliştirme

# Geliştirme sunucusu
pnpm dev

# Production build
pnpm build

# Önizleme
pnpm preview

Teknolojiler

• Vue 3 - Composition API
• Nuxt 3 - SSR ve otomatik yükleme
• CSS Variables - Token sistemi

Lisans

MIT License - © 2025 Hacı Mert Gökhan