İçeriğe geç
Pixellence Studio

Projects · Araç seti

Pixie UI

Base UI üzerine bir React kiti; kaynağı kopyalayarak ya da paketi içe aktararak kurulur.

Beyaz bir masada boş arayüz kartları ve tek bir altın karo

Pixie UI, bir Pixellence arayüzünün başkasının deposuna girme yoludur. Davranış Base UI’dan gelir. Görünüm, jetonlar ve kurucu bizimdir. Kopyalamak ekibe düzenleyebileceği kod verir. Paket aynı bileşenleri yükseltmeyle verir. İkisi de aynı şeyi çizer.

Çözümler

  • Kaynağa sahip ol ya da yükseltmeleri al

    npx pixie add bir bileşeni ve bağımlılıklarını depoya kopyalar. npm install @pixie-ui/react aynı bileşeni paketten içe aktarır. Seçim düğme başına değil, ekip başınadır.

  • Dosyalar senin klasörlerine iner

    İçe aktarmalar yolda projenin takma adına ve yollarına yeniden yazılır. Kopyalanan bir düğme bu depoya geri işaret etmez. pixie.json takma adı, CSS dosyasını ve bileşenlerin, kancaların, yardımcıların nereye gittiğini kaydeder.

  • Next.js ve Vite aynı kaynağı alır

    Init çerçeveyi algılar. App Router ve Vite aynı bileşen kaynağını alır, böylece bir kit değişikliği ikinci bir uygulama değildir.

  • Yalnızca parçalar değil, sayfalar

    Pano, giriş ve ayar blokları oldukları gibi kurulur ve çalışır. Kayıt defteri npx pixie list ile listelenir. Farklı bir kayıt ya da yerel bir klasör --registry ile verilebilir.

Süreç

  1. 01

    Init

    npx pixie init çerçeveyi algılar, pixie.json yazar ve temayı projenin hâlihazırda kullandığı CSS dosyasına kurar.

  2. 02

    Add

    npx pixie add bileşenleri adlandırır. CLI onları kayıt defterinden çeker, aksi söylenmedikçe npm bağımlılıklarını kurar ve içe aktarmaları yeniden yazar.

  3. 03

    Tema

    Tek bir jeton dosyası açık ve koyu temayı sürer. Flaşsız bir betik sunucuda çizilen uygulamaları kapsar. npx pixie theme bir token-studio dışa aktarımını uygulayabilir, --reset bu ezmeleri kaldırır.

  4. 04

    Ya da kopyayı atla

    @pixie-ui/react’i kur, tema CSS’ini içe aktar, Button ve Card’ı içe aktar. Yükseltmeler depodaki ikinci bir kopyadan değil, paketten gelir.

Teknoloji

  • Davranış için Base UI

    Odak, diyaloglar ve diğer zor etkileşim sorunları Base UI’da kalır. Pixie onları stiller ve birleştirir. Başsız bir kiti yeniden yazmayız.

  • CLI’nin okuyabildiği özel bir kayıt

    Varsayılan kayıt, pixie-ui deposundaki bir yoldur. PIXIE_TOKEN, depo özelken CLI’nin okuyabilmesi için bir GitHub jetonudur. PIXIE_REGISTRY gömülü adresi ezer.

  • pixie.json sözleşmedir

    Kaydı, takma adı, CSS girişini ve bileşen, kanca ve yardımcı yollarını saklar. Init mevcut bir dosyanın üzerine zorlanabilir. Add sormadan üzerine yazabilir.

  • React
  • Base UI
  • Next.js
  • Vite
  • CLI
Tüm projelerSıradaki, EventFlow