Körsatiş · pattern

Narx jadvali

Obuna narxlari bölimi (4.169, #56) — FoxUI obunasining özi uçun ham: sarlavha, oylik/yillik almaştirgiç (radio guruh, JS'siz — narxlar [data-period] böyiça almaşadi, plita prujina bilan sirpanadi), tarif kartalari (nom, izoh, narx, CTA, ✓/— imkoniyatlar), tavsiya tarif (data-featured: brend çegarasi, «Eng ommabop» belgisi, data-fx="beam" bilan çegara nuri), şartlar qatori (1 litsenziya = 1 kişi, 3 qurilma; lifetime yöq) va taqqoslaş jadvali (fx-table). Narx hali belgilanmagan bölsa — .fx-pricing__amount[data-soon] («Narx — tez kunda»).

beta0.28.0 dan.fx-pricingFaqat CSS

Narxlar

Bitta obuna — hamma loyihangizga

Oylik yoki yillik tölaysiz. Obuna tugasa ham yuklab olingan versiyalar sizda qoladi.

OylikYillik tejamkor

Oçiq yadro
Boşlaş va sinab köriş uçun — npm'dagi bepul paket.

0 sömdoim bepul0 sömdoim bepul
npm'dan örnatiş
- Tokenlar va asosiy komponentlar
- CLI: init, add, check
- Kontrast va ʻ qöriqçisi
- MCP orqali AI agent
- Yangilaniş taklifi va yangi bloklar
ProEng ommabop
Bitta mutaxassis uçun — hamma komponent, naqş va AI agent.

Narx — tez kunda/ oyNarx — tez kunda/ yilYillik tölovda oylikdan arzonroq
Röyxatga yoziliş
- Oçiq yadrodagi hammasi
- Hamma komponent va marketing naqşlari
- MCP orqali AI agent
- npx foxui update — yangilaniş taklifi
- Komponent sörovi — 1 haftada
Jamoa
Studiya va jamoalar uçun — bir neçta litsenziya, bitta hisob.

Narx — tez kunda/ oy, har kişiNarx — tez kunda/ yil, har kişi
Biz bilan boğlaning
- Pro tarifidagi hammasi
- Litsenziyalarni boşqariş
- Umumiy hisob-kitob
- Ustuvor yordam

1 litsenziya = 1 kişi, 3 qurilma
Umrbod (lifetime) litsenziya yöq
Obuna tugasa ham yuklab olinganlar sizda qoladi

Tariflarni taqqoslaş
Imkoniyat	Oçiq yadro	Pro	Jamoa
Komponentlar	asosiy	hammasi	hammasi
MCP orqali AI agent	yöq	bor	bor
Yangilaniş taklifi	yöq	bor	bor
Komponent sörovi	yöq	1 hafta	1 hafta, ustuvor
Qurilmalar	çeksiz	3	har kişiga 3

Variantlar

Atribut	Qiymatlar	Standart
`data-period`	`month` oylik narx `year` yillik narx	`month`
`data-featured`	`on` tavsiya tarif	`off`

Anatomiya

root.fx-pricingşart
head.fx-pricing__headixtiyoriy
eyebrow.fx-pricing__eyebrowixtiyoriy
title.fx-pricing__titleixtiyoriy
text.fx-pricing__textixtiyoriy
toggle (davr).fx-pricing__toggleixtiyoriy
period (radio yorliği).fx-pricing__periodixtiyoriy
save (tejaş belgisi).fx-pricing__saveixtiyoriy
plans.fx-pricing__plansşart
plan.fx-pricing__planşart
top.fx-pricing__topixtiyoriy
name.fx-pricing__nameşart
badge.fx-pricing__badgeixtiyoriy
desc.fx-pricing__descixtiyoriy
price.fx-pricing__priceşart
amount.fx-pricing__amountixtiyoriy
per.fx-pricing__perixtiyoriy
sub.fx-pricing__subixtiyoriy
cta.fx-pricing__ctaixtiyoriy
features.fx-pricing__featuresixtiyoriy
note (şartlar).fx-pricing__noteixtiyoriy
compare (jadval).fx-pricing__compareixtiyoriy

Holatlar

yillik tanlanganfocus

Klaviatura va kiriş

Tugma	Amal
`← →`	Oylik va yillik orasida
`Tab`	Davr tanlagiçidan tarif tugmalariga

Davr almaştirgiçi — fieldset + legend, içida radio tugmalar: ← → bilan almaşadi, ekran öquvçi «Oylik, 1 dan 2» deydi. Yaşirilgan davr narxi display: none — oʻqilmaydi. Tariflar roʻyxat (ul/li), nomlar h3. Taqqoslash jadvalida ✓/— belgilari aria-hidden, yonida «bor» / «yoʻq» (.fx-sr-only); jadval caption bilan.

Naqş: WAI-ARIA APG radio · rol radiogroup

Kod

AI uçun: qaçon işlatiladi

Işlating

Obuna yoki tarifli mahsulotning narx sahifasi va landing bölimi.
Tariflar orasidagi farqni jadval bilan körsatiş.

Işlatmang

Kabinetdagi joriy tarif va hisob-fakturalar → plan
Bitta mahsulot narxi → stat
Uçtadan ortiq tarif körsatmang — tanlaş qiyinlaşadi.
Yillik narxni oylikka bölib, «/ oy» deb aldamang — davr aniq yozilsin.
Tavsiya tarifni faqat rang bilan ajratmang — «Eng ommabop» sözi ham bölsin.
Narx belgilanmagan bölsa, öylab topilgan raqam qöymang — «Narx — tez kunda».

npx foxui add pricing

<section class="fx-pricing" aria-labelledby="pr-t" data-fx-effects>
  <header class="fx-pricing__head">
    <p class="fx-pricing__eyebrow">Narxlar</p>
    <h2 class="fx-pricing__title" id="pr-t">Bitta obuna — hamma loyihangizga</h2>
    <p class="fx-pricing__text">Oylik yoki yillik tölaysiz. Obuna tugasa ham yuklab olingan versiyalar sizda qoladi.</p>
    <fieldset class="fx-pricing__toggle"><legend class="fx-sr-only">Tölov davri</legend><label class="fx-pricing__period"><input type="radio" name="pr-davr" value="month" checked>Oylik</label><label class="fx-pricing__period"><input type="radio" name="pr-davr" value="year">Yillik <span class="fx-pricing__save">tejamkor</span></label></fieldset>
  </header>
  <ul class="fx-pricing__plans">
    <li class="fx-pricing__plan">
      <div class="fx-pricing__top"><h3 class="fx-pricing__name">Oçiq yadro</h3><p class="fx-pricing__desc">Boşlaş va sinab köriş uçun — npm'dagi bepul paket.</p></div>
      <p class="fx-pricing__price"><span data-period="month"><strong class="fx-pricing__amount">0 söm</strong><span class="fx-pricing__per">doim bepul</span></span><span data-period="year"><strong class="fx-pricing__amount">0 söm</strong><span class="fx-pricing__per">doim bepul</span></span></p>
      <a class="fx-btn fx-pricing__cta" href="#">npm'dan örnatiş</a>
      <ul class="fx-pricing__features"><li>Tokenlar va asosiy komponentlar</li><li>CLI: init, add, check</li><li>Kontrast va ʻ qöriqçisi</li><li data-off>MCP orqali AI agent</li><li data-off>Yangilaniş taklifi va yangi bloklar</li></ul>
    </li>
    <li class="fx-pricing__plan" data-featured data-fx="beam">
      <div class="fx-pricing__top"><h3 class="fx-pricing__name">Pro<span class="fx-pricing__badge">Eng ommabop</span></h3><p class="fx-pricing__desc">Bitta mutaxassis uçun — hamma komponent, naqş va AI agent.</p></div>
      <p class="fx-pricing__price"><span data-period="month"><strong class="fx-pricing__amount" data-soon>Narx — tez kunda</strong><span class="fx-pricing__per">/ oy</span></span><span data-period="year"><strong class="fx-pricing__amount" data-soon>Narx — tez kunda</strong><span class="fx-pricing__per">/ yil</span><span class="fx-pricing__sub">Yillik tölovda oylikdan arzonroq</span></span></p>
      <a class="fx-btn fx-pricing__cta" data-variant="primary" href="#">Röyxatga yoziliş</a>
      <ul class="fx-pricing__features"><li>Oçiq yadrodagi hammasi</li><li>Hamma komponent va marketing naqşlari</li><li>MCP orqali AI agent</li><li>npx foxui update — yangilaniş taklifi</li><li>Komponent sörovi — 1 haftada</li></ul>
    </li>
    <li class="fx-pricing__plan">
      <div class="fx-pricing__top"><h3 class="fx-pricing__name">Jamoa</h3><p class="fx-pricing__desc">Studiya va jamoalar uçun — bir neçta litsenziya, bitta hisob.</p></div>
      <p class="fx-pricing__price"><span data-period="month"><strong class="fx-pricing__amount" data-soon>Narx — tez kunda</strong><span class="fx-pricing__per">/ oy, har kişi</span></span><span data-period="year"><strong class="fx-pricing__amount" data-soon>Narx — tez kunda</strong><span class="fx-pricing__per">/ yil, har kişi</span></span></p>
      <a class="fx-btn fx-pricing__cta" href="#">Biz bilan boğlaning</a>
      <ul class="fx-pricing__features"><li>Pro tarifidagi hammasi</li><li>Litsenziyalarni boşqariş</li><li>Umumiy hisob-kitob</li><li>Ustuvor yordam</li></ul>
    </li>
  </ul>
  <ul class="fx-pricing__note"><li>1 litsenziya = 1 kişi, 3 qurilma</li><li>Umrbod (lifetime) litsenziya yöq</li><li>Obuna tugasa ham yuklab olinganlar sizda qoladi</li></ul>
  <table class="fx-table fx-pricing__compare"><caption class="fx-sr-only">Tariflarni taqqoslaş</caption><thead><tr><th scope="col">Imkoniyat</th><th scope="col">Oçiq yadro</th><th scope="col">Pro</th><th scope="col">Jamoa</th></tr></thead><tbody><tr><th scope="row">Komponentlar</th><td>asosiy</td><td>hammasi</td><td>hammasi</td></tr><tr><th scope="row">MCP orqali AI agent</th><td><span class="fx-pricing__no" aria-hidden="true">—</span><span class="fx-sr-only">yöq</span></td><td><span class="fx-pricing__yes" aria-hidden="true">✓</span><span class="fx-sr-only">bor</span></td><td><span class="fx-pricing__yes" aria-hidden="true">✓</span><span class="fx-sr-only">bor</span></td></tr><tr><th scope="row">Yangilaniş taklifi</th><td><span class="fx-pricing__no" aria-hidden="true">—</span><span class="fx-sr-only">yöq</span></td><td><span class="fx-pricing__yes" aria-hidden="true">✓</span><span class="fx-sr-only">bor</span></td><td><span class="fx-pricing__yes" aria-hidden="true">✓</span><span class="fx-sr-only">bor</span></td></tr><tr><th scope="row">Komponent sörovi</th><td><span class="fx-pricing__no" aria-hidden="true">—</span><span class="fx-sr-only">yöq</span></td><td>1 hafta</td><td>1 hafta, ustuvor</td></tr><tr><th scope="row">Qurilmalar</th><td>çeksiz</td><td>3</td><td>har kişiga 3</td></tr></tbody></table>
</section>

Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-success-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-dialog-width --fx-ease-spring --fx-ease-standard --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-slow --fx-popover-width --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-shadow-sm --fx-size-icon-md --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-disabled --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.

Narx jadvali

Bitta obuna — hamma loyihangizga

Oçiq yadro

ProEng ommabop

Jamoa

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik