12.6-bob: UI kutubxonalar — shadcn/ui, MUI, Ant Design

12-QISM — State Management va Data Fetching · 6-mavzu

1. Kirish va motivatsiya

12-QISM davomida state va ma'lumotni boshqarishni o'rgandik. Endi UI'ning o'ziga qaytamiz. Real ilovada siz yuzlab UI komponent — tugma, modal, dropdown, jadval, sana tanlagich (date picker), avtomatik to'ldiruvchi (autocomplete), tab, accordion, tooltip, toast — ishlatasiz. Bularning har birini noldan yozish (11.12'da modal qurganmiz — bilasiz qancha mehnat: portal, focus trap, ESC, a11y, klaviatura, edge case'lar) — sekin, xatoga moyil, va a11y'siz bo'lishi mumkin. Aynan shu sababli UI komponent kutubxonalari mavjud: ular tayyor, sinalgan, a11y'li, professional komponentlar beradi — siz faqat ishlatasiz va loyiha tezligi keskin oshadi.

Lekin UI kutubxonalar har xil falsafaga ega, va to'g'ri tanlash muhim. Bu bobda uch xil yondashuvni ko'ramiz, har biri turli ehtiyojga javob beradi: MUI (Material UI — Google'ning Material Design'i, to'liq stillangan, eng keng) — tez boshlash, izchil dizayn; Ant Design (enterprise — admin panel, dashboard, ko'p komponent, ma'lumotga boy) — murakkab biznes ilovalar; va shadcn/ui (eng zamonaviy, eng tez o'syapti — Radix UI + Tailwind, "copy-paste" — komponentni o'z kodingga nusxalaysiz) — to'liq nazorat va moslashuvchanlik. Bundan tashqari, ularning ostida yotgan headless UI (Radix UI, Headless UI — faqat xulq va a11y, stil yo'q) falsafasini ham tushunamiz — bu zamonaviy UI'ning eng muhim g'oyasi.

Bu bob: nega UI kutubxona (noldan emas — tezlik, a11y), UI kutubxona turlari (styled vs headless vs copy-paste), MUI (Material UI — styled, theme), Ant Design (enterprise, ko'p komponent), shadcn/ui (copy-paste — Radix + Tailwind), headless UI (Radix — xulq, stilsiz), theming va customization (brendga moslash), a11y (UI kutubxonalar beradi), bundle size va tree-shaking, forma integratsiyasi (RHF bilan — 11.10), qaysi qachon (qaror), Tailwind + komponent kutubxona, headless variantlar (Radix/Headless UI/React Aria/Chakra), CSS yondashuvlar (Modules/CSS-in-JS/Tailwind/vanilla-extract — RSC), Tailwind asos, dizayn tizimi (token/CVA), va ikonka (lucide/react-icons). Bu bobda UI kutubxonalar — shadcn/ui, MUI, Ant Design — va butun UI-kutubxona sohasi to'liq, falsafa va amaliy holatda ko'rib chiqiladi.

O'xshatish: UI kutubxona tanlash — bu uy qurishda mebel tanlash. Har komponentni noldan yozish — bu har stulni, stolni, shkafni o'zingiz yog'ochdan yasash (mehnat, vaqt, sifat noaniq). UI kutubxona — tayyor, sifatli mebel. MUI — bu tayyor, butun mebel to'plami (IKEA): bir uslubda, tez yig'iladi, hammasi mos — lekin "IKEA ko'rinishi" (Material Design — uni o'zgartirish biroz mehnat). Ant Design — bu ofis mebeli ombori: katta tanlov, murakkab ish stollari, ma'lumotga boy (jadval, forma) — enterprise/admin uchun, lekin og'ir. shadcn/ui — bu mebel chizmasi va materiallar (DIY usta to'plami): tayyor mebel emas, balki uni o'z uyingizda yasash uchun kod beriladi (nusxalaysiz, o'zgartirasiz, butunlay sizniki) — to'liq nazorat, lekin biroz ko'proq ish. Radix (headless) — bu mebelning mexanizmi (eshik ilgagi, tortma yo'naltirgichi) — funksiya bor, lekin tashqi ko'rinish (rang, shakl) sizga qoldiriladi.

Nega muhim?

• Tezlik — UI kutubxona loyiha qurish tezligini keskin oshiradi (komponentni noldan emas).
• a11y — yaxshi kutubxona a11y'ni (klaviatura, ekran o'quvchi) avtomatik beradi (qo'lda juda qiyin — 11.12).
• Stack'da bor — shadcn/ui va MUI stack'da keltirilgan — ularni o'rganish maqsad.
• Professional natija — sinalgan, izchil, sifatli UI — havaskor ko'rinishdan qutuladi.

2. Nazariya — chuqur tushuntirish

2.1. Nega UI kutubxona va turlari

  HAR KOMPONENTNI NOLDAN YOZISH — sekin, xatoga moyil, a11y'siz (11.12 modal'ni esla):
   Vaqt (modal: portal+focus trap+ESC+a11y+klaviatura — yuzlab qator)
   Xato (edge case'lar — focus trap, scroll lock, ARIA)
   a11y (klaviatura/ekran o'quvchi — juda qiyin, ko'pincha unutiladi)
   Izchilsizlik (har komponent har xil ko'rinadi)

  UI KUTUBXONA — tayyor, sinalgan, a11y'li komponentlar

  3 XIL TUR (falsafa):
  1. STYLED (to'liq stillangan — MUI, Ant Design):
      komponent + stil + xulq HAMMASI tayyor (tez, lekin o'z dizayniga moslash mehnat)
  2. HEADLESS (faqat xulq + a11y, stil YO'Q — Radix, Headless UI):
      funksiya/a11y tayyor, stilni SIZ berasiz (to'liq dizayn nazorati)
  3. COPY-PASTE (kod nusxalanadi — shadcn/ui):
      headless (Radix) + tayyor stil (Tailwind), lekin KODNI o'zingizga nusxalaysiz

   Styled — tez/izchil (MUI/Ant); Headless — nazorat (Radix); Copy-paste — ikkalasi (shadcn)
   a11y — UI kutubxonaning eng katta qiymati (qo'lda juda qiyin — 11.12)

Nega UI kutubxona va turlari — UI kutubxona tanlashning asosi. Har komponentni noldan yozish (11.12 modal'ni esla — portal, focus trap, ESC, a11y, klaviatura, scroll lock — yuzlab qator) — sekin, xatoga moyil (edge case'lar — ARIA, focus boshqaruvi), a11y'siz (klaviatura/ekran o'quvchi — juda qiyin, ko'pincha unutiladi), va izchilsiz (har komponent har xil). UI kutubxona — tayyor, sinalgan, a11y'li komponentlar beradi. Uch xil tur (falsafa): (1) styled (to'liq stillangan — MUI, Ant Design) — komponent + stil + xulq hammasi tayyor (tez boshlash, izchil, lekin o'z dizayningga moslash mehnat); (2) headless (faqat xulq + a11y, stil yo'q — Radix UI, Headless UI) — funksiya va a11y tayyor, stilni siz berasiz (to'liq dizayn nazorati); (3) copy-paste (kod nusxalanadi — shadcn/ui) — headless (Radix) + tayyor stil (Tailwind), lekin komponent kodini o'zingizga nusxalaysiz (to'liq nazorat + tez boshlash). Ikki nuqta: (1) styled — tez/izchil (MUI/Ant), headless — nazorat (Radix), copy-paste — ikkalasi (shadcn); (2) a11y — UI kutubxonaning eng katta qiymati (klaviatura, fokus, ARIA — qo'lda juda qiyin va xatoga moyil — 11.12 — yaxshi kutubxona buni avtomatik beradi). Bu turlar — keyingi bo'limlarda har birini ko'ramiz.

2.2. MUI (Material UI) — styled, theme

  MUI — Google Material Design'ning React implementatsiyasi (eng keng styled kutubxona):
  npm install @mui/material @emotion/react @emotion/styled

  ASOSIY ISHLATISH (tayyor, stillangan komponentlar):
  import { Button, TextField, Dialog } from "@mui/material";

  <Button variant="contained" color="primary" onClick={handleClick}>Saqlash</Button>
  <TextField label="Email" variant="outlined" />
  <Dialog open={open} onClose={handleClose}>...</Dialog>

  THEME (markazlashgan dizayn — brendga moslash):
  import { createTheme, ThemeProvider } from "@mui/material/styles";
  const theme = createTheme({
    palette: { primary: { main: "#1976d2" } },    // brend ranglari
    typography: { fontFamily: "Inter" },
  });
  <ThemeProvider theme={theme}><App /></ThemeProvider>

  ┌────────────────────────────────────────────────────────────┐
  │ MUI: to'liq stillangan + theme (tez, izchil, ma'lumotga boy)│
  │  tez boshlash, ko'p komponent |  Material ko'rinish, bundle│
  └────────────────────────────────────────────────────────────┘

   MUI — eng keng styled kutubxona (tez, izchil, theme bilan brendga moslash)
    Material Design ko'rinish (o'zgartirish mehnat); bundle nisbatan katta

MUI (Material UI) — Google Material Design'ning React implementatsiyasi, eng keng tarqalgan styled kutubxona (@mui/material + Emotion). Asosiy ishlatish — tayyor, to'liq stillangan komponentlar: <Button variant="contained" color="primary">, <TextField label="Email" variant="outlined" />, <Dialog open={open}>, va yuzlab boshqalar (Table, Autocomplete, DatePicker, Snackbar...). Theme — markazlashgan dizayn (brendga moslash): createTheme({ palette: { primary: { main: "#1976d2" } }, typography: {...} }) va <ThemeProvider theme={theme}> — barcha komponent shu temaga bo'ysunadi (ranglar, shrift, oraliqlar). MUI'ning afzalliklari: tez boshlash (hammasi tayyor), izchil dizayn, ko'p komponent, ma'lumotga boy (DataGrid, jadval). Kamchiliklari: Material Design ko'rinish (Google'ning o'ziga xos uslubi — uni butunlay boshqa dizaynga o'zgartirish mehnat talab qiladi), va bundle nisbatan katta. Ikki nuqta: (1) MUI — eng keng styled kutubxona (tez, izchil, theme bilan brendga moslash); (2) kamchiligi — Material ko'rinish (o'zgartirish qiyin) va bundle hajmi. MUI — tez prototip, admin panel, yoki Material Design yoqadigan loyiha uchun ideal (lekin o'ziga xos, noyob dizayn kerak bo'lsa — shadcn afzal).

2.3. Ant Design — enterprise, ko'p komponent

  ANT DESIGN — enterprise (biznes/admin) UI kutubxonasi (eng ko'p komponentli):
  npm install antd

  ASOSIY ISHLATISH (ma'lumotga boy, murakkab komponentlar):
  import { Button, Table, Form, DatePicker, Select } from "antd";

  <Table dataSource={data} columns={columns} pagination={{ pageSize: 10 }} />   // boy jadval
  <Form onFinish={onFinish}>
    <Form.Item name="email" rules={[{ required: true }]}><Input /></Form.Item>
  </Form>

  ANT DESIGN KUCHLI TOMONLARI:
   Ko'p komponent (50+ — jadval, forma, kalendar, transfer, tree, steps...)
   Ma'lumotga boy (murakkab jadval, filtr, saralash — admin/dashboard)
   Enterprise (biznes ilovalar uchun mo'ljallangan — to'liq tizim)
   O'z forma tizimi (Form — validatsiya bilan)

  ┌────────────────────────────────────────────────────────────┐
  │ Ant Design: enterprise (admin/dashboard) — ko'p, boy komponent│
  │  murakkab UI tez (jadval/forma) |  o'ziga xos dizayn, og'ir│
  └────────────────────────────────────────────────────────────┘

   Ant Design — enterprise/admin (ko'p, ma'lumotga boy komponent — jadval/forma)
    o'ziga xos dizayn (Ant ko'rinish), bundle og'ir; o'z forma tizimi (RHF emas)

Ant Design — enterprise (biznes/admin) uchun mo'ljallangan UI kutubxona (antd — eng ko'p komponentli). Asosiy ishlatish — ma'lumotga boy, murakkab komponentlar: <Table dataSource columns pagination /> (boy jadval — filtr, saralash, sahifalash ichki), <Form> + <Form.Item rules={[...]}> (o'z forma tizimi — validatsiya bilan), <DatePicker>, <Select>, <Transfer>, <Tree>, <Steps>. Kuchli tomonlari: (1) ko'p komponent (50+ — admin/dashboard uchun deyarli hamma narsa); (2) ma'lumotga boy (murakkab jadval — qator tanlash, kengaytirish, filtr, saralash — qo'lda juda qiyin); (3) enterprise (biznes ilovalar — to'liq tizim, izchil); (4) o'z forma tizimi (Form — RHF'dan farqli, ichki validatsiya). Kamchiliklari: o'ziga xos "Ant" dizayni (o'zgartirish mehnat), bundle og'ir, va o'z forma tizimi (RHF — 11.10 — bilan ishlash uchun moslash kerak). Ikki nuqta: (1) Ant Design — enterprise/admin (ko'p, ma'lumotga boy komponent — jadval, forma, dashboard — biznes ilovalar uchun ideal); (2) kamchiligi — o'ziga xos dizayn, og'ir bundle, o'z forma tizimi. Ant Design — admin panel, CRM, ERP, ma'lumotga boy dashboard uchun (jadval/forma og'ir bo'lgan loyiha) — tez va to'liq, lekin dizayn erkinligi cheklangan.

2.4. shadcn/ui — copy-paste (Radix + Tailwind)

  shadcn/ui — eng zamonaviy yondashuv (kutubxona EMAS — komponent kodi to'plami):
  npx shadcn@latest init     // sozlash
  npx shadcn@latest add button dialog   // komponentni LOYIHANGGA nusxalaydi

  FALSAFA (boshqalardan tubdan farq):
  - shadcn — npm paket EMAS (import qilinmaydi)
  - komponent KODI sizning loyihangizga NUSXALANADI (src/components/ui/button.tsx)
  - asosi: Radix UI (headless — xulq/a11y) + Tailwind (stil — 1.7)
   komponent SENIKI (o'zgartirasiz, nazorat qilasiz — qora quti emas)

  import { Button } from "@/components/ui/button";   // o'z loyihangdan (npm emas)
  <Button variant="outline">Bosish</Button>

  AFZALLIKLARI:
   To'liq nazorat (kod sizniki — istalgancha o'zgartiring)
   a11y (Radix — sinalgan xulq/a11y)
   Tailwind (1.7 — moslashuvchan stil)
   Bundle — faqat ishlatganing (npm paket og'irligi yo'q)
   Noyob dizayn (sizniki — Material/Ant ko'rinishi emas)

   shadcn/ui — copy-paste (kod loyihangizda — Radix+Tailwind); to'liq nazorat + a11y
   Bugun ENG ZAMONAVIY, eng tez o'sayotgan yondashuv (2026)

shadcn/ui — eng zamonaviy va eng tez o'sayotgan yondashuv (kutubxona emas — komponent kodi to'plami). Falsafasi boshqalardan tubdan farq qiladi: shadcn — npm paket emas (import qilinmaydi), balki komponent kodini sizning loyihangizga nusxalaydi (npx shadcn@latest add button src/components/ui/button.tsx fayli yaratiladi). Asosi: Radix UI (headless — xulq va a11y — 2.5) + Tailwind (stil — 1.7). Natijada komponent sizniki bo'ladi: import { Button } from "@/components/ui/button" (o'z loyihangizdan, npm'dan emas), va uni istalgancha o'zgartirasiz (qora quti emas — kod ko'z oldingizda). Afzalliklari: (1) to'liq nazorat (kod sizniki — har piksel, har xulq o'zgartiriladi); (2) a11y (Radix — sinalgan, professional xulq/a11y); (3) Tailwind (moslashuvchan stil — 1.7); (4) bundle — faqat ishlatganingiz (npm paket og'irligi yo'q — faqat nusxalagan komponent); (5) noyob dizayn (sizniki — Material/Ant'ning o'ziga xos ko'rinishi emas). Ikki nuqta: (1) shadcn/ui — copy-paste (komponent kodi loyihangizda — Radix+Tailwind asosida); to'liq nazorat + a11y + noyob dizayn; (2) bugun eng zamonaviy, eng tez o'sayotgan yondashuv (2026 — ayniqsa Tailwind ishlatgan loyihalarda standart). shadcn — dizayn erkinligi va a11y ikkalasini istasangiz ideal (lekin Tailwind bilishni va biroz ko'proq sozlashni talab qiladi).

2.5. Headless UI — Radix (xulq, stilsiz)

  HEADLESS UI — faqat XULQ va A11Y (stil YO'Q — siz berasiz):
  Radix UI (@radix-ui), Headless UI (@headlessui — Tailwind jamoasi), Ariakit

  FALSAFA — "xulq va ko'rinishni AJRATISH":
  - Komponent FUNKSIYAsi (ochiq/yopiq, fokus, klaviatura, a11y) — KUTUBXONA beradi
  - Komponent KO'RINISHI (rang, shakl, oraliq) — SIZ berasiz (Tailwind/CSS)
   a11y bepul (sinalgan) + dizayn to'liq sizniki

  Radix misol (Dialog — modal):
  import * as Dialog from "@radix-ui/react-dialog";
  <Dialog.Root>
    <Dialog.Trigger>Ochish</Dialog.Trigger>
    <Dialog.Portal>                          {/* portal — 11.12 */}
      <Dialog.Overlay className="..." />      {/* className — SIZ stil berasiz */}
      <Dialog.Content className="...">        {/* focus trap, ESC, a11y — AVTOMATIK */}
        <Dialog.Title>Sarlavha</Dialog.Title>
        <Dialog.Close>Yopish</Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>

   Headless — xulq/a11y kutubxonada, stil sizda (shadcn/ui shu Radix ustiga qurilgan)
   Radix — 11.12'dagi modal'ning (portal/focus/ESC/a11y) tayyor, sinalgan versiyasi

Headless UI — Radix — UI kutubxonalarining eng muhim zamonaviy falsafasi (shadcn/ui ham shunga qurilgan). Headless — komponentning faqat xulq va a11y'sini beradi, stil yo'q (siz berasiz). Falsafa — "xulq va ko'rinishni ajratish": komponent funksiyasi (ochiq/yopiq holat, fokus boshqaruvi, klaviatura navigatsiyasi, ARIA atributlari, focus trap — barcha murakkab a11y — 11.12) kutubxona tomonidan beriladi; komponent ko'rinishi (rang, shakl, oraliq, animatsiya) siz tomonidan (Tailwind yoki CSS). Eng keng — Radix UI (@radix-ui), Headless UI (Tailwind jamoasi), Ariakit. Radix misol (Dialog — modal): <Dialog.Root>, <Dialog.Trigger>, <Dialog.Portal> (portal — 11.12), <Dialog.Overlay className="..."> (className — siz stil berasiz), <Dialog.Content> (focus trap, ESC, a11y — avtomatik). Ya'ni 11.12'da qo'lda yozgan butun modal mantig'i (portal, focus trap, ESC, scroll lock, ARIA) Radix'da tayyor, sinalgan — siz faqat stil berasiz. Ikki nuqta: (1) headless — xulq/a11y kutubxonada, stil sizda (dizayn to'liq erkin + a11y bepul); shadcn/ui aynan shu Radix ustiga Tailwind stilini qo'shgan (copy-paste); (2) Radix — 11.12'dagi modal/dropdown/tooltip'ning tayyor, professional versiyasi (a11y to'liq, edge case'lar hisobga olingan). Headless UI — zamonaviy UI'ning poydevori (dizayn + a11y — ikkalasi).

2.6. Theming va customization

  THEMING — komponentlarni BRENDGA moslash (rang, shrift, oraliq, dark mode):

  MUI (theme obyekti — 2.2):
  createTheme({ palette: { primary: {...}, mode: "dark" }, shape: { borderRadius: 8 } })
   barcha komponent theme'ga bo'ysunadi (markazlashgan)

  Ant Design (ConfigProvider + token):
  <ConfigProvider theme={{ token: { colorPrimary: "#00b96b", borderRadius: 6 } }}>

  shadcn/ui (Tailwind + CSS o'zgaruvchilar — eng moslashuvchan):
  // globals.css — CSS o'zgaruvchilar (theme):
  :root { --primary: 220 90% 56%; --radius: 0.5rem; }
  .dark { --primary: 220 90% 66%; }     // dark mode
   komponent kodidagi Tailwind class'lar shu o'zgaruvchilardan (o'zgartiring — hammasi o'zgaradi)

  DARK MODE (har kutubxonada):
  MUI: palette.mode | Ant: theme.algorithm | shadcn: .dark class + CSS o'zgaruvchi

   Theming — markazlashgan dizayn (brend ranglari, dark mode — bir joydan)
   shadcn eng moslashuvchan (CSS o'zgaruvchi — kod sizniki); MUI/Ant — theme obyekti

Theming va customization — komponentlarni brendga (loyihangning dizayniga) moslash. Har kutubxonaning o'z theming usuli bor. MUI 2.2-bob — createTheme obyekti (palette, typography, shape, mode: "dark") — barcha komponent markazlashgan temaga bo'ysunadi. Ant Design — ConfigProvider + design token'lar (theme={{ token: { colorPrimary: "#00b96b", borderRadius: 6 } }}). shadcn/ui — Tailwind + CSS o'zgaruvchilar (eng moslashuvchan): globals.cssda CSS o'zgaruvchilar (:root { --primary: ...; --radius: ... }, .dark { ... }) — komponent kodidagi Tailwind class'lar shu o'zgaruvchilardan o'qiydi (o'zgartirsangiz — barcha komponent o'zgaradi). Dark mode — har kutubxonada: MUI (palette.mode), Ant (theme.algorithm), shadcn (.dark class + CSS o'zgaruvchi). Ikki nuqta: (1) theming — markazlashgan dizayn (brend ranglari, shrift, dark mode — bir joydan butun ilovaga); (2) shadcn eng moslashuvchan (CSS o'zgaruvchi + kod sizniki — istalgan piksel o'zgartiriladi), MUI/Ant — theme obyekti (markazlashgan, lekin kutubxona chegarasi ichida). Theming — professional, brendli, izchil UI'ning asosi (har komponentga qo'lda rang berish o'rniga — markazdan).

2.7. a11y va bundle size

  A11Y — UI kutubxonaning ENG KATTA qiymati (qo'lda juda qiyin — 11.12):
   Klaviatura navigatsiya (Tab, Enter, Esc, o'qlar — dropdown/menu)
   Focus boshqaruvi (modal — focus trap; menu — focus o'tish)
   ARIA atributlari (role, aria-*, ekran o'quvchi)
   MUI/Ant/Radix(shadcn) — a11y AVTOMATIK (yillar sinalgan)
   Noma'lum/kichik kutubxona — a11y BO'LMASLIGI mumkin (tekshir!)

  BUNDLE SIZE (kutubxona ilovani qancha "og'irlashtiradi"):
  - MUI — nisbatan katta (Emotion + ko'p komponent)
  - Ant Design — og'ir (ko'p komponent, ma'lumotga boy)
  - shadcn/ui — ENG YENGIL (faqat nusxalagan komponent — npm og'irligi yo'q)
  - Radix — yengil (headless — stilsiz)

  TREE-SHAKING (faqat ishlatilganni olish):
  import { Button } from "@mui/material";   // tree-shaking (faqat Button)
   To'g'ri import (named) — ishlatilmagan komponentlar bundle'ga kirmaydi

   a11y — UI kutubxona tanlashda eng muhim mezon (qo'lda juda qiyin)
   Bundle — shadcn/Radix eng yengil; MUI/Ant og'irroq (lekin tree-shaking)

a11y va bundle size — UI kutubxona tanlashning ikki muhim mezoni. a11y — UI kutubxonaning eng katta qiymati (qo'lda juda qiyin — 11.12): klaviatura navigatsiya (Tab, Enter, Esc, o'qlar — dropdown/menu/tab'da), focus boshqaruvi (modal — focus trap; menu — focus o'tish), ARIA atributlari (role, aria-* — ekran o'quvchi uchun). Yetuk kutubxonalar (MUI, Ant Design, Radix/shadcn) bularni avtomatik beradi (yillar davomida sinalgan). Lekin noma'lum/kichik kutubxona a11y'ni bermasligi mumkin — tanlashdan oldin tekshir (klaviatura bilan sina). Bundle size (kutubxona ilovani qancha og'irlashtiradi): MUI — nisbatan katta (Emotion + ko'p komponent), Ant Design — og'ir (ko'p, ma'lumotga boy komponent), shadcn/ui — eng yengil (faqat nusxalagan komponent — npm paket og'irligi yo'q), Radix — yengil (headless — stilsiz). Tree-shaking — faqat ishlatilganni bundle'ga olish (import { Button } from "@mui/material" — named import — ishlatilmagan komponentlar kirmaydi). Ikki nuqta: (1) a11y — UI kutubxona tanlashda eng muhim mezon (qo'lda juda qiyin va xatoga moyil); (2) bundle — shadcn/Radix eng yengil, MUI/Ant og'irroq (lekin tree-shaking bilan kamayadi). a11y va bundle — performance va inklyuzivlik (har kim ishlata olishi) uchun muhim.

2.8. Forma integratsiyasi (RHF bilan)

  UI KUTUBXONA + REACT HOOK FORM 11.10-bob — komponentlarni RHF'ga ulash:

  MUI/shadcn/Radix — controlled komponentlar  Controller (11.10: 2.9):
  import { Controller } from "react-hook-form";
  import { TextField } from "@mui/material";

  <Controller
    name="email"
    control={control}
    render={({ field, fieldState }) => (
      <TextField {...field} label="Email" error={!!fieldState.error}
                 helperText={fieldState.error?.message} />   // xato ko'rsatish (11.10: 2.8)
    )}
  />

  shadcn/ui — RHF bilan TAYYOR integratsiya (Form komponentlari):
  <FormField name="email" control={form.control} render={({ field }) => (
    <FormItem><FormLabel>Email</FormLabel><FormControl><Input {...field} /></FormControl>
    <FormMessage /></FormItem>   // shadcn Form — RHF+Zod uchun mo'ljallangan
  )} />

  Ant Design — O'Z forma tizimi (RHF emas — alohida):
  <Form.Item name="email" rules={[{ required: true }]}><Input /></Form.Item>

   MUI/shadcn/Radix  RHF Controller (11.10: 2.9); shadcn — tayyor Form integratsiya
   Ant Design — o'z forma tizimi (RHF bilan moslash kerak yoki Ant Form ishlat)

Forma integratsiyasi (RHF bilan) — UI kutubxona komponentlarni React Hook Form 11.10-bob bilan ulash. MUI/shadcn/Radix komponentlari ko'pincha controlled (value/onChange) — shuning uchun RHF bilan Controller orqali ulanadi (11.10: 2.9): <Controller name="email" control={control} render={({ field, fieldState }) => <TextField {...field} error={!!fieldState.error} helperText={fieldState.error?.message} />} /> — field RHF'ni ulaydi, fieldState.error xato ko'rsatadi (11.10: 2.8). shadcn/ui — RHF + Zod bilan tayyor integratsiya (shadcn'ning Form komponentlari — FormField, FormItem, FormLabel, FormControl, FormMessage — aynan RHF uchun mo'ljallangan — eng qulay). Ant Design — o'z forma tizimi (Form.Item + rules — RHF emas, ichki validatsiya) — RHF bilan ishlash uchun moslash kerak yoki Ant'ning o'z forma'sini ishlatasiz. Ikki nuqta: (1) MUI/shadcn/Radix RHF Controller (11.10: 2.9 — controlled komponent); shadcn — RHF+Zod uchun tayyor Form (eng qulay birikma); (2) Ant Design — o'z forma tizimi (RHF bilan birga ishlash cheklangan — yoki Ant Form, yoki moslash). Forma — UI kutubxonani tanlashda muhim omil (agar RHF + Zod ishlatsangiz — 11.10 — shadcn eng tabiiy, MUI Controller bilan, Ant alohida).

2.9. Qaysi qachon — qaror

  UI KUTUBXONA TANLASH (qaror):

  ┌──────────────┬─────────────────────────────────────────────┐
  │ MUI          │ tez prototip, Material Design yoqsa, ko'p     │
  │ (Material)   │ komponent kerak (admin/SaaS — izchil, tez)   │
  │ Ant Design   │ enterprise/admin (ma'lumotga boy — murakkab  │
  │              │ jadval/forma); o'z forma tizimi               │
  │ shadcn/ui    │ NOYOB dizayn + a11y + nazorat (Tailwind      │
  │ (Radix+TW)   │ loyiha) — ENG ZAMONAVIY (2026 standart)      │
  │ Radix (head- │ to'liq dizayn nazorati (stilni o'zing) +     │
  │  less)       │ a11y; kutubxona chegarasiz                 │
  └──────────────┴─────────────────────────────────────────────┘

  TENDENSIYA (2026):
   Tailwind ishlatgan loyiha  shadcn/ui (eng keng, zamonaviy)
   Material yoqsa / tez  MUI
   enterprise admin (jadval/forma og'ir)  Ant Design

   Tailwind + noyob dizayn + a11y  shadcn (zamonaviy standart)
   Tez/Material  MUI; enterprise/ma'lumotga boy  Ant Design

Qaysi qachon — qaror — UI kutubxona tanlashning yakuniy yo'l xaritasi. MUI (Material) — tez prototip, Material Design yoqadigan loyiha, ko'p komponent kerak bo'lganda (admin/SaaS — izchil, tez boshlash); kamchiligi — Material ko'rinish (o'zgartirish qiyin). Ant Design — enterprise/admin (ma'lumotga boy — murakkab jadval, filtr, forma — biznes ilovalar); o'z forma tizimi; kamchiligi — og'ir, o'ziga xos dizayn. shadcn/ui (Radix + Tailwind) — noyob dizayn + a11y + to'liq nazorat (Tailwind ishlatgan loyiha) — eng zamonaviy (2026 standart); biroz ko'proq sozlash (Tailwind, copy-paste). Radix (headless) — to'liq dizayn nazorati (stilni butunlay o'zingiz — Tailwind/CSS) + a11y; kutubxona chegarasiz, lekin har komponentga stil yozishing kerak. Tendensiya (2026): Tailwind ishlatgan loyiha shadcn/ui (eng keng, zamonaviy); Material yoqsa / tez kerak MUI; enterprise admin (jadval/forma og'ir) Ant Design. Ikki yakuniy nuqta: (1) Tailwind + noyob dizayn + a11y shadcn (zamonaviy standart, eng tez o'sayotgan); (2) tez/Material MUI; enterprise/ma'lumotga boy Ant Design. To'g'ri tanlov — loyiha turi (admin/SaaS/landing), dizayn ehtiyoji (Material/noyob), va stil yondashuvi (Tailwind bormi) ga bog'liq. Hech qaysi "eng yaxshi" emas — har biri o'z o'rnida (shadcn eng zamonaviy, lekin kontekstga qarab).

2.10. Tailwind va komponent kutubxona birga

  TAILWIND 1.7-bob + KOMPONENT KUTUBXONA — qanday birga ishlaydi:

   shadcn/ui — Tailwind ASOSIDA (mukammal birga — komponent Tailwind class'lar)
   Radix + Tailwind — headless (Radix xulq) + Tailwind (stil) — shadcn'ning asosi
   MUI + Tailwind — texnik mumkin, lekin TO'QNASHUV (MUI o'z stil tizimi — Emotion)
     MUI bilan Tailwind aralashtirish tavsiya ETILMAYDI (ikki stil tizimi — chalkash)
   Ant + Tailwind — shunga o'xshash (Ant o'z stil — Tailwind bilan ehtiyot)

  ZAMONAVIY STACK (2026 — ko'p loyiha):
  Tailwind (stil) + shadcn/ui (komponent — Radix+Tailwind) + RHF+Zod (forma) +
  TanStack Query (server) + Zustand (client)
   yengil, moslashuvchan, a11y, kam bog'liqlik

   Tailwind loyiha  shadcn/ui (tabiiy birga); MUI/Ant — o'z stil tizimi (Tailwind aralashtirma)
   Zamonaviy: Tailwind + shadcn + RHF/Zod + TanStack Query + Zustand (yengil, kuchli)

Tailwind va komponent kutubxona birga — stil va komponent yondashuvining uyg'unligi. shadcn/ui — Tailwind asosida (mukammal birga — komponent Tailwind class'lardan iborat, Tailwind loyihasida tabiiy). Radix + Tailwind — headless (Radix xulq) + Tailwind (stil) — bu aynan shadcn'ning asosi. MUI + Tailwind — texnik mumkin, lekin to'qnashuv (MUI o'z stil tizimi — Emotion — bilan keladi, Tailwind bilan aralashtirish ikki stil tizimini keltiradi — chalkash, tavsiya etilmaydi). Ant + Tailwind — shunga o'xshash (Ant o'z stil tizimi — Tailwind bilan ehtiyot). Zamonaviy stack (2026 — ko'p loyiha): Tailwind (stil) + shadcn/ui (komponent — Radix+Tailwind) + RHF+Zod (forma — 11.10) + TanStack Query (server — 12.4) + Zustand (client — 12.5) — yengil, moslashuvchan, a11y, kam bog'liqlik, kam boilerplate. Ikki nuqta: (1) Tailwind ishlatgan loyiha shadcn/ui (tabiiy birga); MUI/Ant — o'z stil tizimi (Tailwind bilan aralashtirma — to'qnashuv); (2) zamonaviy stack — Tailwind + shadcn + RHF/Zod + TanStack Query + Zustand (bu kombinatsiya bugun eng keng tavsiya etiladigan — yengil, kuchli, moslashuvchan). Bu — butun 12-QISM va 11-QISM bilimini birlashtiradigan zamonaviy frontend arxitektura tanlovi.

2.11. Headless variantlar chuqurroq — Radix, Headless UI, React Aria, Chakra

  HEADLESS — bitta oila emas, bir nechta yondashuv (barchasi "xulq + a11y, stil yo'q"):

  RADIX UI (@radix-ui/react-*):
  - eng keng, primitive'larga bo'lingan (react-dialog, react-dropdown-menu, react-tabs...)
  - stilsiz 100% (hech qanday CSS) — data-[state] atributlari orqali stil
  - shadcn/ui aynan shu ustiga qurilgan

  HEADLESS UI (@headlessui/react — Tailwind jamoasi):
  - kamroq komponent (Menu, Listbox, Dialog, Combobox, Switch, Tab)
  - Tailwind bilan ishlashga sozlangan (Transition komponenti bilan animatsiya)

  REACT ARIA (@react-aria — Adobe):
  - eng kuchli a11y (hook'lar: useButton, useDialog, useComboBox — juda past daraja)
  - React Aria Components — tayyor komponent qatlam (yuqori daraja)
  - eng chuqur a11y (murakkab widget: grid, date picker — sinovdan o'tgan)

  ARIAKIT (@ariakit/react):
  - to'liq a11y, moslashuvchan; Radix'ga muqobil

  ────────────────────────────────────────────────────────────
  CHAKRA UI — headless EMAS, styled (MUI/Ant kabi), lekin yengilroq:
  - style prop tizimi (<Box p={4} bg="blue.500" />) — Tailwind'ga o'xshash inline
  - o'z theme tizimi, dark mode ichki (useColorMode)
  - a11y yaxshi, DX qulay (o'rtacha loyiha uchun MUI'ga muqobil)

   Radix — shadcn asosi; Headless UI — Tailwind jamoasi; React Aria — eng chuqur a11y
   Chakra — styled (yengil, style prop), MUI va shadcn orasidagi "o'rta yo'l"

Headless variantlar chuqurroq — headless 2.5-bob bitta kutubxona emas, bir necha yondashuvdan iborat, hammasi bir falsafada (xulq va a11y beradi, stil bermaydi). Radix UI (@radix-ui/react-*) — eng keng, har komponent alohida primitive paket (react-dialog, react-dropdown-menu, react-tabs...), 100% stilsiz, data-[state=open] kabi atributlar orqali Tailwind bilan stil beriladi — shadcn/ui aynan shu ustiga qurilgan. Headless UI (@headlessui/react — Tailwind jamoasi) — kamroq, lekin eng ko'p kerak bo'ladigan komponentlar (Menu, Listbox, Dialog, Combobox, Switch, Tab) va Transition (animatsiya) — Tailwind bilan tabiiy. React Aria (@react-aria — Adobe) — eng kuchli a11y: past darajali hook'lar (useButton, useDialog, useComboBox) va yuqori darajali React Aria Components qatlami; murakkab widget'lar (grid, date picker, drag-and-drop) uchun sanoat standarti a11y beradi. Ariakit — Radix'ga yaqin muqobil. Alohida — Chakra UI: bu headless emas, balki styled (MUI/Ant kabi tayyor stilli), lekin yengilroq va style prop tizimiga ega (<Box p={4} bg="blue.500" rounded="md" /> — Tailwind'ga o'xshash, lekin JSX prop shaklida), ichki dark mode (useColorMode) va qulay DX. Chakra — MUI (og'ir, Material) va shadcn (Tailwind kerak) orasidagi "o'rta yo'l" — o'rtacha loyihalar uchun qulay. Ikki nuqta: (1) headless oilasi — Radix (shadcn asosi), Headless UI (Tailwind jamoasi), React Aria (eng chuqur a11y), Ariakit; (2) Chakra — styled, yengil, style prop bilan — MUI'ga qulay muqobil. Yondashuv tanlash: eng chuqur a11y kerak bo'lsa React Aria, Tailwind loyihada shadcn (Radix), qulay styled kerak bo'lsa Chakra.

2.12. CSS yondashuvlar — Modules, CSS-in-JS, Tailwind, vanilla-extract

  STIL BERISHNING ASOSIY YO'LLARI (kutubxona ostidagi qatlam):

  1. CSS MODULES (Button.module.css):
     - lokal scope (class nomlari avtomatik unikal) — global to'qnashuv yo'q
     - oddiy, build vaqti, RSC bilan MUAMMOSIZ (Next.js — 13-QISM)
     import styles from "./Button.module.css";  <button className={styles.btn} />

  2. CSS-IN-JS (Emotion, styled-components):
     - JS ichida stil (styled.button`color: red;`) — dinamik, prop asosida
     - MUI Emotion'ga tayanadi;  RSC (React Server Components — 12.1: 2.11) MUAMMOSI:
       runtime CSS-in-JS server komponentda ishlamaydi (client'ga "use client" kerak)
     - runtime yuk (stil brauzerda hisoblanadi) — performance ta'siri

  3. TAILWIND (utility-first — 1.7):
     - class'lar (bg-blue-500 p-4) — build vaqti, runtime yuk YO'Q, RSC bilan mukammal
     - shadcn asosi; zamonaviy standart

  4. VANILLA-EXTRACT (.css.ts):
     - "zero-runtime CSS-in-JS" — TypeScript'da yozasiz, build vaqti CSS chiqadi
     - CSS-in-JS DX + Tailwind performance (runtime yo'q, RSC bilan yaxshi)

   RSC davri (2026): runtime CSS-in-JS (Emotion/styled-c.) — muammo (client kerak)
   Tailwind / CSS Modules / vanilla-extract — build vaqti (RSC bilan mukammal)

CSS yondashuvlar — UI kutubxona ostidagi stil qatlami (kutubxona qanday stil beradi). CSS Modules (Button.module.css) — class nomlarini avtomatik lokal (unikal) qiladi, global to'qnashuv yo'q, build vaqtida ishlaydi, RSC bilan muammosiz (Next.js — 13-QISM). CSS-in-JS (Emotion, styled-components) — stilni JS ichida yozasiz (``styled.buttoncolor: red```), dinamik (prop asosida) — MUI Emotion'ga tayanadi; lekin **RSC muammosi** (React Server Components — 12.1: 2.11): runtime CSS-in-JS server komponentda ishlamaydi, "use client" talab qiladi, va runtime yuk beradi (stil brauzerda hisoblanadi) — bu 2026'da CSS-in-JS'ning asosiy kamchiligi. **Tailwind** (utility-first — 1.7) — class'lar (bg-blue-500 p-4), build vaqtida, runtime yuk **yo'q**, RSC bilan mukammal — shadcn asosi, zamonaviy standart. **vanilla-extract** (.css.ts`) — "zero-runtime CSS-in-JS": TypeScript'da yozasiz, lekin build vaqtida oddiy CSS chiqadi — CSS-in-JS qulayligi + Tailwind performance'i (runtime yo'q, RSC bilan yaxshi). Ikki nuqta: (1) RSC davrida (2026) runtime CSS-in-JS (Emotion/styled-components) muammoli (server komponentda ishlamaydi) — MUI/Chakra'ni Next.js App Router'da ishlatishda ehtiyot; (2) Tailwind, CSS Modules, vanilla-extract — build vaqtida (RSC bilan mukammal) — shuning uchun shadcn (Tailwind) zamonaviy Next.js loyihada tabiiy tanlov.

2.13. Tailwind CSS — asos (utility-first, config, dark, responsive)

  TAILWIND 1.7-bob — shadcn va zamonaviy UI'ning poydevori:

  UTILITY-FIRST (tayyor kichik class'lar — o'z CSS yozmasdan):
  <div className="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md">

  RESPONSIVE (breakpoint prefix — mobile-first):
  <div className="w-full md:w-1/2 lg:w-1/3">   // md: ≥768px, lg: ≥1024px

  DARK MODE (dark: prefix):
  <div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  // tailwind.config: darkMode: "class"   .dark class boshqaradi 2.6-bob

  CONFIG (tailwind.config — brend sozlash):
  theme: { extend: { colors: { brand: "#6d28d9" }, fontFamily: {...} } }
   className="bg-brand" endi ishlaydi (dizayn tizimi — 2.14)

  STATE variantlar: hover:, focus:, disabled:, group-hover:, data-[state=open]:
  <button className="bg-blue-500 hover:bg-blue-600 focus:ring-2 disabled:opacity-50">

   Tailwind — utility class (runtime yo'q, build vaqti) — shadcn/Radix asosi
   dark: + responsive (md:/lg:) + state (hover:) — deklarativ, JSX ichida

Tailwind CSS — asos — shadcn/ui va zamonaviy UI arxitekturasining poydevori (1.7 batafsil, bu yerda kutubxona kontekstida). Utility-first — o'z CSS yozmasdan, tayyor kichik class'lar bilan stil berasiz (flex items-center gap-4 p-6 bg-white rounded-lg shadow-md) — HTML/JSX'dan chiqmasdan. Responsive — breakpoint prefikslari (mobile-first): w-full md:w-1/2 lg:w-1/3 (md: ≥768px, lg: ≥1024px). Dark mode — dark: prefiksi (bg-white dark:bg-gray-900), va tailwind.configda darkMode: "class" — .dark class butun ilovada dark rejimni boshqaradi (2.6 — shadcn shuni ishlatadi). Config — brendni sozlash: theme.extend.colors.brand qo'shsangiz bg-brand class ishlaydi (dizayn tizimi — 2.14). State variantlar — hover:, focus:, disabled:, group-hover:, data-[state=open]: (Radix state'lariga bog'lanadi) — barchasi deklarativ, JSX ichida. Ikki nuqta: (1) Tailwind — utility class'lar (runtime yo'q, build vaqtida) — shadcn/Radix'ning stil qatlami; (2) dark: + responsive (md:/lg:) + state (hover:) prefikslari — barcha holatlarni deklarativ, bitta joyda beradi. Tailwind — shadcn'ni tushunish uchun shart (komponent kodi Tailwind class'laridan iborat).

2.14. Dizayn tizimi qurish — token, variant (CVA / tailwind-variants)

  DIZAYN TIZIMI — izchil UI uchun markazlashgan qoidalar (token + variant):

  1. DIZAYN TOKEN (rang, oraliq, radius, shrift — bir manba):
     CSS o'zgaruvchi: :root { --primary: 222 47% 11%; --radius: 0.5rem; }
      har komponent shu token'dan (o'zgartir  hammasi izchil o'zgaradi — 2.6)

  2. VARIANT — komponentning turlari (default/destructive/outline; sm/lg):
     CVA (class-variance-authority — shadcn ishlatadi):
     const button = cva("base-classlar", {
       variants: {
         variant: { default: "bg-primary", destructive: "bg-red-500" },
         size: { sm: "h-9 px-3", lg: "h-11 px-8" },
       },
       defaultVariants: { variant: "default", size: "sm" },
     });
     button({ variant: "destructive", size: "lg" })  //  mos class'lar qaytadi

  tailwind-variants (tv) — CVA'ga o'xshash muqobil (slot, kompozitsiya kuchliroq)

   Dizayn tizimi = token (bir manba) + variant (izchil turlari) — havaskorlikdan chiqish
   CVA/tailwind-variants — Tailwind class'larni variant'ga aylantirish (shadcn asosi)

Dizayn tizimi qurish — izchil, professional UI uchun markazlashgan qoidalar to'plami (token va variant). Dizayn token — dizaynning bir manbadan boshqariladigan qiymatlari (rang, oraliq, radius, shrift): shadcn'da CSS o'zgaruvchilar (:root { --primary: ...; --radius: ... }), MUI'da theme obyekti, Ant'da design token'lar — bittasini o'zgartirsangiz butun ilova izchil o'zgaradi 2.6-bob. Variant — bitta komponentning turli ko'rinishlari (variant: default/destructive/outline; size: sm/lg). Tailwind'da variantlarni boshqarishning zamonaviy usuli — CVA (class-variance-authority — shadcn aynan shuni ishlatadi): cva("base", { variants: { variant: {...}, size: {...} }, defaultVariants: {...} }) — chaqirilganda mos Tailwind class'larni qaytaradi (Misol 10 — shadcn button aynan shu). Muqobil — tailwind-variants (tv) — CVA'ga o'xshash, lekin slot va kompozitsiya kuchliroq. Ikki nuqta: (1) dizayn tizimi = token (bir manba — rang/oraliq/radius) + variant (izchil komponent turlari) — havaskor "har komponentga qo'lda rang" yondashuvidan professional tizimga o'tish; (2) CVA/tailwind-variants — Tailwind class'larni tartibli variant tizimiga aylantiradi (shadcn'ning buttonVariants asosi — 2.4, Misol 10). Dizayn tizimi — 100+ komponentli ilovada izchillik va tez o'zgartirishning yagona yo'li.

2.15. Ikonka kutubxonalari — lucide, react-icons

  IKONKA (icon) — UI'ning ajralmas qismi (tugma, menyu, holat):

  LUCIDE (lucide-react — shadcn standarti):
  import { Search, Trash2, ChevronDown } from "lucide-react";
  <Search className="w-4 h-4" />   // SVG komponent — Tailwind bilan stil (rang/o'lcham)
  - yengil, izchil dizayn, tree-shaking (faqat import qilingani bundle'ga)

  REACT-ICONS (bir nechta to'plam bitta paketda):
  import { FaGithub } from "react-icons/fa";   // Font Awesome
  import { MdSettings } from "react-icons/md";  // Material
  - juda ko'p ikonka (ko'p to'plam), lekin import to'g'ri bo'lsin (tree-shaking)

   Ikonka — SVG komponent (Tailwind bilan rang/o'lcham); lucide — shadcn standarti
   Faqat kerakli ikonkani named import (tree-shaking — bundle yengil — 2.7)

Ikonka kutubxonalari — ikonkalar UI'ning ajralmas qismi (tugmadagi belgi, menyu, holat indikatori). Lucide (lucide-react) — shadcn/ui'ning standart ikonka to'plami: import { Search, Trash2 } from "lucide-react" va <Search className="w-4 h-4 text-gray-500" /> — har ikonka SVG React komponenti, Tailwind class'lari bilan rang va o'lcham beriladi; yengil, izchil dizayn, tree-shaking (faqat import qilingan ikonka bundle'ga kiradi). react-icons — bir nechta mashhur to'plamni (Font Awesome, Material, Feather...) bitta paketda beradi: import { FaGithub } from "react-icons/fa" — juda ko'p tanlov, lekin to'g'ri (aniq) import qilish tree-shaking uchun muhim. Ikki nuqta: (1) ikonka — SVG komponent sifatida keladi, Tailwind bilan rang/o'lcham beriladi (w-4 h-4), currentColor orqali matn rangiga moslashadi; (2) faqat kerakli ikonkani named import qiling (tree-shaking — bundle yengil qoladi — 2.7). Lucide — Tailwind/shadcn loyihada tabiiy standart; react-icons — juda keng tanlov kerak bo'lganda.

3. Sintaksis — tez ma'lumotnoma

MUI 2.2-bob:         npm i @mui/material; <Button variant="contained">; ThemeProvider+createTheme
ANT 2.3-bob:         npm i antd; <Table dataSource columns/>; <Form.Item rules/>; ConfigProvider
SHADCN 2.4-bob:      npx shadcn@latest init / add button; import { Button } from "@/components/ui/button"
RADIX 2.5-bob:       @radix-ui/react-dialog; <Dialog.Root><Dialog.Content className=...>
THEME 2.6-bob:       MUI createTheme | Ant token | shadcn CSS o'zgaruvchi (.dark)
RHF 2.8-bob:         <Controller render={({field}) => <TextField {...field}/>} />  // MUI/Radix
                   shadcn: <FormField><FormItem><FormControl><Input/></FormControl></FormItem>
QAROR 2.9-bob:       Tailwind+noyobshadcn | Material/tezMUI | enterpriseAnt
STACK 2.10-bob:      Tailwind + shadcn + RHF/Zod + TanStack Query + Zustand
HEADLESS 2.11-bob:   Radix | @headlessui/react | @react-aria (chuqur a11y) | Chakra (styled)
CSS 2.12-bob:        CSS Modules | CSS-in-JS (Emotion — RSC muammo) | Tailwind | vanilla-extract
TAILWIND 2.13-bob:   className="p-4 md:w-1/2 dark:bg-gray-900 hover:bg-blue-600"; config: darkMode:"class"
CVA 2.14-bob:        cva("base", { variants: { variant, size }, defaultVariants }); token = CSS o'zgaruvchi
IKONKA 2.15-bob:     import { Search } from "lucide-react"; <Search className="w-4 h-4" />

4. Batafsil kod namunalari

Misol 1 — MUI asosiy (2.2)

import { Button, TextField, Card, CardContent } from "@mui/material";

function LoginCard() {
  return (
    <Card sx={{ maxWidth: 400 }}>          {/* sx — inline stil (MUI) */}
      <CardContent>
        <TextField label="Email" variant="outlined" fullWidth margin="normal" />
        <TextField label="Parol" type="password" variant="outlined" fullWidth margin="normal" />
        <Button variant="contained" color="primary" fullWidth>Kirish</Button>
      </CardContent>
    </Card>
  );
}

Misol 2 — MUI theme (2.6)

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    mode: "light",
    primary: { main: "#1976d2" },
    secondary: { main: "#9c27b0" },
  },
  typography: { fontFamily: "Inter, sans-serif" },
  shape: { borderRadius: 12 },
});

function App() {
  return (
    <ThemeProvider theme={theme}>      {/* barcha komponent shu temaga 2.6-bob */}
      <Routes>{/* ... */}</Routes>
    </ThemeProvider>
  );
}

Misol 3 — Ant Design jadval (2.3)

import { Table, Tag, Space, Button } from "antd";

const columns = [
  { title: "Ism", dataIndex: "name", key: "name" },
  { title: "Rol", dataIndex: "role", key: "role", render: (role: string) => <Tag>{role}</Tag> },
  {
    title: "Amal", key: "action",
    render: (_: any, record: User) => (
      <Space>
        <Button size="small">Tahrir</Button>
        <Button size="small" danger>O'chir</Button>
      </Space>
    ),
  },
];

function UsersTable({ users }: { users: User[] }) {
  return <Table dataSource={users} columns={columns} rowKey="id" pagination={{ pageSize: 10 }} />;
  //  Boy jadval (sahifalash, render — ma'lumotga boy — 2.3)
}

Misol 4 — Ant Design forma (2.3, 2.8)

import { Form, Input, Button } from "antd";

function LoginForm() {
  const onFinish = (values: { email: string; password: string }) => console.log(values);
  return (
    <Form onFinish={onFinish} layout="vertical">     {/* Ant o'z forma tizimi 2.8-bob */}
      <Form.Item name="email" label="Email" rules={[{ required: true, type: "email" }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="Parol" rules={[{ required: true, min: 8 }]}>
        <Input.Password />
      </Form.Item>
      <Button type="primary" htmlType="submit">Kirish</Button>
    </Form>
  );
}
//  Ant Form — o'z validatsiya (rules) — RHF emas (2.8)

Misol 5 — shadcn/ui setup va ishlatish (2.4)

# Sozlash va komponent qo'shish:
npx shadcn@latest init                       # Tailwind + sozlama
npx shadcn@latest add button dialog input    # komponentlarni LOYIHANGGA nusxalaydi

// import — o'z loyihangdan (npm emas — 2.4):
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button variant="outline">Ochish</Button></DialogTrigger>
      <DialogContent>Modal kontenti (Radix a11y + Tailwind stil — 2.4)</DialogContent>
    </Dialog>
  );
}
//  Button/Dialog kodi sizning src/components/ui/da (o'zgartiriladi — sizniki)

Misol 6 — Radix headless (Dialog — 2.5)

import * as Dialog from "@radix-ui/react-dialog";

function Modal({ children }: React.PropsWithChildren) {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="btn">Ochish</Dialog.Trigger>
      <Dialog.Portal>                              {/* portal — 11.12 */}
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />     {/* SEN stil (Tailwind) */}
        <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
          <Dialog.Title className="text-lg font-bold">Sarlavha</Dialog.Title>
          {children}
          <Dialog.Close className="absolute top-2 right-2">×</Dialog.Close>
        </Dialog.Content>                          {/* focus trap, ESC, a11y — AVTOMATIK 2.5-bob */}
      </Dialog.Portal>
    </Dialog.Root>
  );
}
//  Radix — xulq/a11y (11.12 modal mantig'i tayyor); stil Tailwind (siz)

Misol 7 — shadcn/ui + RHF + Zod (forma — 2.8)

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

function LoginForm() {
  const form = useForm({ resolver: zodResolver(loginSchema) });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl><Input {...field} /></FormControl>
            <FormMessage />                          {/* xato avtomatik 11.10-bob */}
          </FormItem>
        )} />
        <Button type="submit">Kirish</Button>
      </form>
    </Form>
  );
}
//  shadcn Form — RHF+Zod uchun TAYYOR (eng qulay birikma — 2.8)

Misol 8 — MUI + RHF Controller (2.8)

import { Controller, useForm } from "react-hook-form";
import { TextField } from "@mui/material";

function MuiForm() {
  const { control, handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <Controller
        name="email"
        control={control}
        rules={{ required: "Email majburiy" }}
        render={({ field, fieldState }) => (
          <TextField {...field} label="Email" error={!!fieldState.error}
                     helperText={fieldState.error?.message} fullWidth />   // xato (11.10: 2.8)
        )}
      />
    </form>
  );
}
//  MUI controlled  Controller (11.10: 2.9, 2.8)

Misol 9 — shadcn dark mode (CSS o'zgaruvchi — 2.6)

/* globals.css — CSS o'zgaruvchilar (shadcn theme): */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 222 47% 11%;
  --radius: 0.5rem;
}
.dark {
  --background: 222 47% 11%;
  --foreground: 0 0% 100%;
  --primary: 0 0% 100%;
}
/* komponent: className="bg-background text-foreground" — o'zgaruvchilardan 2.6-bob */

// Dark mode toggle (.dark class — Zustand/Context bilan):
function ThemeToggle() {
  const { theme, toggle } = useThemeStore();    // 12.5 Zustand
  useEffect(() => { document.documentElement.classList.toggle("dark", theme === "dark"); }, [theme]);
  return <Button onClick={toggle}>Mavzu</Button>;
}

Misol 10 — Komponentni o'zgartirish (shadcn — 2.4)

// src/components/ui/button.tsx — KOD SIZNIKI (o'zgartirasiz):
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        brand: "bg-purple-600 text-white hover:bg-purple-700",   //  O'Z variantingni qo'sh
      },
      size: { default: "h-10 px-4", sm: "h-9 px-3", lg: "h-11 px-8" },
    },
  }
);
// <Button variant="brand">  — o'z variantingizni qo'shdingiz (kod sizniki — 2.4)
//  shadcn — kod sizniki  istalgan variant/stil qo'shasiz (qora quti emas)

Misol 11 — Ant Design ConfigProvider (theme — 2.6)

import { ConfigProvider, theme } from "antd";

function App() {
  return (
    <ConfigProvider
      theme={{
        token: { colorPrimary: "#00b96b", borderRadius: 6 },   // brend (2.6)
        algorithm: theme.darkAlgorithm,                        // dark mode
      }}
    >
      <YourApp />
    </ConfigProvider>
  );
}

Misol 12 — Headless + custom stil (Radix Tabs — 2.5)

import * as Tabs from "@radix-ui/react-tabs";

function CustomTabs() {
  return (
    <Tabs.Root defaultValue="profil">
      <Tabs.List className="flex border-b">           {/* SEN stil (Tailwind) */}
        <Tabs.Trigger value="profil" className="px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-blue-500">
          Profil
        </Tabs.Trigger>
        <Tabs.Trigger value="sozlama" className="px-4 py-2">Sozlamalar</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="profil">Profil kontenti</Tabs.Content>   {/* a11y avtomatik */}
      <Tabs.Content value="sozlama">Sozlamalar</Tabs.Content>
    </Tabs.Root>
  );
}
//  Radix Tabs — xulq/a11y (klaviatura/ARIA tayyor); data-[state] — Tailwind bilan stil (2.5)

Misol 13 — Zamonaviy stack (hammasi birga — 2.10)

// Tailwind + shadcn + RHF/Zod + TanStack Query + Zustand — zamonaviy stack:
function ProductPage() {
  const { data, isPending } = useQuery({ queryKey: ["products"], queryFn: fetchProducts });   // 12.4
  const view = useUIStore((s) => s.view);                                                      // 12.5
  const form = useForm({ resolver: zodResolver(schema) });                                     // 11.10

  if (isPending) return <Skeleton />;        // shadcn skeleton
  return (
    <div className="container mx-auto">       {/* Tailwind */}
      <Button onClick={...}>Filtr</Button>    {/* shadcn */}
      <DataTable data={data} view={view} />   {/* shadcn table (Radix) */}
    </div>
  );
}
//  Tailwind + shadcn + RHF/Zod + Query + Zustand — yengil, kuchli, a11y (2.10)

Misol 14 — Qaror jadvali (2.9)

// UI KUTUBXONA TANLASH:

// Tailwind loyiha + noyob dizayn + a11y  shadcn/ui (ZAMONAVIY):
//   npx shadcn add ...   kod sizniki, Radix a11y, Tailwind stil

// Material Design yoqsa / tez prototip  MUI:
//   <Button variant="contained" /> + createTheme

// Enterprise admin (jadval/forma og'ir)  Ant Design:
//   <Table /> <Form /> — ma'lumotga boy

// To'liq dizayn nazorati (kutubxonasiz)  Radix (headless) + Tailwind:
//   <Dialog.Content /> + className — xulq tayyor, stil sizniki

//  2026: Tailwind  shadcn; Material/tez  MUI; enterprise  Ant (2.9)

5. To'g'ri va noto'g'ri holatlar

1) Komponent yozish

 har modal/dropdown/jadvalni noldan (sekin, a11y'siz — 11.12)
 UI kutubxona (tayyor, a11y, sinalgan — 2.1)

2) a11y

 noma'lum/kichik kutubxona (a11y bo'lmasligi mumkin)
 MUI/Ant/Radix(shadcn) — a11y sinalgan (2.7)

3) Tailwind + MUI

 MUI + Tailwind aralashtirish (ikki stil tizimi — chalkash — 2.10)
 Tailwind  shadcn/Radix; MUI  o'z stil tizimi (sx/styled)

4) Forma

 MUI/Radix'ni RHF'ga to'g'ridan register (controlled — ishlamaydi — 11.10)
 Controller (MUI/Radix); shadcn Form (tayyor — 2.8)

5) Theming

 har komponentga qo'lda rang (izchilsiz)
 theme markazlashgan (createTheme/token/CSS o'zgaruvchi — 2.6)

6) Vosita tanlovi

 "eng yaxshi" deb bittasini hamma joyga
 loyiha turiga mos (Tailwindshadcn, enterpriseAnt — 2.9)

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — MUI komponentlari stillanmagan ko'rinadi

Sababi: Emotion/MUI o'rnatilmagan yoki ThemeProvider yo'q. Yechimi: @emotion/react @emotion/styled o'rnat; <ThemeProvider> (Misol 2).

Xato 2 — shadcn import topilmaydi

Sababi: komponent add qilinmagan yoki alias (@) sozlanmagan 2.4-bob. Yechimi: npx shadcn add button; tsconfig/vite.configda @ alias (11.3: 2.8).

Xato 3 — MUI/Radix forma RHF bilan ishlamaydi

Sababi: controlled komponentga register 2.8-bob. Yechimi: Controller (Misol 8); shadcn Form (Misol 7).

Xato 4 — Tailwind + MUI stil to'qnashuvi

Sababi: ikki stil tizimi 2.10-bob. Yechimi: bittasini tanla (Tailwindshadcn yoki MUIsx); aralashtirma.

Xato 5 — Ant Design dizayni boshqa loyihaga mos kelmaydi

Sababi: Ant o'ziga xos ko'rinish 2.3-bob. Yechimi: ConfigProvider token 2.6-bob; yoki noyob dizayn kerak bo'lsa — shadcn.

Xato 6 — Bundle juda katta (MUI/Ant)

Sababi: butun kutubxona import yoki ko'p komponent. Yechimi: named import (tree-shaking — 2.7); kerakli komponentlar; yoki shadcn (yengil).

Xato 7 — Dark mode ishlamaydi (shadcn)

Sababi: .dark class qo'shilmagan yoki CSS o'zgaruvchi yo'q 2.6-bob. Yechimi: documentElement.classList.toggle("dark") + CSS o'zgaruvchilar (Misol 9).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Tailwind 1.7-bob: shadcn/ui Tailwind asosida; MUI/Ant — o'z stil tizimi.
• Portal/refs 11.12-bob: Radix/shadcn modal — 11.12 qo'lda qilganning tayyor versiyasi.
• Forma + Zod 11.10-bob: Controller (MUI/Radix); shadcn Form (RHF+Zod tayyor).
• Pattern'lar 11.13-bob: compound components — Radix/shadcn (Tabs/Dialog) shu naqsh.
• a11y 1.9-bob: UI kutubxonalar a11y'ni avtomatik beradi.
• Zustand/Context (12.5, 12.1): theme/UI holati — dark mode boshqaruvi.
• TanStack Query 12.4-bob: ma'lumot + UI komponent (jadval/skeleton).
• Performance 11.11-bob: bundle size, tree-shaking.

8. Eng yaxshi amaliyotlar (best practices)

• UI kutubxona ishlat (komponentni noldan emas — tezlik/a11y — 2.1).
• a11y'ni tekshir (kutubxona a11y beradimi — klaviatura bilan sina — 2.7).
• Tailwind shadcn/Radix (MUI/Ant — o'z stil; aralashtirma — 2.10).
• Forma: Controller/shadcn Form (controlled komponent + RHF — 2.8).
• Theming markazlashgan (createTheme/token/CSS o'zgaruvchi — 2.6).
• shadcn — kod sizniki (o'zgartiring, variant qo'shing — to'liq nazorat — 2.4).
• Bundle: named import (tree-shaking — 2.7).
• Loyiha turiga mos tanla (Tailwindshadcn, enterpriseAnt — 2.9).
• Zamonaviy stack (Tailwind + shadcn + RHF/Zod + Query + Zustand — 2.10).
• Dark mode (theme tizimi orqali — 2.6).

9. Amaliy loyiha: "UI Kutubxona bilan Dashboard"

UI kutubxonani real ilovada — komponentlar, theme, forma, a11y — mustahkamlash.

Maqsad

Bitta UI kutubxona (shadcn/ui tavsiya) bilan dashboard yarat: jadval, forma, modal, dark mode — a11y bilan.

Talablar (requirements)

1. Kutubxona tanlash: shadcn/ui (yoki MUI/Ant) — sozlash (Misol 5).
2. Komponentlar: Button, Input, Dialog, Table, Select — kutubxonadan.
3. Theme: brend ranglari + dark mode (Misol 9, 2.6).
4. Forma: RHF + Zod + kutubxona (shadcn Form / MUI Controller — Misol 7, 8).
5. Modal: kutubxona dialog (Radix a11y — Misol 6).
6. Jadval: ma'lumot ko'rsatish (TanStack Query bilan — 12.4).
7. a11y: klaviatura bilan ishlasin (Tab/Esc — tekshir — 2.7).
8. shadcn (agar): kamida bitta komponentni o'zgartiring (variant qo'shing — Misol 10, 2.4).
9. Stack: Tailwind + UI kutubxona + RHF/Zod + Query + Zustand (Misol 13, 2.10).
10. Qaror: nega shu kutubxonani tanlaganingni izohla 2.9-bob.

Maslahatlar (hint)

• shadcn — npx shadcn add ... (komponent loyihangizda — Misol 5).
• Forma — Controller (MUI) yoki shadcn Form (Misol 7, 8).
• Tailwind ishlatsangiz — shadcn (MUI aralashtirma — 2.10).
• Dark mode — CSS o'zgaruvchi + .dark (shadcn — Misol 9).
• a11y — klaviatura bilan sina (Tab/Esc/o'qlar — 2.7).
• shadcn — kod sizniki (variant/stil o'zgartiring — Misol 10).

"Tayyor" mezonlari (acceptance criteria)

• UI kutubxona sozlangan, komponentlar ishlaydi.
• Theme (brend + dark mode).
• Forma (RHF + Zod + kutubxona).
• Modal (kutubxona dialog — a11y).
• Jadval (ma'lumot + Query).
• a11y (klaviatura ishlaydi).
• shadcn — kamida bitta komponent o'zgartirilgan (agar shadcn).
• Zamonaviy stack (Tailwind + UI + RHF + Query + Zustand).
• Kutubxona tanlovi oqlangan.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda UI kutubxonalarni o'rgandik:

• Nega UI kutubxona (noldan emas — a11y/tezlik — 2.1); turlari (styled/headless/copy-paste).
• MUI (Material, styled — 2.2); Ant Design (enterprise — 2.3); shadcn/ui (copy-paste, Radix+Tailwind — 2.4); Radix (headless — 2.5).
• Theming 2.6-bob; a11y/bundle 2.7-bob; forma RHF 2.8-bob; qaror 2.9-bob; Tailwind + kutubxona (zamonaviy stack — 2.10).
• Headless variantlar (Radix/Headless UI/React Aria/Chakra — 2.11); CSS yondashuvlar (Modules/CSS-in-JS/Tailwind/vanilla-extract — RSC muammosi — 2.12); Tailwind asos 2.13-bob; dizayn tizimi (token/CVA — 2.14); ikonka (lucide/react-icons — 2.15).

Endi siz UI'ni tez, professional, a11y'li tarzda — to'g'ri kutubxona bilan — qura olasiz, va har loyiha turiga (Tailwind/enterprise/Material) mos vositani tanlashni bilasiz.

12-QISM (State Management va Data Fetching) TO'LIQ TUGADI! (12.1–12.6: Context chuqur, Redux Toolkit, RTK Query, TanStack Query, Zustand, UI kutubxonalar). Endi siz client state (Context/Zustand/Redux), server state (RTK/TanStack Query), va UI (kutubxonalar) — barchasini professional boshqara olasiz, va eng muhimi — client state vs server state va to'g'ri vosita tanlovini chuqur tushunasiz.

Keyingi QISM — 13-QISM: Next.js (chuqur). React'ni yana yuqori darajaga — production frameworkga — olib chiqamiz. Next.js — React ustiga qurilgan to'liq framework: server-side rendering (SSR), App Router (file-based routing), Server Components (12.1: 2.11 davomi), rendering strategiyalari (SSR/SSG/ISR/CSR), Server Actions, caching (chuqur), SEO/metadata, NextAuth, va Vercel deploy. Bu — SPA'ning (11-QISM) cheklovlapini (SEO, boshlang'ich yuk) hal qiladi va to'liq full-stack React ilova qurish imkonini beradi.

Foydalanilgan rasmiy/ishonchli manbalar

• MUI rasmiy hujjati — components, theming, sx prop, styled, DataGrid; Ant Design rasmiy hujjati — components, Form, Table, ConfigProvider (design token)
• shadcn/ui rasmiy hujjati — installation, komponentlar, theming, dark mode, CLI; Radix UI rasmiy hujjati — primitives, accessibility, data-[state] stil
• Headless UI (Tailwind Labs) va React Aria (Adobe) rasmiy hujjatlari — headless komponent va a11y hook'lar; Chakra UI rasmiy hujjati — style prop, theming
• Tailwind CSS rasmiy hujjati — utility-first, config, dark mode, responsive; class-variance-authority (CVA) va tailwind-variants hujjatlari — variant tizimi
• vanilla-extract va Emotion rasmiy hujjatlari — CSS yondashuvlar (zero-runtime va CSS-in-JS); Lucide rasmiy hujjati — ikonka
• React Hook Form rasmiy hujjati — Controller, UI kutubxona integratsiyasi; WAI-ARIA Authoring Practices Guide (APG) — komponent a11y naqshlari (dialog, tabs, menu, combobox)