@akhatmirzo/ui

Barcha bloklar

Nusxalab ishlatiladigan tayyor bo'limlar: kirish, tariflar, dashboard, jadval va to'liq ilova qolipi.

Bloklar — kutubxona komponentlaridan yig'ilgan tayyor sahifa bo'limlari. Har biri bitta mustaqil fayl: o'z holati bilan, faqat @akhatmirzo/* paketlari va lucide-react ikonkalarini ishlatadi, matnlari o'zbekcha. Faylni loyihangizga ko'chiring va o'zingizga moslang — endi u sizniki.

Barcha bloklar

KirishKirish

Telefon yoki email va parol bilan kirish: "Esda qolsin", Google tugmasi va xato holati.

Ro'yxatdan o'tishKirish

Ism, +998 telefon, parol kuchi ko'rsatkichi va shartlarga rozilik bilan ro'yxatdan o'tish formasi.

SMS kodni tasdiqlashKirish

OtpInput va useCountdown bilan 6 xonali SMS kodni tasdiqlash, qayta yuborish taymeri.

TariflarMarketing

Uchta tarif kartochkasi, oylik/yillik almashtirgich va so'mdagi narxlar.

Dashboard statistikasiDashboard

Sparkline bilan 4 ta KPI kartochka, AreaChart va hududlar bo'yicha ulush.

Profil sozlamalariSozlamalar

Avatar yuklash, ism, email, telefon va RegionSelect — @akhatmirzo/ui/form va zUz bilan validatsiya.

Jadval sahifasiMa'lumotlar

Sarlavha, qidiruv va filtrlar, DataTable, Pagination va bo'sh natija holati.

Buyurtma xulosasiSavdo

Savat ro'yxati, promokod, so'mdagi jami summa va Stepper bilan buyurtma bosqichlari.

Ilova qolipiQolip

AppShell, Sidebar va Header bilan to'liq boshqaruv paneli qolipi.

Qanday qo'shish

Loyihani tayyorlang

Paketlarni o'rnatadi va global CSS ga tokenlarni ulaydi (batafsil — CLI):

npx @akhatmirzo/cli init

Blokni qo'shing

npx @akhatmirzo/cli add login pricing

Fayllar components/blocks/ ga yoziladi. Yoki blok sahifasidagi "Kod" tabidan qo'lda nusxalang.

Sahifada ishlating

app/login/page.tsx
import Login from '@/components/blocks/login';

export default function Page() {
  return <Login />;
}

Moslashuvchanlik

Bloklar viewport emas, konteyner kengligiga (@container) qarab moslashadi: sahifaning tor ustuniga qo'ysangiz ham telefon ko'rinishiga o'tadi. Ko'rinish ramkasidagi kompyuter / planshet / telefon tugmalari yoki o'ng pastki burchakdan tortish bilan tekshirib ko'ring.

Toast xabarlari

Ba'zi bloklar toast() chaqiradi — ilovangiz ildizida <Toaster /> bo'lishi kerak (Toast).

Hooklar

@akhatmirzo/hooks — 27 ta bog'liqliksiz, SSR'da xavfsiz React hook.

Kirish

Telefon yoki email va parol bilan kirish formasi: "Esda qolsin", Google tugmasi va xato holati.