Komponens Könyvtár

Gyönyörű, akadálymentes és újrafelhasználható komponensek gyűjteménye React, Tailwind CSS és Radix UI alapokon

Jelvények (Badges)

Rövid címkék megjelenítése különböző stílusokkal és színekkel

Alapértelmezett
Másodlagos
Destruktív
Körvonalas
Siker
Figyelem
Infó
Gradiens
typescript
import { Badge } from "@/components/ui/badge";

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="gradient">Gradient</Badge>

Figyelmeztetések (Alerts)

Fontos üzenetek megjelenítése ikonokkal és bezárás funkcióval

typescript
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved.
  </AlertDescription>
</Alert>

Kártyák (Cards)

Rugalmas konténer komponens tartalom megjelenítésére

API Integráció

Kapcsold össze AI modelljeidet zökkenőmentesen

REST API-nk megkönnyíti az erős AI képességek integrálását alkalmazásaidba mindössze néhány sornyi kóddal.

Kiemelt Kártya

Egyedi kerettel kiemelve

A kártyák testreszabhatók különböző keretekkel, hátterekkel és lebegő effektusokkal, hogy illeszkedjenek a dizájnhoz.

typescript
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here</p>
  </CardContent>
</Card>

Töltésjelzők (Spinners)

Töltési indikátorok különböző méretekben és stílusokban

Kicsi

Közepes

Nagy

XL

typescript
import { Spinner } from "@/components/ui/spinner";

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" variant="secondary" />

Haladás (Progress)

Befejezési állapot megjelenítése animált folyamatsávokkal

Haladás66%
Egyedi Szín33%
typescript
import { Progress } from "@/components/ui/progress";

<Progress value={66} />
<Progress value={33} indicatorClassName="bg-gradient-to-r from-purple-500 to-pink-500" />

Fülek (Tabs)

Tartalom rendszerezése váltható szekciókba

Ez az előnézeti fül. Bármilyen tartalmat megjeleníthetsz itt.

Előnézeti tartalom helye

typescript
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Preview content</TabsContent>
  <TabsContent value="code">Code content</TabsContent>
</Tabs>

Avatarok

Felhasználói profilképek megjelenítése helyettesítőkkel

CNJDSKAB
typescript
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Statisztikai Kártyák

Kulcsfontosságú mutatók megjelenítése ikonokkal és trendekkel

Összes Felhasználó

50,234

+12.5% múlt hónaphoz képest

Aktív Munkamenetek

2,847

+8.2% múlt héthez képest

AI Kérések

1.2M

+45.1% tegnaphoz képest

typescript
import { StatCard } from "@/components/StatCard";
import { Users } from "lucide-react";

<StatCard
  title="Total Users"
  value="50,234"
  change="+12.5% from last month"
  changeType="positive"
  icon={Users}
  gradient="from-purple-500 to-pink-500"
/>

Idővonal (Timeline)

Események megjelenítése időrendi sorrendben

Termék Indítás

2025 Jan

AI platformom 1.0-ás verziójának kiadása

API v2 Kiadása

2024 Dec

Gyorsabb, hatékonyabb API indítása

50K Felhasználó Elérve

2024 Nov

Jelentős mérföldkő a felhasználói növekedésben

Cég Alapítása

2024 Jún

Az utazás kezdete az AI demokratizálásáért

typescript
import { Timeline } from "@/components/Timeline";
import { Rocket } from "lucide-react";

<Timeline
  items={[
    {
      title: "Product Launch",
      description: "Released version 1.0",
      date: "Jan 2025",
      icon: Rocket,
    },
  ]}
/>

Bemenetek (Inputs)

Űrlap bemenetek különböző típusokkal és stílusokkal

typescript
import { Input } from "@/components/ui/input";

<Input placeholder="Email address" type="email" />
<Input placeholder="Password" type="password" />
<Input placeholder="Disabled input" disabled />

Kód Blokkok

Kód megjelenítése szintaxis kiemeléssel és másolás funkcióval

typescript
1import { CodeBlock } from "@/components/CodeBlock";
2
3function Example() {
4  const message = "Hello, World!";
5  console.log(message);
6  return <div>{message}</div>;
7}

Gombok (Buttons)

Interaktív gombok különböző stílusokban és méretekben

typescript
import { Button } from "@/components/ui/button";

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>