ინსტალაცია

1. GitHub Packages რეესტრი

პაკეტები GitHub Packages-ზე ქვეყნდება. პროექტის ფესვში .npmrc დაამატეთ; ტოკენს read:packages უფლება სჭირდება.

@llc-conciergia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. პაკეტების დაყენება

pnpm add @llc-conciergia/ui

import { Button } from "@llc-conciergia/ui/button";

npx @llc-conciergia/cli add button

npx shadcn@latest add https://ui.conciergia.co/r/button.json

CLI კომპონენტის წყაროს თქვენს პროექტში ამატებს. ზემოთ მოცემულია Button-ის მაგალითი; სხვა კომპონენტისთვის შეცვალეთ slug. სტუმარმასპინძლობის ხატულები ცალკე პაკეტშია: @llc-conciergia/icons.

საჭიროა react და react-dom 19 და tailwindcss 4.

3. სტილები

globals.css-ში ორი ხაზი. styles.css თავად შეიცავს token-ების თემას, Inter + Noto Sans Georgian ფონტებს და Tailwind-ს კომპონენტების კლასებისკენ მიუთითებს.

@import "tailwindcss";
@import "@llc-conciergia/ui/styles.css";

4. LocaleProvider

კომპონენტების ჩაშენებული ტექსტები (დახურვა, იტვირთება…) ka, en ან ru ენაზეა. ნაგულისხმევია ka; სხვა ენისთვის აპიLocaleProvider-ით შემოფარგლეთ — ის კლიენტ-კომპონენტია და layout-ში პირდაპირ ჯდება.

import { LocaleProvider } from "@llc-conciergia/ui/locale";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ka">
      <body>
        <LocaleProvider locale="ka">{children}</LocaleProvider>
      </body>
    </html>
  );
}

5. თემა და სიმჭიდროვე

მუქი თემა ირთვება class="dark"-ით ან data-theme="dark"-ით ნებისმიერ წინაპარზე (ჩვეულებრივ <html>-ზე). კომფორტული სიმჭიდროვე — data-density="comfortable"; ნაგულისხმევი კომპაქტურია.

<html lang="ka" className="dark" data-density="comfortable">

6. Next.js-ში გამოყენება

სტატიკური კომპონენტების subpath-ები სერვერულად მუშაობს; ინტერაქტიულ entry-ებს აქვთ "use client". მათი სერვერ-კომპონენტიდან იმპორტი შესაძლებელია. ფუნქციური props (onClick, onOpenChange…) მხოლოდ კლიენტ-კომპონენტიდან გადაეცემა. ცალკეული subpath-ები (@llc-conciergia/ui/button) და root barrel (@llc-conciergia/ui) ორივე მუშაობს.

import { Badge } from "@llc-conciergia/ui/badge";
import { Button } from "@llc-conciergia/ui/button";
import { Card, CardHeader, CardTitle, CardFooter } from "@llc-conciergia/ui/card";

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>დელუქს ნომერი</CardTitle>
        <Badge variant="success" dot>თავისუფალი</Badge>
      </CardHeader>
      <CardFooter>
        <Button>დაჯავშნა</Button>
      </CardFooter>
    </Card>
  );
}

"use client";

import { Button } from "@llc-conciergia/ui/button";

export function BookingButton() {
  return <Button onClick={() => alert("დაჯავშნილია")}>დაჯავშნა</Button>;
}