For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /tr/docs/web/ui-kit.md (or send Accept: text/markdown).

Arayüz kiti ve bloklar

Paylaşılan bileşenler, tasarım token'ları ve blok kataloğu.

Bu kılavuz hakkında sor

Başlamadan önce

İndirdiğiniz supastack projenizi Visual Studio Code'de Dosya → Klasörü Aç'ı kullanarak açın ve ardından Terminal → Yeni Terminal'i seçin. Depo kökü package.json'u, uygulamaları ve paketleri içeren klasördür. Aşağıdaki komutu orada çalıştırın ve terminalini açık bırakın. Bir komut tanınmazsa devam etmeden önce araç kurulum kılavuzunu tamamlayın.

Önce platform eğitimini okuyun. Sunucu, tarayıcı veya telefon isteklerini yanıtlayan uygulama işlemidir. Web, apps/web/.env.local'yi okur, Expo, apps/mobile/.env.local'yi okur ve veritabanı geçiş komutları root .env'yi okur. Veritabanı olmayan/gösterge paneli gösterimi, Postgres'nin taşınmasını gerektiren gerçek/auth hesaplarından ayrıdır. Yalnızca telefona veya masaüstüne yönelik bir ödeme, ayrı olarak çalışan bir Web arka ucuna ihtiyaç duyar.

corepack pnpm --filter @supastack/web dev

Kurulum ve yapılandırma

packages/ui-web paylaşılan ürün bileşenlerini (düğmeler, girdiler, kartlar, rozetler, diyaloglar, kabuk parçaları) tutar ve packages/design-tokens, app-theme.css'in CSS değişkenlerine eşlediği token kaynağıdır. /kit-blocks rotası blok kataloğunu bağlar — ürününüze taşıyabileceğiniz birleşik bölümler.

apps/mobile, eşdeğer yerel primitifler için packages/ui-native'i tüketir; böylece yüzey stilleri platform başına kalırken sözleşmeler paylaşılır.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

Uygulama iş akışı

Ekranları önce paylaşılan bileşenlerden kurun; özel bir öğeye yalnızca kit deseni ifade edemediğinde başvurun. Yeni paylaşılan parçalar, her tema paketi otomatik uygulansın diye token odaklı stillendirmeyle ui-web'e aittir.

Pazarlama bileşenlerini (src/marketing) ürün yüzeylerinden ve tersini dışarıda tutun — iki chrome sistemi bilinçli olarak ayrıdır.

Doğrulama ve sorun giderme

Yeni bileşeni her yoğunluk/yarıçap/yazı tipi hazır ayarına ve en az bir açık ve bir koyu pakete karşı doğrulayın. Klavye odağını, 320px yerleşimi ve azaltılmış hareketi kontrol edin; /settings/appearance üzerindeki kit galerisi en hızlı taramadır.