@akhatmirzo/ui

O'rnatish

Paketlarni o'rnatish, CSS'ni ulash va birinchi komponent.

Kutubxona to'rtta mustaqil paketdan iborat. Komponentlar uchun @akhatmirzo/ui va @akhatmirzo/tokens yetarli — qolganlari kerak bo'lsa qo'shiladi.

Talablar

  • React 18 yoki undan yangi (19 ham qo'llab-quvvatlanadi)
  • Tailwind CSS v4 — komponentlar Tailwind klasslari bilan yozilgan, stillarni sizning Tailwind build'ingiz yaratadi
  • ESM'ni tushunadigan bundler: Vite, Next.js, Rsbuild va boshqalar

O'rnatish

Paketlarni qo'shing

pnpm add @akhatmirzo/ui @akhatmirzo/tokens

Shrift ixtiyoriy, lekin dizayn Manrope uchun moslangan:

pnpm add @fontsource-variable/manrope

CSS'ni ulang

Asosiy CSS faylingizda Tailwind'dan keyin tokenlarni ulang va Tailwind'ga komponentlar klasslarini skanerlashni ayting:

app.css
@import 'tailwindcss';
@import '@fontsource-variable/manrope';
@import '@akhatmirzo/tokens/theme.css';

/* Yo'l shu CSS faylga nisbatan yoziladi */
@source '../node_modules/@akhatmirzo/ui/dist';

@source'ni unutmang

Tailwind v4 node_modules ichini o'zi skanerlamaydi. @source qatori bo'lmasa, komponentlar ko'rinadi, lekin stillarsiz qoladi. Yo'lni CSS faylingiz joylashuviga qarab to'g'rilang — masalan, src/styles/app.css uchun '../../node_modules/@akhatmirzo/ui/dist'.

Provayderlarni qo'ying

Ilova ildizida bir marta. toast(), confirm() va tooltiplar shularsiz ishlamaydi:

App.tsx
import { ConfirmProvider, Toaster, TooltipProvider } from '@akhatmirzo/ui';

export function App() {
  return (
    <TooltipProvider>
      <ConfirmProvider>
        <Routes />
        <Toaster position="bottom-right" />
      </ConfirmProvider>
    </TooltipProvider>
  );
}

Birinchi komponent

import { Button, toast } from '@akhatmirzo/ui';

export function SaveButton() {
  return (
    <Button variant="primary" onClick={() => toast.success('Saqlandi')}>
      Saqlash
    </Button>
  );
}

Vite

Tailwind v4 Vite'ga rasmiy plagin orqali ulanadi:

pnpm add -D tailwindcss @tailwindcss/vite
vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

CSS fayl odatda src/ ichida turadi, shuning uchun @source bir pog'ona yuqoriga chiqadi:

src/index.css
@import 'tailwindcss';
@import '@fontsource-variable/manrope';
@import '@akhatmirzo/tokens/theme.css';

@source '../node_modules/@akhatmirzo/ui/dist';

Provayderlarni src/main.tsx da yoki App ildizida qo'ying — yuqoridagi 3-qadamdagidek.

Next.js (App Router)

Komponentlar holat va brauzer API'laridan foydalanadi, shuning uchun ularni client komponentlarda ishlating — fayl boshida 'use client' bo'lsin.

Tailwind v4 Next.js'da PostCSS plagini orqali ishlaydi:

pnpm add -D tailwindcss @tailwindcss/postcss
postcss.config.mjs
export default {
  plugins: { '@tailwindcss/postcss': {} },
};
app/globals.css
@import 'tailwindcss';
@import '@fontsource-variable/manrope';
@import '@akhatmirzo/tokens/theme.css';

@source '../node_modules/@akhatmirzo/ui/dist';

Provayderlarni alohida faylga chiqaring va layout.tsx da o'rab qo'ying:

app/providers.tsx
'use client';

import { ConfirmProvider, Toaster, TooltipProvider } from '@akhatmirzo/ui';
import type { ReactNode } from 'react';

export function Providers({ children }: { children: ReactNode }) {
  return (
    <TooltipProvider>
      <ConfirmProvider>
        {children}
        <Toaster />
      </ConfirmProvider>
    </TooltipProvider>
  );
}
app/layout.tsx
import { Providers } from './providers';
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="uz">
      <body className="bg-background font-sans text-text antialiased">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Qo'shimcha paketlar

Komponentlarsiz ham ishlatish mumkin — har biri mustaqil:

pnpm add @akhatmirzo/core @akhatmirzo/hooks
PaketNima beradi
@akhatmirzo/uiReact komponentlar (Tailwind v4 + Radix)
@akhatmirzo/tokensDizayn tokenlari: CSS o'zgaruvchilari va Tailwind @theme
@akhatmirzo/coreFormatlash, validatsiya, matn, storage va API — React'siz, bog'liqliksiz
@akhatmirzo/hooksReact hooklar: useDebounce, useHotkeys, useLocalStorage va boshqalar

core va hooks alohida o'rnatilishi shart emas

@akhatmirzo/ui ularni o'zi bog'liqlik sifatida oladi. Ularni o'z kodingizda to'g'ridan-to'g'ri import qilsangiz, package.json ga ham qo'shib qo'ying.

Muammolar

Keyingi qadamlar

Mavzu va tokenlar

Brend rangi, radiuslar va soyalarni moslash

Dark mode

data-theme bilan qorong'i rejim

Button

Birinchi komponent bilan yaqinroq tanishing

Kirish

Kutubxona nima, kimlar uchun va qanday tuzilgan.

Mavzu va tokenlar

Ranglar, tipografiya, radius, soya, animatsiya va brend rangini o'zgartirish.

Sahifada

TalablarO'rnatishPaketlarni qo'shingCSS'ni ulangProvayderlarni qo'yingBirinchi komponentViteNext.js (App Router)Qo'shimcha paketlarMuammolarKeyingi qadamlar