MiniMeUI

TailwindCSS ve TypeScript ile oluşturulmuş modern UI komponentleri.

Kurulum

npm install @deepuic/minimeui
# veya
yarn add @deepuic/minimeui
# veya
pnpm add @deepuic/minimeui

Kütüphane kurulduğunda, otomatik olarak aşağıdaki işlemleri gerçekleştirir:

• Gerekli bağımlılıkları (clsx, tailwind-merge) kurar
• TailwindCSS yapılandırmanızı günceller
• CSS değişkenlerini global CSS dosyanıza ekler

Kurulum scriptini manuel olarak çalıştırmak için:

npx minimeui-setup

Kullanım

import { Button } from "@deepuic/minimeui/button";

// Temel Kullanım
<Button variant="primary">Tıkla</Button>

// Farklı Varyantlar
<Button variant="default">Default</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="subtle">Subtle</Button>

// Farklı Boyutlar
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>

// Köşe Yuvarlamaları
<Button rounded="none">Köşeli</Button>
<Button rounded="sm">Az Yuvarlak</Button>
<Button rounded="md">Orta Yuvarlak</Button>
<Button rounded="lg">Çok Yuvarlak</Button>
<Button rounded="full">Tam Yuvarlak</Button>

// Yükleniyor Durumu
<Button isLoading>Yükleniyor</Button>

// İkonlu Butonlar
<Button leftIcon={<SvgIcon />}>Sol İkonlu</Button>
<Button rightIcon={<SvgIcon />}>Sağ İkonlu</Button>

Otomatik Kurulum Hatası Durumunda

Otomatik kurulum çalışmadıysa, şu adımları manuel olarak takip edin:

1. Bağımlılıkları yükleyin:

npm install clsx tailwind-merge

2. TailwindCSS yapılandırma dosyanıza şu satırı ekleyin:

// tailwind.config.js veya tailwind.config.ts
module.exports = {
  content: [
    // ... diğer içerikler
    "./node_modules/@deepuic/minimeui/**/*.{js,ts,jsx,tsx}"
  ],
  // ... diğer yapılandırmalar
}

3. Global CSS dosyanıza CSS değişkenlerini ekleyin:

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #0066cc;
  --primary-foreground: #ffffff;
  --accent: #f3f4f6;
  --accent-foreground: #111827;
  --input: #e5e7eb;
  --border: #e2e8f0;
  --ring: #0066cc;
  
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --primary: #3b82f6;
    --primary-foreground: #ffffff;
    --accent: #1f2937;
    --accent-foreground: #f9fafb;
    --input: #374151;
    --border: #2d3748;
    --ring: #3b82f6;
  }
}

Geliştirme

# Geliştirme ortamını başlat
npm run dev

# Kütüphaneyi oluştur
npm run build:lib

# Tüm projeyi oluştur
npm run build

Desteklenen Komponentler

• Button: Çeşitli varyant, boyut ve özellikler sunan buton komponenti
  • Varyantlar: default, primary, success, danger, warning, outline, ghost, link, subtle
  • Boyutlar: xs, sm, md, lg, xl
  • Özellikler: rounded, isLoading, leftIcon, rightIcon

Lisans

MIT

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.