UI ComponentsAçık kaynak bileşen kütüphanesi

Docyrus Uygulamaları İçin Erişilebilir, Temalı Bileşenler

Erişilebilir primitive'ler, hazır bloklar ve veriye duyarlı bileşenlerle tutarlı Docyrus arayüzleri oluşturun.

New Data Source
Source name
Customer Invoices
What this source stores
Optional summary…
Extract fields with AIPull fields from uploaded documents
Cancel
Create
Processing VolumeThis week
2,012+12%
Invoices1,284
Contracts842
Reports721
UI PrimitivesPreview
Dark mode
Notifications
Role
Admin
JDSKMR+4
Active
Recent Extractions
Search…
InvoiceAmountStatus
INV-0847Acme Corp
$12,480Verified
INV-0848Globex Inc
$8,340Pending
INV-0849Stark Ltd
$23,100Verified
INV-0850Wayne Ent
$5,720Review
Notifications
3 new
Batch upload complete47 documents processed
2m ago
New team membersarah@acme.com joined
15m ago
Scheduled exportWeekly report ready
1h ago
Type a command or search…⌘K
Quick Actions
Search documents…⌘K
Upload files⌘U
Invite team member⌘I
View all components

Paylaşımlı bir sistem olmadan UI oluşturmanın maliyeti.

Paylaşımlı bir kütüphane kullanmamak ekipleri yavaşlatır, erişilebilirlik sorunu yaratır ve her ekranı biraz farklı hissettirir.

Sıfırdan Oluşturma

Ekipler, asıl önemli olan ürün işini yayınlamadan önce dialog'ları, menüleri ve toast'ları sürekli yeniden oluşturur.

Erişilebilirlik Açıkları

Özel bileşenler genellikle klavye desteği, etiketler ve odak durumlarını kaçırır, bu da daha sonra uyumluluk riski yaratır.

Tasarım Tutarsızlığı

Paylaşımlı bileşenler olmadan, her ekran farklı boşluk, renk ve etkileşim desenleriyle sonuçlanır.

Tema Kabusları

Renkler sabit kodlandığında, her marka güncellemesi yavaş bir tek tek dosya temizliğine dönüşür.

Dokümante Edilmemiş Desenler

Dokümansız ve örneksiz kütüphaneler, yeni ekip üyelerinin güvenle kullanamadığı kapalı bilgiye dönüşür.

Framework Değişimi

Bir UI yığınına bağlı bileşenler, framework veya araçlarınız değiştiğinde taşınması zordur.

Docyrus UI kütüphanesinin üç katmanı.

Temel kontrollerden veriye duyarlı bileşenlere kadar, kütüphane ekiplerin genellikle elle yeniden oluşturduğu parçaları kapsar.

Tam yığın için tek kütüphane.

Primitive'lerle başlayın, hazır bloklara geçin ve ihtiyacınız olduğunda veriye bağlayın.

Form Primitives
Email
jane@acme.com
Start date
Mar 10, 2026
Required field
Read only
Reset
Submit
Theming & Tokens
Color tokens
Primary
Secondary
Muted
Danger
Card
Light
Dark
--primary: hsl(222 47% 11%)
--radius: 0.625rem
--border: hsl(240 6% 90%)
radius scale

Primitive'ler ve Formlar

Yerleşik doğrulama ve hata durumlarıyla yeniden kullanılabilir input'lar, select'ler, checkbox'lar, date picker'lar ve upload alanları.

Veri Görüntüleme ve Navigasyon

Uygulama genelinde tutarlı kalan tablolar, grafikler, metrik kartları, sidebar'lar, breadcrumb'lar ve komut menüleri.

Tema ve Entegrasyon

Açık ve koyu destekli token tabanlı tema, artık ihtiyacınız olduğunda Docyrus veri bağlamaları.

Headless Primitive'ler, Düzenlenmiş Bloklar

Confirm Action

Are you sure you want to delete this data source? This action cannot be undone.

Cancel
Delete
Focus trap·ESC to close·aria-modal
Dropdown Menu
Edit
Duplicate
Archive
Delete
Badges & Tooltip
DefaultSecondaryOutlineDestructive
Keyboard accessible tooltip

Kontrol gerektiğinde düşük seviyeli primitive'ler kullanın veya hız gerektiğinde hazır bloklarla başlayın.

Varsayılan Olarak Erişilebilir Radix UI primitive'leri üzerine inşa edilmiştir, bu yüzden klavye desteği, roller ve odak yönetimi zaten yerindedir.

Birleştirilebilir API Bileşen içleriyle uğraşmadan slot'ları, variant'ları ve class'ları değiştirin.

Premium Blok Kütüphanesi Boş dosyalar yerine düzenlenmiş dashboard'lar, formlar ve pazarlama bloklarıyla başlayın.


Bir Token Dosyası, Sonsuz Marka Varyantı

Light Mode
Dark Mode
globals.csssingle source
@theme {
--color-primary: hsl(222 47% 11%);
--color-secondary: hsl(240 5% 96%);
--color-accent: hsl(240 5% 96%);
--radius: 0.625rem;
}
Tailwind Utilities
bg-primarytext-muted-foregroundborder-borderrounded-lg
No build step · No runtime overhead · Just CSS

Renk, boşluk, radius ve tipi tek bir token dosyasında tutun. Merkezi olarak değiştirin ve tüm kütüphane güncellensin.

CSS Değişken Token'ları Primary, background, border ve muted gibi temel kararlar CSS değişkenlerinde yaşar.

Açık ve Koyu Mod Bileşenler her iki temayla birlikte gelir ve kutudan çıktığı gibi sistem tercihini takip eder.

Tailwind Native Token'lar Tailwind class'larına eşlenir, böylece ek araçlar olmadan kütüphaneyi temalayabilirsiniz.


Verinizi Tanıyan Bileşenler

InvoicesLive
Pagination included
VendorAmountStatus
Acme Corp$12,480Extracted
Globex Inc$8,340Processing
Stark Ltd$23,100Extracted
Page 1 of 12
Create InvoiceConnected
Vendor name
$0.00
Select category…
Validated · Typed · No API wiring
Revenue Trend
Real-time
$84.2k+18%
Live query connection

Her seferinde plumbing'i yeniden oluşturmadan tablolar, formlar ve grafikler için bileşenleri Docyrus veri kaynaklarına bağlayın.

Veriye Bağlı Tablolar Bir Docyrus kaynağına bağlanın ve ekstra tablo durumu olmadan sıralama, filtreleme ve sayfalama elde edin.

Form'dan Endpoint'e Bağlama Form verisini doğrulanmış, türlenmiş create ve update akışlarıyla bir Docyrus koleksiyonuna gönderin.

Canlı Grafik Abonelikleri Grafikleri sorgu sonuçlarıyla senkronize tutun, böylece dashboard'lar veri değiştikçe güncellenir.

UI Components hakkında sık sorulan sorular

UI Components nedir?+

UI Components, erişilebilir ve veri farkındalıklı arayüz yapı taşlarıyla tutarlı uygulamalar geliştirmek için kullanılan Docyrus UI araç takımıdır.

Geliştiriciler UI Components çözümünü ne zaman kullanmalı?+

Geliştiriciler tabloları, formları, yerleşimleri ve operasyon arayüzlerini sıfırdan yeniden kurmadan daha hızlı yayınlamak istediğinde kullanmalıdır.

Ekipler UI Components ile neler yayınlayabilir?+

Ekipler daha tutarlı bir ön yüz sistemiyle ürün arayüzleri, yönetim yüzeyleri, panolar ve iş akışı arayüzleri yayınlayabilir.

UI Components, diğer Docyrus geliştirici araçlarıyla nasıl birlikte çalışır?+

Docyrus geliştirici yığınının ön yüz katmanı olarak API, auth yardımcıları ve açık kaynak paketlerini tamamlar.

Aynı UI'yi Yeniden Oluşturmayı Bırakın

@docyrus/ui yükleyin, ihtiyacınız olan parçaları seçin, verinizi bağlayın ve tutarlı bir sistemle daha hızlı yayınlayın.